HAML

GitLab에서 사용하는 Ruby on Rails 템플릿 언어인 HAML과 Pajamas 디자인 시스템 컴포넌트를 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 폼 빌더를 사용하려면: 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 pro