HAML

HAML은 GitLab이 사용하는 Ruby on Rails 템플릿 언어입니다.

HAML과 Pajamas 디자인 시스템

GitLab UI는 Pajamas 디자인 시스템을 준수하는 Vue 컴포넌트 라이브러리입니다. 이러한 컴포넌트 중 일부는 JavaScript에 의존하므로 Vue에서만 사용할 수 있습니다.

그러나 일부 간단한 컴포넌트(예: 버튼, 체크박스 또는 양식 입력란)는 HAML에서 사용할 수 있습니다.

  • 일부 Pajamas 컴포넌트는 ViewComponent로 사용할 수 있습니다. 가능한 경우 이를 사용하세요.
  • ViewComponent가 없는 경우, 직접 만드는 것은 어떨까요? 도움이 필요한 경우 Foundations 팀에 문의하세요.
  • 대체로, 이를 위해 올바른 CSS 클래스를 요소에 적용함으로써 가능합니다.
  • 특별한 Ruby on Rails 양식 빌더가 HAML 양식에서 GitLab UI 컴포넌트 사용을 돕습니다.

GitLab UI 양식 빌더 사용

GitLab UI 양식 빌더를 사용하려면:

  1. form_for를 gitlab_ui_form_for로 변경하세요.
  2. f.check_box를 f.gitlab_ui_checkbox_component로 변경하세요.
  3. f.label을 제거하고 대신 f.gitlab_ui_checkbox_component의 두 번째 인수로 라벨을 전달하세요.

예:

  • 변경 전: 

    ...

  • 변경 후: 

    ...

사용 가능한 컴포넌트

GitLab UI 양식 빌더를 사용할 때, 다음 컴포넌트를 HAML에서 사용할 수 있습니다.

note
현재 나열된 컴포넌트만 사용할 수 있지만, 더 많은 컴포넌트가 계획되어 있습니다.

gitlab_ui_checkbox_component

GitLab UI 문서

인수
인수 설명 타입 필요 여부 (기본값)
method gitlab_ui_form_for에 전달된 객체의 속성 Symbol true
label 체크박스 라벨. HTML이 필요한 경우 label 슬롯을 사용할 수 있습니다. String false (nil)
help_text 체크박스 아래에 표시되는 도움말 텍스트. HTML이 필요한 경우 help_text 슬롯을 사용할 수 있습니다. String false (nil)
checkbox_options Rails check_box 메서드에 전달되는 옵션 Hash false ({})
checked_value 체크박스가 선택된 경우의 값 String false ('1')
unchecked_value 체크박스가 선택되지 않은 경우의 값 String false ('0')
label_options Rails label 메서드에 전달되는 옵션 Hash false ({})
슬롯

이 컴포넌트는 ViewComponent 슬롯을 지원합니다.

슬롯 설명
label 체크박스 라벨 내용. 이 슬롯은 label 인수 대신 사용할 수 있습니다.
help_text 체크박스 아래에 표시되는 도움말 텍스트 내용. 이 슬롯은 help_text 인수 대신 사용할 수 있습니다.

gitlab_ui_radio_component

GitLab UI 문서

Arguments
매개변수 설명 유형 필수 여부 (기본 값)
method gitlab_ui_form_for에 전달된 객체의 속성입니다. Symbol true
value 라디오 태그의 값입니다. Symbol true
label 라디오 레이블입니다. 레이블 내에 HTML 콘텐츠가 필요한 경우 이 매개변수 대신 label 슬롯을 사용할 수 있습니다. String false (nil)
help_text 라디오 버튼 아래에 표시되는 도움말 텍스트입니다. HTML 콘텐츠가 필요한 경우 이 매개변수 대신 help_text 슬롯을 사용할 수 있습니다. String false (nil)
radio_options Rails radio_button 메서드에 전달되는 옵션입니다. Hash false ({})
label_options Rails label 메서드에 전달되는 옵션입니다. Hash false ({})
슬롯

이 컴포넌트는 ViewComponent 슬롯을 지원합니다.

슬롯 설명
label 체크박스 레이블 콘텐츠입니다. label 매개변수 대신에 이 슬롯을 사용할 수 있습니다.
help_text 라디오 버튼 아래에 표시되는 도움말 텍스트 콘텐츠입니다. 이 슬롯은 help_text 매개변수 대신에 사용할 수 있습니다.