oruga

Oruga UI는 애벌레와 같으며 최소한이지만 기능적입니다. 그것은 당신의 손에 그것을 나비로 바꾸고 있습니다

(?) =>?

특징

Oruga는 의존성이없는 Vue.js 용 경량 UI 구성 요소 라이브러리입니다. 쉽게 사용자 정의 할 수있는 구성 요소 세트를 제공하며 특정 스타일 또는 CSS 프레임 워크 (부트 스트랩, Bulma, Tailwindcss 등)에 의존하지 않습니다. 따라서 그리드 시스템이나 CSS 유틸리티를 제공하지는 않지만 원하는 CSS 프레임 워크를 통합 할 수 있습니다. Oruga는 기능성 구성 요소 세트를 제공하므로 응용 프로그램의 UI/UX 측면에만 집중할 수 있으며 JavaScript 라인을 만지지 않고도 향후 변경에 전적으로 유연 할 수 있습니다.

• CSS 프레임 워크 Agnostic : 특정 CSS 프레임 워크/라이브러리에 대한 의존성은 없지만 구성 요소를 다른 방식으로 완전히 사용자 정의 할 수 있기 때문에 구성 요소를 쉽게 통합 할 수 있습니다.
• 스테로이드가있는 구성 요소 : 대부분의 구성 요소는 기본 요소의 간단한 래퍼가 아니지만 새롭고 맞춤형 기능을 추가합니다.
• Lightweight : 다른 내부 의존성이없고 필요한 구성 요소 만 가져옵니다.

구성 요소 라이브러리가 필요하고 사용자 정의 스타일을 쉽게 적용하려는 경우 Oruga는 라이브러리입니다! ?

또한 모든 것을 직접 스타일링하고 싶지 않다면 다양한 테마를 만들었습니다. ?

선적 서류 비치

여기에서 온라인 문서를 찾아보십시오.

? 구성 요소 사용자 정의에 대한 자세한 내용은 문서의 "사용자 정의"섹션을주의 깊게 읽으십시오.

? Oruga의 행동을 보려면 문서의 예제 섹션으로 이동하십시오.

참고 : 문서 예제의 소스 코드는 각 구성 요소의 examples 디렉토리에서 찾을 수 있으며 데모 역할도합니다.

빠른 시작

? Oruga는 vue.js 버전 3.x 에서 사용할 수 있습니다

ORUGA 설정

1. Oruga를 설치하십시오.

npm install @oruga-ui/oruga-next

2. 구성 요소 가져 오기 :

• 신속하게 시작하려면 Oruga 사용하여 모든 구성 요소를 등록하십시오.

   import { createApp } from 'vue'
  import Oruga from '@oruga-ui/oruga-next' ;
  
  createApp ( ... ) . use ( Oruga ) ;

• 트리 흔들림을 사용하려면 수동으로 등록 구성 요소를 등록하십시오.

   import { createApp } from 'vue'
  import { OField , OInput } from '@oruga-ui/oruga'
  
  createApp ( ... )
    . use ( OField )
    . use ( OInput )

• 또는 SFC에서 가져 오십시오.

사용자 정의

Oruga의 초강대국은 구성 가능성과 CSS 프레임 워크의 불가지론 적 접근법입니다. 클래스 매핑 접근법을 사용하여 특정 클래스를 정의하여 각 구성 요소는 개별적으로 사용자 정의하고 구성 할 수 있습니다. 따라서 Oruga는 기본적으로 스타일없이 제공됩니다. 그러나 테마라는 몇 가지 공식 사전 정의 된 구성이 있으며,이를 통해 응용 프로그램에 개별 모양과 느낌을 제공하도록 확장 할 수 있습니다. 모든 구성 요소는 기본적으로 사전 정의 된 클래스와 함께 제공됩니다.

Oruga 문서의 "사용자 정의"섹션을 읽으십시오.

Tailwind , Bulma , Bootstrap , Material 또는 기타 CSS 프레임 워크를 사용하여 완전히 사용자 정의 된 등록 양식의 예를 보려면 공식 Oruga Multiframework 예제 (여기에서 사용 가능한 소스 코드)를 살펴 보거나 Tailwindcss 2에 더 익숙하다면 공식 Tailwindcs Demo를 시도하십시오 (여기서 소스 코드).

nuxt와 함께 Oruga 사용

Oruga는 현재 Nuxt.js 모듈을 제공하지 않습니다.

Nuxt.js 플러그인 시스템 plugins 사용할 수 oruga.js .

 import Oruga from '@oruga-ui/oruga-next' ;

export default defineNuxtPlugin ( ( nuxtApp ) => {
  nuxtApp . vueApp . use ( Oruga ) ;
} ) ;

이 플러그인을 앱에서 사용할 수 있도록하려면 nuxt.config.js 의 plugins 배열 에이 파일을 추가하십시오.

plugins: [ { src : '~plugins/oruga.js' } ]

플러그인이 nuxt.js와 어떻게 작동하는지 이해하려면 nuxtjs 플러그인 문서를 살펴보십시오.

공식 Nuxtjs + Oruga 예를 살펴보십시오.

기여

기고 가이드 라인을 참조하십시오.

저희에게 연락 하시겠습니까?

→ Oruga Discord 서버에 가입하십시오.

버전 작성

Oruga는 패키지 버전에 시맨틱 버전 2.0.0을 사용합니다.

여전히 베타 버전이 있지만 버전은이 패턴을 따릅니다 : v0.yz , 여기서 :

• Y : MAJOR (Breaking Changes)
• Z : 마이너 또는 패치

핵심 팀

월터 토 마시

안드레아 스테인

Marcel Moravek

기고자

매일이 프로젝트를 개선 해 주신 모든 분들께 감사드립니다.

전체 목록.

크레딧

Matteo Guadagnini가 디자인 한 Oruga 로고

Oruga SVG 확인란 및 무선 구성 요소 및 Holidays Assets Fabrizio Masini에 의해 생성되었습니다.

특허

MIT 라이센스에 따라 릴리스 된 코드.