Download webcoreui - download do código fonte webcoreui

webcoreui

Componentes de terceiros

1.0.0

Baixar

Importante

Esta biblioteca ainda está em desenvolvimento inicial. Novas alterações podem quebrar a funcionalidade existente e nenhuma funcionalidade deve ser considerada final nesta fase. A biblioteca será considerada estável quando atingir v1.0.

Índice

Índice
Documentação
Começando
- Pré -requisitos
- Instalação
- Configurar
- Usando componentes
Componentes

Documentação

Documentação completa disponível no webcoreui.dev.

Começando

A Webcore pode ser usada como um projeto independente ou pode ser integrado aos seus ecossistemas Astro, Sieve ou React existentes. A maneira mais fácil de começar é clonar o repositório e executar npm run dev para começar a criar suas páginas com os componentes disponíveis.

Pré -requisitos

Observação

Antes de começar, verifique se você tem um gerenciador de pacotes instalado, como o Node.

Os componentes da webcore usam SASS para estilo. Para usar a biblioteca de componentes, você deve ter os seguintes pacotes instalados:

SASS - v1.82
TypeScript - v5.7

Dependendo da sua configuração do projeto, você também precisará dos seguintes pacotes:

Para projetos Astro
- Astro - v5.0
Para projetos esbeltos
- SVELTE - v5.12
Para projetos react
- React - v18.3
- Reaja DOM - v18.3

Instalação

Instale a webcore como uma dependência executando um dos seguintes comando:

 # Using NPM
npm i webcoreui

# Using Yarn
yarn add webcoreui

Configurar

Crie um arquivo vazio webcore.config.scss na raiz do seu projeto para configurar configurações CSS. Configurar estilos e fontes padrão ligando para o seguinte em seu arquivo SCSS global:

 @use ' webcoreui/styles ' as * ;
@include setup ((
    // Define paths for your fonts
    fontRegular: ' /fonts/Inter-Regular.woff2 ' ,
    fontBold: ' /fonts/Inter-Bold.woff2 '
));

Dica

Você pode baixar os usos da Webcore do Fonts no diretório public/fonts .

O mixin Setup também pode aceitar as seguintes opções:

Propriedade	Valor padrão	Propósito
`includeResets`	`true`	Inclua estilos de redefinição. Defina como `false` se você quiser usar suas próprias redefinições CSS.
`includeUtilities`	`true`	Adiciona classes utilitárias para CSS. Leia mais sobre as aulas de utilidade disponíveis aqui.
`includeTooltip`	`true`	Adiciona estilos para usar dicas de ferramentas.
`includeScrollbarStyles`	`true`	Adiciona estilos para barras de rolagem.

Os estilos de componentes padrão podem ser alterados substituindo as seguintes variáveis 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 ;
}

Usando componentes

Comece a usar componentes da webcore em seu código, importando -os:

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