ViewComponent

Ruby on Rails에서 재사용 가능하고 테스트 가능하며 캡슐화된 뷰 컴포넌트를 만드는 ViewComponent 프레임워크와 GitLab의 Pajamas 컴포넌트 및 레이아웃 컴포넌트 사용 방법을 설명합니다.

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) 전체 옵션 목록은 해당 소스 를 참고하세요. Banner # 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_inlin