• HAMLとパジャマデザインシステム
  • GitLab UI フォームビルダーを使う
  • 利用可能なコンポーネント
    • gitlab_ui_checkbox_component
      • 引数
      • スロット
    • gitlab_ui_radio_component
      • 引数
      • スロット

ハムル

HAMLはGitLabが使っているRuby on Railsのテンプレート言語です。

HAMLとパジャマデザインシステム

GitLab UIは Pajamasデザインシステムに準拠したVueコンポーネントライブラリです。これらのコンポーネントの多くはJavaScriptに依存しているため、Vueでしか使用できません。

しかし、より単純なコンポーネント（ボタン、チェックボックス、フォーム入力など）のいくつかはHAMLで使用することができます：

• パジャマコンポーネントのいくつかはViewComponent として利用可能です。可能であれば、これらを使用してください。
• ViewComponentが存在しない場合は、作成してください。サポートが必要な場合は、Foundationsチームに相談してください。
• 予備として、要素に正しい CSS クラスを適用することで、これを行うことができます。
• GitLab UI コンポーネントを HAML フォームで使うためのカスタムRuby on Rails フォームビルダーがあります。

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 の第2引数にラベルを渡します。

使用例：

• 前

   = 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.')
  

• After

   = 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 スロットをサポートします。