HAML

HAML 是 GitLab 使用的 Ruby on Rails 模板语言。

HAML 与我们的 Pajamas 设计系统

GitLab UI 是一个遵循 Pajamas 设计系统 的 Vue 组件库。其中许多组件依赖于 JavaScript，因此只能在 Vue 中使用。

但是，一些更简单的组件（例如按钮、复选框或表单输入）可以在 HAML 中使用：

• 部分 Pajamas 组件可作为 ViewComponent 使用。请尽可能使用它们。
• 如果没有 ViewComponent，为什么不直接创建一个呢？如果需要帮助，请联系 设计系统 团队。
• 作为备选方案，可以通过为元素应用正确的 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.md')
          %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.md')
        - 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 插槽。