ViewComponent

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

자세한 정보는 공식 문서 또는 이 소개 비디오를 참조하십시오.

Lookbook으로 컴포넌트 찾아보기

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

Pajamas 컴포넌트

저희 Pajamas 디자인 시스템의 일부 컴포넌트는 app/components/pajamas에 ViewComponent로 사용할 수 있습니다.

참고: 이러한 컴포넌트를 만드는 과정이 진행 중이므로 모든 Pajamas 컴포넌트가 ViewComponent로 사용할 수 있는 것은 아닙니다. 갖고 계시지 않은 컴포넌트가 있다면 Design Systems 팀에 문의하십시오.

사용 가능한 컴포넌트

이 목록은 최선을 다한 것으로 간주하십시오. 전체 목록은 app/components/pajamas에서 찾을 수 있습니다. 또한 컴포넌트를 더 상호 작용적으로 탐색하려면 Lookbook(http://gdk.test:3000/rails/lookbook)을 참조하십시오.

Alert

Pajamas::AlertComponent는 Pajamas Alert 사양을 따릅니다.

예시:

기본적으로 이것은 아이콘이 있는 해제 가능한 정보 알림을 생성합니다. 

= render Pajamas::AlertComponent.new(title: "거의 완료!")

Variant를 설정하거나 아이콘을 숨기는 등 여러 가지를 설정할 수 있습니다. 

= render Pajamas::AlertComponent.new(title: "모두 완료!",
  variant: :success,
  dismissible: :false,
  show_icon: false)

모든 옵션 목록은 이 소스를 참조하십시오.

Pajamas::BannerComponent는 Pajamas Banner 사양을 따릅니다.

예시:

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

= render Pajamas::BannerComponent.new(button_text: '자세히 알아보기', button_link: example_path,
  svg_path: 'illustrations/example.svg') do |c|
  - c.with_title { '안녕하세요!' }
  %p 여기에 배너 내용이 들어갑니다...

더 많은 제어가 필요한 경우 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
    안녕하세요!
  - c.with_primary_action do
    = render 'my_button_in_a_partial'

모든 옵션 목록은 이 소스를 참조하십시오.

Button

Pajamas::ButtonComponent는 Pajamas Button 사양을 따릅니다.

예시:

버튼 컴포넌트에는 많은 옵션이 있지만 기본값이 좋기 때문에 가장 간단한 버튼은 다음과 같습니다. 

= render Pajamas::ButtonComponent.new do |c|
  = _('버튼 텍스트가 여기에 들어갑니다')

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

= render Pajamas::ButtonComponent.new(category: :secondary,
  variant: :danger,
  size: :small,
  type: :submit,
  disabled: true,
  loading: false,
  block: true) do |c|
  버튼 텍스트가 여기에 들어갑니다

이와 유사한 <a> 태그를 만들 수도 있습니다. 

= render Pajamas::ButtonComponent.new(href: root_path) do |c|
  집으로 이동

모든 옵션 목록은 이 소스를 참조하십시오.

Card

Pajamas::CardComponent는 Pajamas Card 사양을 따릅니다.

예시:

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

= render Pajamas::CardComponent.new do |c|
  - c.with_header do
    헤더입니다.
  - c.with_body do
    %p 여러 줄
    %p 본문 내용.
  - c.with_footer do
    여기에 푸터가 들어갑니다.

이러한 사항에 사용자 정의 속성을 추가하려면 다음 옵션을 사용하십시오. 

= render Pajamas::CardComponent.new(card_options: {id: "내-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', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' } }) do |c|
  - c.with_label do
    = s_('ProjectsNew|정적 응용 프로그램 보안 테스트(SAST) 활성화')
  - c.with_help_text do
    = s_('ProjectsNew|알려진 보안 취약점을 위해 소스 코드를 분석합니다.')
    = link_to _('더 알아보기.'), help_page_path('user/application_security/sast/index'), target: '_blank', rel: 'noopener noreferrer', data: { track_action: 'followed' }

모든 옵션 목록은 이 소스를 참조하십시오.

체크박스

Pajamas::CheckboxComponent는 Pajamas Checkbox 사양을 준수합니다.

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

모든 옵션의 전체 목록은 다음의 소스를 참조하세요.

토글

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
  더 풍성한 도움말 텍스트를 렌더링하려면 이 블록을 활용하세요. 일반 텍스트 도움말 텍스트를 렌더링하려면 `help` 매개변수를 사용하는 것이 좋습니다.

참고: 토글 ViewComponent는 Vue.js 구성요소에 따라 특수합니다. 이 구성요소를 실제로 초기화하려면 ~/toggles에서 initToggle 도우미를 호출해야 합니다.

모든 옵션의 전체 목록은 다음의 소스를 참조하세요.

레이아웃

레이아웃 구성요소를 사용하여 GitLab에서 사용되는 일반적인 레이아웃 패턴을 만들 수 있습니다.

사용 가능한 구성요소

페이지 헤딩

페이지 제목과 선택적 조치가 있는 표준 페이지 헤더입니다.

예시: 

= render ::Layouts::PageHeadingComponent.new(_('페이지 제목')) do |c|
  - c.with_actions do
    = buttons

모든 옵션의 전체 목록은 다음의 소스를 참조하세요.

CRUD 구성요소

테이블 또는 목록을 포함하고 있으며 생성, 읽기, 업데이트, 삭제와 같은 사용자 조작을 포함하는 목록 컨테이너입니다.

예시: 

= render ::Layouts::CrudComponent.new(_('CRUD 제목'), 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

모든 옵션의 전체 목록은 다음의 소스를 참조하세요.

수평 섹션

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

예시: 

= render ::Layouts::HorizontalSectionComponent.new(options: { class: 'gl-mb-6' }) do |c|
  - c.with_title { _('네이밍, 가시성') }
  - c.with_description do
    = _('그룹 이름, 설명, 아바타, 가시성을 업데이트하세요.')
    = link_to _('그룹에 대해 자세히 알아보기.'), help_page_path('user/group/index')
  - c.with_body do
    .form-group.gl-form-group
      = f.label :name, _('새 그룹 이름')
      = f.text_field :name

모든 옵션의 전체 목록은 다음의 소스를 참조하세요.

설정 블록

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

예시: 

= render ::Layouts::SettingsBlock.new(_('설정 블록 제목')) do |c|
  - c.with_description do
    = description
  - c.with_body do
    = body

모든 옵션의 전체 목록은 다음의 소스를 참조하세요.

설정 섹션

위에서 언급한 SettingsBlock과 유사하지만 아코디언 기능을 제공하지 않는다는 차이가 있으며 고정된 헤더를 사용합니다.

예시: 

= render ::Layouts::SettingsSection.new(_('설정 섹션 제목')) do |c|
  - c.with_description do
    = description
  - c.with_body do
    = body

For the full list of options, see its source를 참조하세요.

모범 사례

  • Haml에서 새로운 뷰를 만들려면 사용 가능한 구성요소를 사용하고 일반 Haml 태그와 CSS 클래스를 만드는 것보다 우선합니다.
  • 기존 Haml 뷰를 수정하고 일반 Haml로 구현된 버튼을 본다면 해당 버튼을 ViewComponent를 사용하도록 마이그레이션하는 것을 고려하세요.
  • 새로운 컴포넌트를 만들기로 결정하면 이에 대한 미리보기도 만드는 것을 고려하세요. 이를 통해 Lookbook을 통해 다른 사람이 컴포넌트를 발견하기 쉬워지며 다양한 상태를 테스트하는 것이 훨씬 쉬워집니다.

미리보기 레이아웃

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

  • app/views/layouts/lookbook — 레이아웃 HAML 파일용
  • app/assets/javascripts/entrypoints/lookbook — 사용자 정의 JavaScript 코드용
  • app/assets/stylesheets/lookbook — 사용자 정의 SASS 코드용

JavaScript 및 SASS 코드가 레이아웃에 수동으로 포함되어야 한다는 점에 유의하십시오.