InfoGrab DocsInfoGrab Docs

ViewComponent

요약

ViewComponent는 Vue와 같은 JavaScript 프레임워크 없이 Ruby on Rails에서 재사용 가능하고, 테스트 가능하며, 캡슐화된 뷰 컴포넌트를 만들기 위한 프레임워크입니다. 자세한 내용은 공식 문서나 이 소개 영상을 참고하세요.

ViewComponent는 Vue와 같은 JavaScript 프레임워크 없이 Ruby on Rails에서 재사용 가능하고, 테스트 가능하며, 캡슐화된 뷰 컴포넌트를 만들기 위한 프레임워크입니다. 서버 사이드에서 렌더링되며 Haml과 같은 템플릿 언어와 함께 원활하게 사용할 수 있습니다.

자세한 내용은 공식 문서나 이 소개 영상을 참고하세요.

Lookbook으로 컴포넌트 탐색#

개발 모드에서만 사용 가능한 http://gdk.test:3000/rails/lookbook에 Lookbook이 있어 ViewComponent 미리보기를 탐색하고 상호작용할 수 있습니다.

Pajamas 컴포넌트#

Pajamas 디자인 시스템의 일부 컴포넌트는 app/components/pajamas에서 ViewComponent로 제공됩니다.

이 컴포넌트들은 아직 만드는 과정 중에 있으므로, 모든 Pajamas 컴포넌트가 ViewComponent로 제공되는 것은 아닙니다. 찾고 있는 컴포넌트가 아직 없는 경우 Design Systems team에 문의하세요.

사용 가능한 컴포넌트#

