webcoreui下載webcoreui源代碼下載

webcoreui

三方組件

1.0.0

下載

重要的

該圖書館仍處於早期發展。新的更改可能會破壞現有功能，並且在此階段不應將功能視為最終功能。一旦達到v1.0，該庫將被視為穩定。

文件

完整的文檔可在webcoreui.dev上找到。

入門

WebCore可以用作獨立項目，也可以將其集成到您現有的Astro，Svelte或React生態系統中。最簡單的開始方法是克隆存儲庫並運行npm run dev以開始使用可用組件構建頁面。

先決條件

筆記

在開始之前，請確保已安裝了軟件包管理器，例如Node。

WebCore組件使用SASS進行樣式。要使用組件庫，您必須安裝以下軟件包：

SASS v1.82
打字稿v5.7

根據您的項目設置，您還需要以下包：

用於Astro項目
- Astro v5.0
對於苗條的項目
- Svelte v5.12
用於React項目
- React v18.3
- react dom v18.3

安裝

通過運行以下命令之一來安裝WebCore作為依賴關係：

 # Using NPM
npm i webcoreui

# Using Yarn
yarn add webcoreui

設定

在項目的根部創建一個空的webcore.config.scss文件，以設置CSS配置。設置默認樣式和字體通過在您的全局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 Mixin還可以接受以下選項：

財產	預設值	目的
`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 ;
}

使用組件

通過導入代碼中的WebCore組件開始使用：

 ---
// 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 = { [{ ... }] } />