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

HAML

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

HAML 및 Pajamas 디자인 시스템

GitLab UI는 Pajamas design system을 준수하는 Vue 컴포넌트 라이브러리입니다. 이러한 컴포넌트 중 많은 부분은 JavaScript에 의존하므로 Vue에서만 사용할 수 있습니다.

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

일부 Pajamas 컴포넌트는 ViewComponent로 사용할 수 있습니다. 가능한 경우 이를 사용하세요.
ViewComponent가 없는 경우 만들어보는 것은 어떨까요? 도움이 필요한 경우 디자인 시스템 팀에 문의하십시오.
대체로 해당 요소에 올바른 CSS 클래스를 적용하여 수행할 수 있습니다.
사용자 정의 Ruby on Rails 폼 빌더가 있어 HAML 폼에서 GitLab UI 컴포넌트를 사용하는 데 도움을 줍니다.

GitLab UI 폼 빌더 사용

GitLab UI 폼 빌더를 사용하려면:

form_for를 gitlab_ui_form_for로 변경합니다.
f.check_box를 f.gitlab_ui_checkbox_component로 변경합니다.
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 Docs

인수

인수	설명	유형	필수 (기본값)
`method`	`gitlab_ui_form_for`에 전달되는 객체의 속성	`Symbol`	`true`
`label`	체크박스 레이블. 필요한 경우 `label` 슬롯을 HTML 대신 사용할 수 있습니다.	`String`	`false` (`nil`)
`help_text`	체크박스 아래에 표시되는 도움말 텍스트. 필요한 경우 `help_text` 슬롯을 HTML 대신 사용할 수 있습니다.	`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`