HAML

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

HAML과 우리의 Pajamas 디자인 시스템

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

그러나 버튼, 체크박스 또는 폼 입력과 같은 일부 간단한 컴포넌트는 HAML에서 사용할 수 있습니다:

  • Pajamas 컴포넌트 중 일부는 ViewComponent로 제공됩니다. 가능할 때 이를 사용하세요.
  • ViewComponent가 없다면, 직접 만들면 어떨까요? 도움이 필요하면 디자인 시스템 팀에 문의하세요.
  • 대체 방법으로, 올바른 CSS 클래스를 요소에 적용하여 이를 수행할 수 있습니다.
  • HAML 폼에서 GitLab UI 컴포넌트를 사용하기 위한 커스텀 Ruby on Rails 폼 빌더도 존재합니다.

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의 두 번째 인수로 레이블을 전달하세요.

예를 들면:

  • 이전:

    = form_for @group do |f|
  .form-group.gl-mb-3
    .gl-form-checkbox.custom-control.custom-checkbox
      = f.check_box :prevent_sharing_groups_outside_hierarchy, disabled: !can_change_prevent_sharing_groups_outside_hierarchy?(@group), class: 'custom-control-input'
      = f.label :prevent_sharing_groups_outside_hierarchy, class: 'custom-control-label' do
        %span
          = safe_format(s_('GroupSettings|Prevent members from sending invitations to groups outside of %{group} and its subgroups.'), group: link_to_group(@group))
        %p.help-text= prevent_sharing_groups_outside_hierarchy_help_text(@group)

  .form-group.gl-mb-3
    .gl-form-checkbox.custom-control.custom-checkbox
      = f.check_box :lfs_enabled, checked: @group.lfs_enabled?, class: 'custom-control-input'
      = f.label :lfs_enabled, class: 'custom-control-label' do
        %span
          = _('Allow projects within this group to use Git LFS')
          = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index')
        %p.help-text= _('This setting can be overridden in each project.')

  • 이후:

    = gitlab_ui_form_for @group do |f|
  .form-group.gl-mb-3
    = f.gitlab_ui_checkbox_component :prevent_sharing_groups_outside_hierarchy,
        safe_format(s_('GroupSettings|Prevent members from sending invitations to groups outside of %{group} and its subgroups.'), group: link_to_group(@group)),
        help_text: prevent_sharing_groups_outside_hierarchy_help_text(@group),
        checkbox_options: { disabled: !can_change_prevent_sharing_groups_outside_hierarchy?(@group) }

  .form-group.gl-mb-3
    = f.gitlab_ui_checkbox_component :lfs_enabled, checkbox_options: { checked: @group.lfs_enabled? } do |c|
      - c.with_label do
        = _('Allow projects within this group to use Git LFS')
        = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index')
      - c.with_help_text do
        = _('This setting can be overridden in each project.')

사용 가능한 구성 요소

GitLab UI 폼 빌더를 사용할 때 HAML에서 사용할 수 있는 구성 요소는 다음과 같습니다.

참고:

현재 나열된 구성 요소만 사용할 수 있지만 더 많은 구성 요소가 계획되고 있습니다.

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 문서

인수
인수 설명 유형 필수(기본값)
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 인수 대신 사용할 수 있습니다.