Unduh webcoreui - Unduh Kode Sumber webcoreui

webcoreui

Komponen pihak ketiga

1.0.0

Unduh

Penting

Perpustakaan ini masih dalam pengembangan awal. Perubahan baru dapat merusak fungsionalitas yang ada, dan tidak ada fungsi yang harus dianggap final pada tahap ini. Perpustakaan akan dianggap stabil setelah mencapai v1.0.

Daftar isi

Daftar isi
Dokumentasi
Memulai
- Prasyarat
- Instalasi
- Pengaturan
- Menggunakan komponen
Komponen

Dokumentasi

Dokumentasi lengkap tersedia di webcoreui.dev.

Memulai

Webcore dapat digunakan sebagai proyek mandiri, atau dapat diintegrasikan ke dalam ekosistem Astro, Svelte, atau reaksi Anda yang ada. Cara termudah untuk memulai adalah mengkloning repositori dan menjalankan npm run dev untuk mulai membangun halaman Anda dengan komponen yang tersedia.

Prasyarat

Catatan

Sebelum memulai, pastikan Anda memiliki manajer paket yang diinstal, seperti Node.

Komponen webcore menggunakan sass untuk gaya. Untuk menggunakan pustaka komponen, Anda harus menginstal paket berikut:

Sass - v1.82
Naskah - v5.7

Bergantung pada pengaturan proyek Anda, Anda juga akan membutuhkan paket berikut:

Untuk proyek astro
- Astro - v5.0
Untuk proyek langsing
- Svelte - v5.12
Untuk proyek bereaksi
- Bereaksi - v18.3
- React Dom - v18.3

Instalasi

Instal WebCore sebagai ketergantungan dengan menjalankan salah satu perintah berikut:

 # Using NPM
npm i webcoreui

# Using Yarn
yarn add webcoreui

Pengaturan

Buat file webcore.config.scss yang kosong di root proyek Anda untuk mengatur konfigurasi CSS. Pengaturan Gaya dan Font Default Dengan Menelepon Yang Berikut Dalam File SCSS Global Anda:

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

Tip

Anda dapat mengunduh Fonts WebCore yang digunakan dari Direktori public/fonts .

Setup mixin juga dapat menerima opsi berikut:

Milik	Nilai default	Tujuan
`includeResets`	`true`	Sertakan gaya reset. Setel ke `false` jika Anda ingin menggunakan reset CSS Anda sendiri.
`includeUtilities`	`true`	Menambahkan kelas utilitas untuk CSS. Baca lebih lanjut tentang kelas utilitas yang tersedia di sini.
`includeTooltip`	`true`	Menambahkan gaya untuk menggunakan tooltips.
`includeScrollbarStyles`	`true`	Menambahkan gaya untuk scrollbars.

Gaya komponen default dapat diubah dengan menimpa variabel CSS berikut:

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

Menggunakan komponen

Mulailah menggunakan komponen webcore dalam kode Anda dengan mengimpornya:

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