ViewComponent

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

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

Lookbook으로 컴포넌트 탐색

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

Pajamas 컴포넌트

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

note
아직 이러한 컴포넌트를 생성 중이므로 모든 파자마 컴포넌트가 ViewComponent로 사용 가능한 것은 아닙니다. 찾고 있는 컴포넌트가 아직 사용 가능하지 않다면 Foundations team에 문의하세요.

사용 가능한 컴포넌트

이 디렉터리은 최선을 다한 것으로 간주하십시오. 전체 디렉터리은 app/components/pajamas에서 찾을 수 있습니다. 또한 컴포넌트를 더 상호 작용하는 방법으로 보려면 Lookbook(http://gdk.test:3000/rails/lookbook)을 참조하세요.

Alert

Pajamas::AlertComponent는 파자마 경보 사양을 따릅니다.

예시:

기본적으로 아이콘이 있는 해제 가능한 정보 경보를 생성합니다: 

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

다양한 변형을 설정하고 아이콘 숨기기 등: 

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

옵션의 전체 디렉터리은 여기 소스에서 확인할 수 있습니다.

Pajamas::BannerComponent는 파자마 배너 사양을 따릅니다.

예시:

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

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

옵션의 전체 디렉터리은 여기 소스에서 확인할 수 있습니다.

버튼

Pajamas::ButtonComponent는 파자마 버튼 사양을 따릅니다.

예시:

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

= 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는 파자마 카드 사양을 따릅니다.

예시:

카드에는 필수적으로 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: "my-id"}, body_options: {data: { count: 1 }})

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

옵션의 전체 디렉터리은 여기 소스에서 확인할 수 있습니다.

체크박스 태그

Pajamas::CheckboxTagComponent는 파자마 체크박스 사양을 따릅니다.

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: '팔로우함' }

옵션의 전체 디렉터리은 여기 소스에서 확인할 수 있습니다.

체크박스

Pajamas::CheckboxComponent는 파자마 체크박스 사양을 따릅니다.

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

옵션의 전체 디렉터리은 여기 소스에서 확인할 수 있습니다.

토글

Pajamas::ToggleComponent는 Pajamas 토글 사양을 따릅니다. 

= 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` 매개변수를 사용하세요.
note
토글 ViewComponent는 Vue.js 구성요소에 의존하기 때문에 특별합니다. 이 구성요소를 실제로 초기화하려면 ~/toggles에서 initToggle 도우미를 호출해야 합니다.

모든 옵션의 전체 디렉터리은 원본을 참조하세요.

레이아웃

레이아웃 구성요소는 GitLab에서 사용되는 공통 레이아웃 패턴을 생성하는 데 사용할 수 있습니다.

사용 가능한 구성요소

수평 섹션

많은 설정 페이지에서는 제목과 설명이 왼쪽에 있고 설정 필드가 오른쪽에 있는 레이아웃을 사용합니다. 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')
  - c.with_body do
    .form-group.gl-form-group
      = f.label :name, _('New group name')
      = f.text_field :name

모든 옵션의 전체 디렉터리은 원본을 참조하세요.

모범 사례

  • Haml에서 새로운 뷰를 생성하려는 경우, 사용 가능한 구성요소를 사용하는 것이 일반적인 Haml 태그와 CSS 클래스를 생성하는 것보다 좋습니다.
  • 기존 Haml 뷰에 변경을 가하려는 경우, 예를 들어 평범한 Haml로 구현된 버튼을 보고 있다면 ViewComponent를 사용하도록 마이그레이션하는 것을 고려해보세요.
  • 새 구성요소를 생성하기로 결정했다면, 미리보기도 작성하는 것을 고려해보세요. 이렇게 하면 Lookbook으로 구성요소를 쉽게 발견할 수 있을 뿐 아니라, 여러 상태를 테스트하는 것이 훨씬 쉬워집니다.