webcoreui
1.0.0
중요한
이 라이브러리는 여전히 초기 개발 중입니다. 새로운 변경 사항은 기존 기능을 중단 할 수 있으며이 단계에서는 최종 기능을 최종적으로 고려해서는 안됩니다. 라이브러리는 v1.0에 도달하면 안정적으로 간주됩니다.
Webcoreui.dev에서 전체 문서를 사용할 수 있습니다.
웹 코어는 독립형 프로젝트로 사용하거나 기존 Astro, Svelte 또는 React 생태계에 통합 될 수 있습니다. 시작하는 가장 쉬운 방법은 저장소를 복제하고 npm run dev 실행하여 사용 가능한 구성 요소로 페이지를 작성하는 것입니다.
메모
시작하기 전에 노드와 같은 패키지 관리자가 설치되어 있는지 확인하십시오.
웹 코어 구성 요소는 스타일에 SASS를 사용합니다. 구성 요소 라이브러리를 사용하려면 다음 패키지가 설치되어 있어야합니다.
v1.82v5.7프로젝트 설정에 따라 다음 패키지도 필요합니다.
v5.0v5.12v18.3v18.3다음 명령 중 하나를 실행하여 웹 코어를 종속성으로 설치하십시오.
# Using NPM
npm i webcoreui
# Using Yarn
yarn add webcoreui CSS 구성을 설정하기 위해 프로젝트의 루트에 빈 webcore.config.scss 파일을 만듭니다. Global SCSS 파일에서 다음을 호출하여 기본 스타일 및 글꼴을 설정합니다.
@use ' webcoreui/styles ' as * ;
@include setup ((
// Define paths for your fonts
fontRegular: ' /fonts/Inter-Regular.woff2 ' ,
fontBold: ' /fonts/Inter-Bold.woff2 '
));팁
public/fonts 디렉토리에서 Webcore가 사용하는 글꼴을 다운로드 할 수 있습니다.
믹스 Setup 믹스는 다음 옵션을 수락 할 수 있습니다.
| 재산 | 기본값 | 목적 |
|---|---|---|
includeResets | true | 재설정 스타일을 포함하십시오. 자신의 CSS 재설정을 사용하려면 false 로 설정하십시오. |
includeUtilities | true | CSS 용 유틸리티 클래스를 추가합니다. 사용 가능한 유틸리티 클래스에 대해 자세히 알아보십시오. |
includeTooltip | true | 툴팁을 사용하기위한 스타일이 추가됩니다. |
includeScrollbarStyles | true | 스크롤 바에 대한 스타일이 추가됩니다. |
다음 CSS 변수를 재정의하여 기본 구성 요소 스타일을 변경할 수 있습니다.
html body {
// Avatar component
--w-avatar-border : var ( --w-color-primary-70 );
// Banner component
--w-banner-top : 0 ;
// BottomNavigation component
--w-bottom-navigation-max-width : auto ;
// Checkbox component
--w-checkbox-color : var ( --w-color-primary );
// Collapsible component
--w-collapsible-initial-height : 0 ;
--w-collapsible-max-height : 100 % ;
// Masonry component
--w-masonry-gap : 5 px ;
// Progress component
--w-progress-color : var ( --w-color-primary );
--w-progress-background : var ( --w-color-primary-50 );
--w-progress-stripe-light : var ( --w-color-primary );
--w-progress-stripe-dark : var ( --w-color-primary-10 );
// Radio component
--w-radio-color : var ( --w-color-primary );
// Rating component
--w-rating-color : var ( --w-color-primary );
--w-rating-empty-color : var ( --w-color-primary );
--w-rating-empty-background : var ( --w-color-primary-70 );
--w-rating-size : 18 px ;
// Ribbon component
--w-ribbon-offset : 20 px ;
--w-ribbon-folded-offset : 10 px ;
// Scrollbars
--w-scrollbar-bg : var ( --w-color-primary-60 );
--w-scrollbar-fg : var ( --w-color-primary-50 );
// Skeleton component
--w-skeleton-color : var ( --w-color-primary-60 );
--w-skeleton-wave-color : var ( --w-color-primary-50 );
// Slider component
--w-slider-background : var ( --w-color-primary-50 );
--w-slider-color : var ( --w-color-primary );
--w-slider-thumb : var ( --w-color-primary-50 );
// Spinner component
--w-spinner-color : var ( --w-color-primary );
--w-spinner-width : 2 px ;
--w-spinner-speed : 2 s ;
--w-spinner-size : 30 px ;
--w-spinner-dash : 8 ;
// Spoiler component
--w-spoiler-color : var ( --w-color-primary );
// Stepper component
--w-stepper-color-border : var ( --w-color-primary-50 );
--w-stepper-color-active : var ( --w-color-info );
--w-stepper-color-complete : var ( --w-color-success );
// Switch component
--w-switch-off-color : var ( --w-color-primary-50 );
--w-switch-on-color : var ( --w-color-primary );
// ThemeSwitcher component
--w-theme-switcher-size : 20 px ;
// Timeline component
--w-timeline-color : var ( --w-color-primary-50 );
--w-timeline-text-color : var ( --w-color-primary );
--w-timeline-counter : decimal ;
// Tooltips
--w-tooltip-background : var ( --w-color-primary );
--w-tooltip-color : var ( --w-color-primary-70 );
// Override border-radius
--w-sm-radius : 2 px ;
--w-md-radius : 5 px ;
--w-lg-radius : 10 px ;
--w-xl-radius : 15 px ;
}웹 코어 구성 요소를 코드에서 가져 와서 사용하기 시작하십시오.
---
// Import the component relevant to your project
// How to import Astro components
import { Accordion } from ' webcoreui/astro '
// How to import Svelte components
import { Accordion } from ' webcoreui/svelte '
// How to import React components
import { Accordion } from ' webcoreui/react '
---
< Accordion items = { [{ ... }] } />
