ViewComponent

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

더 많은 정보는 공식 문서나 이 설명 비디오를 참조하세요.

Lookbook으로 컴포넌트 찾아보기

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

Pajamas 컴포넌트

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

note
이러한 컴포넌트들을 생성하는 과정에 있으므로, 아직 모든 파자마스 컴포넌트가 ViewComponent로 제공되는 것은 아닙니다. 원하는 컴포넌트가 아직 사용 가능하지 않은 경우 Foundations 팀에 문의하세요.

사용 가능한 컴포넌트

본 디렉터리은 최선을 다한 것으로 생각해주십시오. 전체 디렉터리은 app/components/pajamas에서 찾을 수 있습니다. 또한 컴포넌트를 더 상호 작용적으로 찾을 수 있는 용도로 Lookbook을 참조하십시오.

Alert

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

예시:

기본적으로 아이콘과 함께 사라질 수 있는 정보 알림이 생성됩니다: 

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

변형을 설정하거나 아이콘을 숨기는 등 더 많은 설정도 가능합니다: 

= 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: "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', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' } }) 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 _('자세히 알아보기.'), help_page_path('user/application_security/sast/index'), target: '_blank', rel: 'noopener noreferrer', data: { track_action: 'followed' }

더 많은 옵션은 소스를 확인하세요.

체크박스

Pajamas::CheckboxComponent는 Pajamas Checkbox 사양을 따릅니다.

note
Pajamas::CheckboxComponent는 GitLab UI 폼 빌더에서 내부적으로 사용되며 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)
  Leverage this block to render a rich help text. To render a plain text help text, prefer the `help` parameter.
note
토글 ViewComponent는 Vue.js 컴포넌트에 따라 특별합니다. 이 컴포넌트를 실제로 초기화하려면 ~/toggles에서 initToggle 헬퍼를 호출하십시오.

모든 옵션 디렉터리은 다음의 소스를 참조하세요.

레이아웃

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

사용 가능한 컴포넌트

수평 섹션

많은 설정 페이지에서 제목과 설명이 왼쪽에 있고 설정 필드가 오른쪽에 있는 레이아웃을 사용합니다. 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

모든 옵션 디렉터리은 다음의 소스를 참조하세요.

최적의 방법

  • Haml에서 새로운 뷰를 만들 예정이라면 사용 가능한 컴포넌트를 사용하여 일반 Haml 태그와 CSS 클래스를 만드는 것을 권장합니다.
  • 기존 Haml 뷰를 변경하고 일반 Haml로 구현된 버튼을 보게 되면 새로운 ViewComponent를 사용하도록 마이그레이션을 고려해 보세요.
  • 새로운 컴포넌트를 만들기로 결정한다면, 미리보기도 만드는 것을 고려해 보세요. 이렇게 하면 다른 사람들이 Lookbook을 통해 컴포넌트를 발견하는 데 도움이 되며, 다양한 상태를 테스트하는 것이 훨씬 쉬워집니다.