• HAML 및 Pajamas 디자인 시스템
  • GitLab UI 폼 빌더 사용
  • 사용 가능한 컴포넌트
    • gitlab_ui_checkbox_component
      • 인수
      • 슬롯
    • gitlab_ui_radio_component
      • 인수
      • 슬롯

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의 두 번째 인수로 레이블을 전달합니다.

예:

• 이전:

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

인수

슬롯

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

gitlab_ui_radio_component

GitLab UI 문서

인수

슬롯

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