Descargar webcoreui - Descargar código fuente de webcoreui

webcoreui

Componentes de terceros

1.0.0

Descargar

Importante

Esta biblioteca todavía está en el desarrollo temprano. Los nuevos cambios pueden romper la funcionalidad existente, y ninguna funcionalidad debe considerarse final en esta etapa. La biblioteca se considerará estable una vez que llegue a V1.0.

Tabla de contenido

Tabla de contenido
Documentación
Empezando
- Requisitos previos
- Instalación
- Configuración
- Uso de componentes
Componentes

Documentación

Documentación completa disponible en WebCoreui.dev.

Empezando

WebCore se puede utilizar como un proyecto independiente, o se puede integrar en sus ecosistemas Astro, Svelte o React existentes. La forma más fácil de comenzar es clonar el repositorio y ejecutar npm run dev para comenzar a construir sus páginas con los componentes disponibles.

Requisitos previos

Nota

Antes de comenzar, asegúrese de tener un administrador de paquetes instalado, como el nodo.

Los componentes de WebCore usan SASS para el estilo. Para usar la biblioteca de componentes, debe tener los siguientes paquetes instalados:

Sass - v1.82
TypeScript - v5.7

Dependiendo de la configuración de su proyecto, también necesitará los siguientes paquetes:

Para proyectos Astro
- Astro - v5.0
Para proyectos de esbeltos
- Svelte - v5.12
Para proyectos react
- React - v18.3
- React DOM - v18.3

Instalación

Instale WebCore como dependencia ejecutando uno de los siguientes comando:

 # Using NPM
npm i webcoreui

# Using Yarn
yarn add webcoreui

Configuración

Cree un archivo vacío webcore.config.scss en la raíz de su proyecto para configurar las configuraciones de CSS. Configurar estilos y fuentes predeterminados llamando a lo siguiente en su archivo SCSS global:

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

Consejo

Puede descargar los usos de Fonts WebCore desde el directorio public/fonts .

La mezcla Setup también puede aceptar las siguientes opciones:

Propiedad	Valor predeterminado	Objetivo
`includeResets`	`true`	Incluya estilos de reinicio. Establezca en `false` si desea usar sus propios restos CSS.
`includeUtilities`	`true`	Agrega clases de utilidad para CSS. Lea más sobre las clases de utilidad disponibles aquí.
`includeTooltip`	`true`	Agrega estilos para usar información sobre herramientas.
`includeScrollbarStyles`	`true`	Agrega estilos para barras de desplazamiento.

Los estilos de componentes predeterminados se pueden cambiar anulando las siguientes variables 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 ;
}

Uso de componentes

Comience a usar los componentes de WebCore en su código importándolos:

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