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