이 목록은 최선의 노력으로 유지됩니다. 전체 목록은 app/components/pajamas에서 확인할 수 있습니다. 또한 Lookbook(http://gdk.test:3000/rails/lookbook)에서 컴포넌트를 더 상호작용적으로 탐색할 수 있습니다.

Alert#

Pajamas::AlertComponent는 Pajamas Alert 명세를 따릅니다.

예시:

기본적으로 해제 가능한 정보 알림을 생성합니다:

= render Pajamas::AlertComponent.new(title: "Almost done!")

변형, 지속성 등을 설정할 수 있습니다:

= render Pajamas::AlertComponent.new(title: "All done!",
  variant: :success,
  dismissible: :false)

전체 옵션 목록은 해당 소스를 참고하세요.

Pajamas::BannerComponent는 Pajamas Banner 명세를 따릅니다.

예시:

가장 간단한 형태의 배너 컴포넌트는 다음과 같습니다:

= render Pajamas::BannerComponent.new(button_text: 'Learn more', button_link: example_path,
  svg_path: 'illustrations/example.svg') do |c|
  - c.with_title { 'Hello world!' }
  %p Content of your banner goes here...

더 많은 제어가 필요한 경우 svg_path 대신 illustration 슬롯을, button_text와 button_link 대신 primary_action 슬롯을 사용할 수도 있습니다:

= render Pajamas::BannerComponent.new do |c|
  - c.with_illustration do
    = custom_icon('my_inline_svg')
  - c.with_title do
    Hello world!
  - c.with_primary_action do
    = render 'my_button_in_a_partial'

전체 옵션 목록은 해당 소스를 참고하세요.

Button#

Pajamas::ButtonComponent는 Pajamas Button 명세를 따릅니다.

예시:

버튼 컴포넌트에는 많은 옵션이 있지만 모두 좋은 기본값을 가지고 있으므로, 가장 간단한 버튼은 다음과 같습니다:

= render Pajamas::ButtonComponent.new do |c|
  = _('Button text goes here')

다음 예시는 사용 가능한 대부분의 옵션을 보여줍니다:

= render Pajamas::ButtonComponent.new(category: :secondary,
  variant: :danger,
  size: :small,
  type: :submit,
  disabled: true,
  loading: false,
  block: true) do |c|
  Button text goes here

버튼처럼 보이는 <a> 태그를 만들 수도 있습니다:

= render Pajamas::ButtonComponent.new(href: root_path) do |c|
  Go home

전체 옵션 목록은 해당 소스를 참고하세요.

Card#

Pajamas::CardComponent는 Pajamas Card 명세를 따릅니다.

예시:

카드에는 필수 body 슬롯과 선택적 header 및 footer 슬롯이 있습니다:

= render Pajamas::CardComponent.new do |c|
  - c.with_header do
    I'm the header.
  - c.with_body do
    %p Multiple line
    %p body content.
  - c.with_footer do
    Footer goes here.

이들 또는 카드 자체에 사용자 정의 속성을 추가하려면 다음 옵션을 사용하세요:

= render Pajamas::CardComponent.new(card_options: {id: "my-id"}, body_options: {data: { count: 1 }})

header_options와 footer_options도 사용할 수 있습니다.

전체 옵션 목록은 해당 소스를 참고하세요.

Checkbox tag#

Pajamas::CheckboxTagComponent는 Pajamas Checkbox 명세를 따릅니다.

name 인수와 label 슬롯은 필수입니다.

예시:

= render Pajamas::CheckboxTagComponent.new(name: 'project[initialize_with_sast]',
  checkbox_options: { data: { testid: 'initialize-with-sast-checkbox' } }) do |c|
  - c.with_label do
    = s_('ProjectsNew|Enable Static Application Security Testing (SAST)')
  - c.with_help_text do
    = s_('ProjectsNew|Analyze your source code for known security vulnerabilities.')
    = link_to _('Learn more.'), help_page_path('user/application_security/sast/_index.md'), target: '_blank', rel: 'noopener noreferrer'

레거시 추적 파라미터(track_action, track_label, track_property)는 더 이상 사용되지 않습니다. 자세한 내용은 마이그레이션 가이드를 참고하세요.

전체 옵션 목록은 해당 소스를 참고하세요.

Checkbox#

Pajamas::CheckboxComponent는 Pajamas Checkbox 명세를 따릅니다.

Pajamas::CheckboxComponent는 GitLab UI 폼 빌더에 의해 내부적으로 사용되며, form 인수로 ActionView::Helpers::FormBuilder 인스턴스가 전달되어야 합니다. 이 ViewComponent를 렌더링하려면 gitlab_ui_checkbox_component 메서드를 사용하는 것이 좋습니다. ActionView::Helpers::FormBuilder 인스턴스 없이 체크박스를 사용하려면 CheckboxTagComponent를 사용하세요.

전체 옵션 목록은 해당 소스를 참고하세요.

Experiment badge#

Pajamas::ExperimentBadgeComponent는 Pajamas Experiment Badge 명세를 따릅니다.

예시:

기본적으로 실험 배지를 생성합니다:

= render Pajamas::ExperimentBadgeComponent.new

베타 배지를 생성할 수도 있습니다:

= render Pajamas::ExperimentBadgeComponent.new(type: :beta)

이 컴포넌트에는 실험 또는 베타 기능이 무엇인지 설명하는 안내 팝오버가 포함되어 있습니다. 팝오버 위치를 사용자 정의할 수 있습니다:

= render Pajamas::ExperimentBadgeComponent.new(type: :experiment, popover_placement: 'top')

전체 옵션 목록은 해당 소스를 참고하세요.

Toggle#

Pajamas::ToggleComponent는 Pajamas Toggle 명세를 따릅니다.

= render Pajamas::ToggleComponent.new(classes: 'js-force-push-toggle',
  label: s_("ProtectedBranch|Toggle allowed to force push"),
  is_checked: protected_branch.allow_force_push,
  label_position: :hidden) do
  Leverage this block to render a rich help text. To render a plain text help text, prefer the `help` parameter.

Toggle ViewComponent는 Vue.js 컴포넌트에 의존하는 특수한 컴포넌트입니다. 이 컴포넌트를 실제로 초기화하려면 ~/toggles의 initToggle 헬퍼를 호출해야 합니다.

전체 옵션 목록은 해당 소스를 참고하세요.

Layouts#

레이아웃 컴포넌트는 GitLab에서 사용되는 일반적인 레이아웃 패턴을 만드는 데 활용할 수 있습니다.

사용 가능한 컴포넌트#

Page heading#

페이지 제목과 선택적 액션이 있는 표준 페이지 헤더입니다.

예시:

= render ::Layouts::PageHeadingComponent.new(_('Page title')) do |c|
  - c.with_actions do
    = buttons

전체 옵션 목록은 해당 소스를 참고하세요.

Index layout#

헤딩, 알림, 콘텐츠 영역 사이의 간격을 설정하는 레이아웃입니다. 선택적 페이지 헤딩, 알림, 메인 콘텐츠 섹션을 포함하는 인덱스 페이지를 위한 일관된 구조를 제공합니다.

예시:

= render ::Layouts::IndexLayout.new(heading: _('Page title'), description: _('Page description')) do |c|
  - c.with_alerts do
    = render Pajamas::AlertComponent.new(title: 'Alert message')
  = render 'items_table'

이 컴포넌트는 다음 슬롯을 지원합니다:

  • heading: 사용자 정의 헤딩 마크업 (내부적으로 PageHeadingComponent 사용)

  • description: 사용자 정의 설명 콘텐츠 (내부적으로 PageHeadingComponent 사용)

  • alerts: 페이지 알림 컨테이너 (비어 있을 때 공간을 차지하지 않음)

  • content: 페이지 콘텐츠

전체 옵션 목록은 해당 소스를 참고하세요.

Vue 사용 방법과 동적 패널 및 패널 액션을 포함한 전체 가이드는 페이지 레이아웃 및 패널을 참고하세요.

Detail layout#

헤딩, 알림, 콘텐츠 영역 사이의 간격을 설정하는 레이아웃입니다. 선택적 페이지 헤딩, 알림, 사이드바, 메인 콘텐츠 섹션을 포함하는 상세 페이지를 위한 일관된 구조를 제공합니다.

예시:

= render ::Layouts::DetailLayout.new(heading: _('Page title'), description: _('Page description')) do |c|
  - c.with_alerts do
    = render Pajamas::AlertComponent.new(title: 'Alert message')
  - c.with_sidebar do
    = render 'sidebar'

  = render 'items_table'

이 컴포넌트는 다음 슬롯을 지원합니다:

  • heading: 사용자 정의 헤딩 마크업 (내부적으로 PageHeadingComponent 사용)

  • description: 사용자 정의 설명 콘텐츠 (내부적으로 PageHeadingComponent 사용)

  • alerts: 페이지 알림 컨테이너 (비어 있을 때 공간을 차지하지 않음)

  • sidebar: 페이지 사이드바

  • content: 페이지 콘텐츠

전체 옵션 목록은 해당 소스를 참고하세요.

Vue 사용 방법과 동적 패널 및 패널 액션을 포함한 전체 가이드는 페이지 레이아웃 및 패널을 참고하세요.

CRUD component#

생성, 읽기, 업데이트, 삭제와 같은 사용자 액션이 있는 테이블이나 목록을 호스팅하는 데 사용되는 목록 컨테이너입니다.

예시:

= render ::Layouts::CrudComponent.new(_('CRUD title'), icon: 'ICONNAME', count: COUNT) do |c|
  - c.with_description do
    = description
  - c.with_actions do
    = buttons
  - c.with_form do
    = add item form
  - c.with_body do
    = body
  - c.with_pagination do
    = pagination component
  - c.with_footer do
    = optional footer

전체 옵션 목록은 해당 소스를 참고하세요.

Horizontal section#

많은 설정 페이지는 제목과 설명이 왼쪽에 있고 설정 필드가 오른쪽에 있는 레이아웃을 사용합니다. Layouts::HorizontalSectionComponent를 사용하면 이 레이아웃을 만들 수 있습니다.

예시:

= render ::Layouts::HorizontalSectionComponent.new(options: { class: 'gl-mb-6' }) do |c|
  - c.with_title { _('Naming, visibility') }
  - c.with_description do
    = _('Update your group name, description, avatar, and visibility.')
    = link_to _('Learn more about groups.'), help_page_path('user/group/_index.md')
  - c.with_body do
    .form-group.gl-form-group
      = f.label :name, _('New group name')
      = f.text_field :name

전체 옵션 목록은 해당 소스를 참고하세요.

Settings block#

관련 설정을 그룹화하는 설정 블록(아코디언)입니다.

예시:

= render ::Layouts::SettingsBlock.new(_('Settings block heading')) do |c|
  - c.with_description do
    = description
  - c.with_body do
    = body

전체 옵션 목록은 해당 소스를 참고하세요.

Settings section#

SettingsBlock(위 참고)과 유사하게 이 컴포넌트는 관련 설정을 함께 그룹화하는 데 사용됩니다. SettingsBlock과 달리 아코디언 기능을 제공하지 않습니다. 스티키 헤더를 사용합니다.

예시:

= render ::Layouts::SettingsSection.new(_('Settings section heading')) do |c|
  - c.with_description do
    = description
  - c.with_body do
    = body

전체 옵션 목록은 해당 소스를 참고하세요.

모범 사례#

  • Haml에서 새로운 뷰를 만들려는 경우, CSS 클래스가 있는 일반 Haml 태그를 만드는 것보다 사용 가능한 컴포넌트를 활용하세요.

  • 기존 Haml 뷰를 수정하는 중에 예를 들어 아직 일반 Haml로 구현된 버튼을 발견하면, ViewComponent를 사용하도록 마이그레이션하는 것을 고려하세요.

  • 새 컴포넌트를 만들기로 했다면, 해당 컴포넌트에 대한 미리보기도 함께 만드는 것을 고려하세요. 이렇게 하면 다른 사람들이 Lookbook으로 컴포넌트를 발견하는 데 도움이 되며, 다양한 상태를 테스트하기도 훨씬 쉬워집니다.

미리보기 레이아웃#

ViewComponent 미리보기에 사용자 정의 레이아웃이 필요한 경우 레이아웃 코드에 다음 경로를 사용하는 것을 고려하세요:

  • app/views/layouts/lookbook — 레이아웃 HAML 파일

  • app/assets/javascripts/entrypoints/lookbook — 사용자 정의 JavaScript 코드

  • app/assets/stylesheets/lookbook — 사용자 정의 SASS 코드

JavaScript와 SASS 코드는 레이아웃에 수동으로 포함해야 합니다.

ViewComponent

GitLab v19.1
원문 보기
요약

ViewComponent는 Vue와 같은 JavaScript 프레임워크 없이 Ruby on Rails에서 재사용 가능하고, 테스트 가능하며, 캡슐화된 뷰 컴포넌트를 만들기 위한 프레임워크입니다. 자세한 내용은 공식 문서나 이 소개 영상을 참고하세요.

ViewComponent는 Vue와 같은 JavaScript 프레임워크 없이 Ruby on Rails에서 재사용 가능하고, 테스트 가능하며, 캡슐화된 뷰 컴포넌트를 만들기 위한 프레임워크입니다. 서버 사이드에서 렌더링되며 Haml과 같은 템플릿 언어와 함께 원활하게 사용할 수 있습니다.

자세한 내용은 공식 문서나 이 소개 영상을 참고하세요.

Lookbook으로 컴포넌트 탐색#

개발 모드에서만 사용 가능한 http://gdk.test:3000/rails/lookbook에 Lookbook이 있어 ViewComponent 미리보기를 탐색하고 상호작용할 수 있습니다.

Pajamas 컴포넌트#

Pajamas 디자인 시스템의 일부 컴포넌트는 app/components/pajamas에서 ViewComponent로 제공됩니다.

이 컴포넌트들은 아직 만드는 과정 중에 있으므로, 모든 Pajamas 컴포넌트가 ViewComponent로 제공되는 것은 아닙니다. 찾고 있는 컴포넌트가 아직 없는 경우 Design Systems team에 문의하세요.

사용 가능한 컴포넌트#

이 목록은 최선의 노력으로 유지됩니다. 전체 목록은 app/components/pajamas에서 확인할 수 있습니다. 또한 Lookbook(http://gdk.test:3000/rails/lookbook)에서 컴포넌트를 더 상호작용적으로 탐색할 수 있습니다.

Alert#

Pajamas::AlertComponent는 Pajamas Alert 명세를 따릅니다.

예시:

기본적으로 해제 가능한 정보 알림을 생성합니다:

= render Pajamas::AlertComponent.new(title: "Almost done!")

변형, 지속성 등을 설정할 수 있습니다:

= render Pajamas::AlertComponent.new(title: "All done!",
  variant: :success,
  dismissible: :false)

전체 옵션 목록은 해당 소스를 참고하세요.

Pajamas::BannerComponent는 Pajamas Banner 명세를 따릅니다.

예시:

가장 간단한 형태의 배너 컴포넌트는 다음과 같습니다:

= render Pajamas::BannerComponent.new(button_text: 'Learn more', button_link: example_path,
  svg_path: 'illustrations/example.svg') do |c|
  - c.with_title { 'Hello world!' }
  %p Content of your banner goes here...

더 많은 제어가 필요한 경우 svg_path 대신 illustration 슬롯을, button_text와 button_link 대신 primary_action 슬롯을 사용할 수도 있습니다:

= render Pajamas::BannerComponent.new do |c|
  - c.with_illustration do
    = custom_icon('my_inline_svg')
  - c.with_title do
    Hello world!
  - c.with_primary_action do
    = render 'my_button_in_a_partial'

전체 옵션 목록은 해당 소스를 참고하세요.

Button#

Pajamas::ButtonComponent는 Pajamas Button 명세를 따릅니다.

예시:

버튼 컴포넌트에는 많은 옵션이 있지만 모두 좋은 기본값을 가지고 있으므로, 가장 간단한 버튼은 다음과 같습니다:

= render Pajamas::ButtonComponent.new do |c|
  = _('Button text goes here')

다음 예시는 사용 가능한 대부분의 옵션을 보여줍니다:

= render Pajamas::ButtonComponent.new(category: :secondary,
  variant: :danger,
  size: :small,
  type: :submit,
  disabled: true,
  loading: false,
  block: true) do |c|
  Button text goes here

버튼처럼 보이는 <a> 태그를 만들 수도 있습니다:

= render Pajamas::ButtonComponent.new(href: root_path) do |c|
  Go home

전체 옵션 목록은 해당 소스를 참고하세요.

Card#

Pajamas::CardComponent는 Pajamas Card 명세를 따릅니다.

예시:

카드에는 필수 body 슬롯과 선택적 header 및 footer 슬롯이 있습니다:

= render Pajamas::CardComponent.new do |c|
  - c.with_header do
    I'm the header.
  - c.with_body do
    %p Multiple line
    %p body content.
  - c.with_footer do
    Footer goes here.

이들 또는 카드 자체에 사용자 정의 속성을 추가하려면 다음 옵션을 사용하세요:

= render Pajamas::CardComponent.new(card_options: {id: "my-id"}, body_options: {data: { count: 1 }})

header_options와 footer_options도 사용할 수 있습니다.

전체 옵션 목록은 해당 소스를 참고하세요.

Checkbox tag#

Pajamas::CheckboxTagComponent는 Pajamas Checkbox 명세를 따릅니다.

name 인수와 label 슬롯은 필수입니다.

예시:

= render Pajamas::CheckboxTagComponent.new(name: 'project[initialize_with_sast]',
  checkbox_options: { data: { testid: 'initialize-with-sast-checkbox' } }) do |c|
  - c.with_label do
    = s_('ProjectsNew|Enable Static Application Security Testing (SAST)')
  - c.with_help_text do
    = s_('ProjectsNew|Analyze your source code for known security vulnerabilities.')
    = link_to _('Learn more.'), help_page_path('user/application_security/sast/_index.md'), target: '_blank', rel: 'noopener noreferrer'

레거시 추적 파라미터(track_action, track_label, track_property)는 더 이상 사용되지 않습니다. 자세한 내용은 마이그레이션 가이드를 참고하세요.

전체 옵션 목록은 해당 소스를 참고하세요.

Checkbox#

Pajamas::CheckboxComponent는 Pajamas Checkbox 명세를 따릅니다.

Pajamas::CheckboxComponent는 GitLab UI 폼 빌더에 의해 내부적으로 사용되며, form 인수로 ActionView::Helpers::FormBuilder 인스턴스가 전달되어야 합니다. 이 ViewComponent를 렌더링하려면 gitlab_ui_checkbox_component 메서드를 사용하는 것이 좋습니다. ActionView::Helpers::FormBuilder 인스턴스 없이 체크박스를 사용하려면 CheckboxTagComponent를 사용하세요.

전체 옵션 목록은 해당 소스를 참고하세요.

Experiment badge#

Pajamas::ExperimentBadgeComponent는 Pajamas Experiment Badge 명세를 따릅니다.

예시:

기본적으로 실험 배지를 생성합니다:

= render Pajamas::ExperimentBadgeComponent.new

베타 배지를 생성할 수도 있습니다:

= render Pajamas::ExperimentBadgeComponent.new(type: :beta)

이 컴포넌트에는 실험 또는 베타 기능이 무엇인지 설명하는 안내 팝오버가 포함되어 있습니다. 팝오버 위치를 사용자 정의할 수 있습니다:

= render Pajamas::ExperimentBadgeComponent.new(type: :experiment, popover_placement: 'top')

전체 옵션 목록은 해당 소스를 참고하세요.

Toggle#

Pajamas::ToggleComponent는 Pajamas Toggle 명세를 따릅니다.

= render Pajamas::ToggleComponent.new(classes: 'js-force-push-toggle',
  label: s_("ProtectedBranch|Toggle allowed to force push"),
  is_checked: protected_branch.allow_force_push,
  label_position: :hidden) do
  Leverage this block to render a rich help text. To render a plain text help text, prefer the `help` parameter.

Toggle ViewComponent는 Vue.js 컴포넌트에 의존하는 특수한 컴포넌트입니다. 이 컴포넌트를 실제로 초기화하려면 ~/toggles의 initToggle 헬퍼를 호출해야 합니다.

전체 옵션 목록은 해당 소스를 참고하세요.

Layouts#

레이아웃 컴포넌트는 GitLab에서 사용되는 일반적인 레이아웃 패턴을 만드는 데 활용할 수 있습니다.

사용 가능한 컴포넌트#

Page heading#

페이지 제목과 선택적 액션이 있는 표준 페이지 헤더입니다.

예시:

= render ::Layouts::PageHeadingComponent.new(_('Page title')) do |c|
  - c.with_actions do
    = buttons

전체 옵션 목록은 해당 소스를 참고하세요.

Index layout#

헤딩, 알림, 콘텐츠 영역 사이의 간격을 설정하는 레이아웃입니다. 선택적 페이지 헤딩, 알림, 메인 콘텐츠 섹션을 포함하는 인덱스 페이지를 위한 일관된 구조를 제공합니다.

예시:

= render ::Layouts::IndexLayout.new(heading: _('Page title'), description: _('Page description')) do |c|
  - c.with_alerts do
    = render Pajamas::AlertComponent.new(title: 'Alert message')
  = render 'items_table'

이 컴포넌트는 다음 슬롯을 지원합니다:

  • heading: 사용자 정의 헤딩 마크업 (내부적으로 PageHeadingComponent 사용)

  • description: 사용자 정의 설명 콘텐츠 (내부적으로 PageHeadingComponent 사용)

  • alerts: 페이지 알림 컨테이너 (비어 있을 때 공간을 차지하지 않음)

  • content: 페이지 콘텐츠

전체 옵션 목록은 해당 소스를 참고하세요.

Vue 사용 방법과 동적 패널 및 패널 액션을 포함한 전체 가이드는 페이지 레이아웃 및 패널을 참고하세요.

Detail layout#

헤딩, 알림, 콘텐츠 영역 사이의 간격을 설정하는 레이아웃입니다. 선택적 페이지 헤딩, 알림, 사이드바, 메인 콘텐츠 섹션을 포함하는 상세 페이지를 위한 일관된 구조를 제공합니다.

예시:

= render ::Layouts::DetailLayout.new(heading: _('Page title'), description: _('Page description')) do |c|
  - c.with_alerts do
    = render Pajamas::AlertComponent.new(title: 'Alert message')
  - c.with_sidebar do
    = render 'sidebar'

  = render 'items_table'

이 컴포넌트는 다음 슬롯을 지원합니다:

  • heading: 사용자 정의 헤딩 마크업 (내부적으로 PageHeadingComponent 사용)

  • description: 사용자 정의 설명 콘텐츠 (내부적으로 PageHeadingComponent 사용)

  • alerts: 페이지 알림 컨테이너 (비어 있을 때 공간을 차지하지 않음)

  • sidebar: 페이지 사이드바

  • content: 페이지 콘텐츠

전체 옵션 목록은 해당 소스를 참고하세요.

Vue 사용 방법과 동적 패널 및 패널 액션을 포함한 전체 가이드는 페이지 레이아웃 및 패널을 참고하세요.

CRUD component#

생성, 읽기, 업데이트, 삭제와 같은 사용자 액션이 있는 테이블이나 목록을 호스팅하는 데 사용되는 목록 컨테이너입니다.

예시:

= render ::Layouts::CrudComponent.new(_('CRUD title'), icon: 'ICONNAME', count: COUNT) do |c|
  - c.with_description do
    = description
  - c.with_actions do
    = buttons
  - c.with_form do
    = add item form
  - c.with_body do
    = body
  - c.with_pagination do
    = pagination component
  - c.with_footer do
    = optional footer

전체 옵션 목록은 해당 소스를 참고하세요.

Horizontal section#

많은 설정 페이지는 제목과 설명이 왼쪽에 있고 설정 필드가 오른쪽에 있는 레이아웃을 사용합니다. Layouts::HorizontalSectionComponent를 사용하면 이 레이아웃을 만들 수 있습니다.

예시:

= render ::Layouts::HorizontalSectionComponent.new(options: { class: 'gl-mb-6' }) do |c|
  - c.with_title { _('Naming, visibility') }
  - c.with_description do
    = _('Update your group name, description, avatar, and visibility.')
    = link_to _('Learn more about groups.'), help_page_path('user/group/_index.md')
  - c.with_body do
    .form-group.gl-form-group
      = f.label :name, _('New group name')
      = f.text_field :name

전체 옵션 목록은 해당 소스를 참고하세요.

Settings block#

관련 설정을 그룹화하는 설정 블록(아코디언)입니다.

예시:

= render ::Layouts::SettingsBlock.new(_('Settings block heading')) do |c|
  - c.with_description do
    = description
  - c.with_body do
    = body

전체 옵션 목록은 해당 소스를 참고하세요.

Settings section#

SettingsBlock(위 참고)과 유사하게 이 컴포넌트는 관련 설정을 함께 그룹화하는 데 사용됩니다. SettingsBlock과 달리 아코디언 기능을 제공하지 않습니다. 스티키 헤더를 사용합니다.

예시:

= render ::Layouts::SettingsSection.new(_('Settings section heading')) do |c|
  - c.with_description do
    = description
  - c.with_body do
    = body

전체 옵션 목록은 해당 소스를 참고하세요.

모범 사례#

  • Haml에서 새로운 뷰를 만들려는 경우, CSS 클래스가 있는 일반 Haml 태그를 만드는 것보다 사용 가능한 컴포넌트를 활용하세요.

  • 기존 Haml 뷰를 수정하는 중에 예를 들어 아직 일반 Haml로 구현된 버튼을 발견하면, ViewComponent를 사용하도록 마이그레이션하는 것을 고려하세요.

  • 새 컴포넌트를 만들기로 했다면, 해당 컴포넌트에 대한 미리보기도 함께 만드는 것을 고려하세요. 이렇게 하면 다른 사람들이 Lookbook으로 컴포넌트를 발견하는 데 도움이 되며, 다양한 상태를 테스트하기도 훨씬 쉬워집니다.

미리보기 레이아웃#

ViewComponent 미리보기에 사용자 정의 레이아웃이 필요한 경우 레이아웃 코드에 다음 경로를 사용하는 것을 고려하세요:

  • app/views/layouts/lookbook — 레이아웃 HAML 파일

  • app/assets/javascripts/entrypoints/lookbook — 사용자 정의 JavaScript 코드

  • app/assets/stylesheets/lookbook — 사용자 정의 SASS 코드

JavaScript와 SASS 코드는 레이아웃에 수동으로 포함해야 합니다.