ดาวน์โหลด webcoreui - webcoreui ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

webcoreui

ส่วนประกอบของบุคคลที่สาม

1.0.0

ดาวน์โหลด

สำคัญ

ห้องสมุดนี้ยังอยู่ในระหว่างการพัฒนาก่อน การเปลี่ยนแปลงใหม่สามารถทำลายฟังก์ชั่นที่มีอยู่และไม่ควรพิจารณาฟังก์ชั่นสุดท้ายในขั้นตอนนี้ ห้องสมุดจะถือว่ามีเสถียรภาพเมื่อถึง v1.0

สารบัญ

สารบัญ
เอกสาร
เริ่มต้น
- ข้อกำหนดเบื้องต้น
- การติดตั้ง
- การตั้งค่า
- ใช้ส่วนประกอบ
ส่วนประกอบ

เอกสาร

เอกสารฉบับเต็มมีอยู่ใน webcoreui.dev

เริ่มต้น

เว็บคอร์สามารถใช้เป็นโครงการแบบสแตนด์อโลนหรือสามารถรวมเข้ากับระบบนิเวศของ Astro, Svelte หรือ React ที่มีอยู่ของคุณ วิธีที่ง่ายที่สุดในการเริ่มต้นคือการโคลนที่เก็บและเรียกใช้ npm run dev เพื่อเริ่มสร้างหน้าเว็บของคุณด้วยส่วนประกอบที่มีอยู่

ข้อกำหนดเบื้องต้น

บันทึก

ก่อนเริ่มต้นใช้งานตรวจสอบให้แน่ใจว่าคุณติดตั้งแพ็คเกจผู้จัดการเช่นโหนด

ส่วนประกอบของเว็บคอร์ใช้ Sass สำหรับการจัดแต่งทรงผม ในการใช้ไลบรารีส่วนประกอบคุณต้องติดตั้งแพ็คเกจต่อไปนี้:

Sass - v1.82
TypeScript - v5.7

ขึ้นอยู่กับการตั้งค่าโครงการของคุณคุณจะต้องมีแพ็คเกจต่อไปนี้:

สำหรับโครงการ Astro
- Astro - v5.0
สำหรับโครงการ svelte
- svelte - v5.12
สำหรับโครงการ React
- ตอบสนอง - v18.3
- ตอบสนอง DOM - v18.3

การติดตั้ง

ติดตั้งเว็บคอร์เป็นการพึ่งพาโดยเรียกใช้หนึ่งในคำสั่งต่อไปนี้:

 # Using NPM
npm i webcoreui

# Using Yarn
yarn add webcoreui

การตั้งค่า

สร้างไฟล์ webcore.config.scss ที่รูทของโครงการของคุณเพื่อตั้งค่าการกำหนดค่า CSS ตั้งค่าสไตล์และฟอนต์เริ่มต้นโดยเรียกสิ่งต่อไปนี้ในไฟล์ SCSS ส่วนกลางของคุณ:

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

เคล็ดลับ

คุณสามารถดาวน์โหลด Fonts Webcore ที่ใช้จากไดเรกทอรี public/fonts

Setup Mixin ยังสามารถยอมรับตัวเลือกต่อไปนี้:

คุณสมบัติ	ค่าเริ่มต้น	วัตถุประสงค์
`includeResets`	`true`	รวมถึงรูปแบบการรีเซ็ต ตั้งค่าเป็น `false` หากคุณต้องการใช้การรีเซ็ต CSS ของคุณเอง
`includeUtilities`	`true`	เพิ่มคลาสยูทิลิตี้สำหรับ CSS อ่านเพิ่มเติมเกี่ยวกับคลาสยูทิลิตี้ที่มีอยู่ที่นี่
`includeTooltip`	`true`	เพิ่มสไตล์สำหรับการใช้คำแนะนำเครื่องมือ
`includeScrollbarStyles`	`true`	เพิ่มสไตล์สำหรับแถบเลื่อน

รูปแบบส่วนประกอบเริ่มต้นสามารถเปลี่ยนแปลงได้โดยการเอาชนะตัวแปร 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 ;
}

ใช้ส่วนประกอบ

เริ่มใช้ส่วนประกอบเว็บคอร์ในรหัสของคุณโดยนำเข้า:

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