Téléchargement webcoreui - Téléchargement du code source webcoreui

webcoreui

Composants tiers

1.0.0

Télécharger

Important

Cette bibliothèque est encore en début de développement. De nouveaux changements peuvent rompre les fonctionnalités existantes et aucune fonctionnalité ne doit être considérée comme finale à ce stade. La bibliothèque sera considérée comme stable une fois qu'elle atteindra la V1.0.

Table des matières

Table des matières
Documentation
Commencer
- Condition préalable
- Installation
- Installation
- Utilisation de composants
Composants

Documentation

Documentation complète disponible sur webcoreui.dev.

Commencer

WebCore peut être utilisé comme projet autonome, ou il peut être intégré à vos écosystèmes Astro, Svelte ou React existants. La façon la plus simple de commencer est de cloner le référentiel et d'exécuter npm run dev pour commencer à construire vos pages avec les composants disponibles.

Condition préalable

Note

Avant de commencer, assurez-vous que un gestionnaire de packages installé, comme le nœud.

Les composants WebCore utilisent SASS pour le style. Pour utiliser la bibliothèque de composants, vous devez installer les packages suivants:

Sass - v1.82
TypeScript - v5.7

Selon la configuration de votre projet, vous aurez également besoin des packages suivants:

Pour les projets Astro
- Astro - v5.0
Pour les projets svelte
- Svelte - v5.12
Pour les projets de réaction
- React - v18.3
- React Dom - v18.3

Installation

Installez WebCore comme dépendance en exécutant l'une des commandes suivantes:

 # Using NPM
npm i webcoreui

# Using Yarn
yarn add webcoreui

Installation

Créez un fichier webcore.config.scss vide à la racine de votre projet pour configurer les configurations CSS. Configurez les styles et les polices par défaut en appelant ce qui suit dans votre fichier SCSS global:

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

Conseil

Vous pouvez télécharger les polices WebCore utilisées à partir du répertoire public/fonts .

Le mixin Setup peut également accepter les options suivantes:

Propriété	Valeur par défaut	But
`includeResets`	`true`	Incluez les styles de réinitialisation. Définissez sur `false` si vous souhaitez utiliser vos propres réinitialisations CSS.
`includeUtilities`	`true`	Ajoute des cours d'utilité pour CSS. En savoir plus sur les cours d'utilité disponibles ici.
`includeTooltip`	`true`	Ajoute des styles d'utilisation des info-bulles.
`includeScrollbarStyles`	`true`	Ajoute des styles pour les barres de défilement.

Les styles de composants par défaut peuvent être modifiés en remplaçant les variables CSS suivantes:

 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 ;
}

Utilisation de composants

Commencez à utiliser des composants WebCore dans votre code en les important:

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