webcoreui Download - webcoreui Quellcode herunterladen

webcoreui

Komponenten von Drittanbietern

1.0.0

Herunterladen

Wichtig

Diese Bibliothek befindet sich noch in der frühen Entwicklung. Neue Änderungen können vorhandene Funktionen durchbrechen, und in dieser Phase sollte keine Funktionalität als endgültig angesehen werden. Die Bibliothek wird als stabil angesehen, sobald sie V1.0 erreicht.

Inhaltsverzeichnis

Inhaltsverzeichnis
Dokumentation
Erste Schritte
- Voraussetzungen
- Installation
- Aufstellen
- Verwendung von Komponenten
Komponenten

Dokumentation

Vollständige Dokumentation in webcoreui.dev verfügbar.

Erste Schritte

Webcore kann als eigenständiges Projekt verwendet werden oder in Ihren vorhandenen Astro-, Sufle- oder React -Ökosystemen integriert werden. Der einfachste Weg, um zu beginnen, besteht darin, das Repository zu klonen und npm run dev auszuführen, um Ihre Seiten mit den verfügbaren Komponenten zu erstellen.

Voraussetzungen

Notiz

Stellen Sie vor dem Start sicher, dass Sie einen Paketmanager installiert haben, z. B. Node.

Webcore -Komponenten verwenden SASS zum Styling. Um die Komponentenbibliothek zu verwenden, müssen die folgenden Pakete installiert sind:

SASS - v1.82
TypeScript - v5.7

Abhängig von Ihrem Projekt -Setup benötigen Sie auch die folgenden Pakete:

Für Astro -Projekte
- Astro - v5.0
Für schlanke Projekte
- Sufle - v5.12
Für React -Projekte
- React - v18.3
- Reagieren dom - v18.3

Installation

Installieren Sie WebCore als Abhängigkeit, indem Sie einen der folgenden Befehl ausführen:

 # Using NPM
npm i webcoreui

# Using Yarn
yarn add webcoreui

Aufstellen

Erstellen Sie eine leere Datei webcore.config.scss im Root Ihres Projekts zum Einrichten von CSS -Konfigurationen. Setzen Sie Standardstile und -riten ein, indem Sie Folgendes in Ihrer globalen SCSS -Datei aufrufen:

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

Tipp

Sie können die FONT -Webcore -Verwendungen aus dem Verzeichnis public/fonts herunterladen.

Das Setup -Mixin kann auch die folgenden Optionen akzeptieren:

Eigentum	Standardwert	Zweck
`includeResets`	`true`	Zurücksetzen Stile. Legen Sie auf `false` fest, wenn Sie Ihre eigenen CSS -Zurücksetzungen verwenden möchten.
`includeUtilities`	`true`	Fügt Utility -Klassen für CSS hinzu. Weitere Informationen zu den verfügbaren Versorgungskursen finden Sie hier.
`includeTooltip`	`true`	Fügt Stile für die Verwendung von Tooltips hinzu.
`includeScrollbarStyles`	`true`	Fügt Stile für Scrollbars hinzu.

Standardkomponenten -Stile können geändert werden, indem die folgenden CSS -Variablen überschreiben:

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

Verwendung von Komponenten

Verwenden Sie Webcore -Komponenten in Ihrem Code, indem Sie sie importieren:

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