HAML
HAML은 GitLab이 사용하는 Ruby on Rails 템플릿 언어입니다.
HAML 및 우리의 Pajamas 디자인 시스템
GitLab UI는 Pajamas 디자인 시스템을 준수하는 Vue 컴포넌트 라이브러리입니다. 이러한 컴포넌트 중 많은 부분은 JavaScript에 의존하므로 Vue에서만 사용할 수 있습니다.
그러나 일부 간단한 컴포넌트(예: 버튼, 확인란 또는 양식 입력란)는 HAML에서 사용할 수 있습니다. - 일부 Pajamas 컴포넌트는 ViewComponent로 사용할 수 있습니다. 가능한 경우 이를 사용하세요. - ViewComponent가 없는 경우, 직접 만들어보는 것은 어떨까요? 도움이 필요한 경우 Foundations 팀에 문의하세요. - 대안으로 올바른 CSS 클래스를 요소에 적용하여 수행할 수 있습니다. - HAML 양식에서 GitLab UI 컴포넌트를 사용하기 위해 사용자 정의 Ruby on Rails 양식 빌더가 있습니다.
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
인수
인수 | 설명 | 유형 | 필수 (기본 값) |
---|---|---|---|
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
Arguments
인자 | 설명 | 타입 | 필수 (기본값) |
---|---|---|---|
method
|
gitlab_ui_form_for 로 전달된 객체의 속성입니다.
| 심볼
| true
|
value
| 라디오 태그의 값입니다. | 심볼
| true
|
label
| 라디오 라벨입니다. HTML 콘텐츠가 라벨 내부에 필요한 경우, label 슬롯을 이 인자 대신에 사용할 수 있습니다.
| 문자열
|
false (nil )
|
help_text
| 라디오 버튼 아래에 표시되는 도움말 텍스트입니다. HTML 콘텐츠가 도움말 텍스트 내부에 필요한 경우, help_text 슬롯을 이 인자 대신에 사용할 수 있습니다.
| 문자열
|
false (nil )
|
radio_options
|
Rails radio_button 메서드에 전달되는 옵션입니다.
| 해시
|
false ({} )
|
label_options
|
Rails label 메서드에 전달되는 옵션입니다.
| 해시
|
false ({} )
|
슬롯
이 컴포넌트는 ViewComponent 슬롯을 지원합니다.
슬롯 | 설명 |
---|---|
label
| 라디오 라벨 내용입니다. 이 슬롯은 label 인자 대신에 사용할 수 있습니다.
|
help_text
| 라디오 버튼 아래에 표시되는 도움말 텍스트 내용입니다. 이 슬롯은 help_text 인자 대신에 사용할 수 있습니다.
|