Скачать webcoreui - Скачать исходный код webcoreui

webcoreui

Сторонние компоненты

1.0.0

Скачать

Важный

Эта библиотека все еще в раннем развитии. Новые изменения могут нарушить существующую функциональность, и на этом этапе не следует считать функциональность. Библиотека будет считаться стабильной, как только она достигнет v1.0.

Документация

Полная документация доступна на webcoreui.dev.

Начиная

Веб -корр может использоваться в качестве автономного проекта, или он может быть интегрирован в ваши существующие астро, стройные или реагировать экосистемы. Самый простой способ начать клонировать репозиторий и запустить npm run dev чтобы начать создавать ваши страницы с помощью доступных компонентов.

Предварительные условия

Примечание

Прежде чем начать работу, убедитесь, что у вас установлен диспетчер пакетов, например, Node.

Компоненты Webcore используют SASS для стиля. Чтобы использовать библиотеку компонентов, вы должны установить следующие пакеты:

Sass - v1.82
TypeScript - v5.7

В зависимости от настройки вашего проекта, вам также понадобятся следующие пакеты:

Для проектов Astro
- Астро - v5.0
Для стройных проектов
- СВЕЛТ - v5.12
Для реагирования проектов
- 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 '
));

Кончик

Вы можете скачать использование Webcore Fonts из каталога public/fonts .

Setup Mixin также может принять следующие параметры:

Свойство	Значение по умолчанию	Цель
`includeResets`	`true`	Включите стили сброса. Установите на `false` если вы хотите использовать свои собственные сбросы CSS.
`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 = { [{ ... }] } />