vitamin web

สำคัญ

วิตามินเวอร์ชันปัจจุบันนี้จะไม่พัฒนาอีกต่อไปและยอมรับการแก้ไขข้อบกพร่องต่อจากนี้เท่านั้น รายละเอียดเพิ่มเติมที่นี่

วิตามินเว็บ

ห้องสมุดระบบออกแบบ Decathlon สำหรับเว็บแอปพลิเคชัน

เว็บไซต์ - Showcases

การแนะนำ

Decathlon Design System เป็นกรอบที่ช่วยระบบนิเวศของเราในการออกแบบและพัฒนาประสบการณ์ที่สอดคล้องและมีคุณภาพ สำหรับส่วนดิจิตอลนั้นเรียกว่าวิตามิน

ที่เก็บนี้โฮสต์ไลบรารีสำหรับเว็บแอปพลิเคชัน

แพ็คเกจหลัก

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

สไตล์ CSS ระดับโลก?

แพ็คเกจนี้ช่วยให้คุณมี CSS ที่สมบูรณ์พร้อมคลาสยูทิลิตี้จำนวนมากเนื่องจากมันถูกสร้างขึ้นด้วย CSS Tailwind จากนั้นจะขึ้นอยู่กับคุณที่จะเพิ่มประสิทธิภาพสำหรับการผลิตโดยการล้าง CSS ตามชั้นเรียนที่ใช้ใน HTML ของคุณ:

@VTMN/CSS	readme

หากคุณใช้ Tailwind CSS อยู่แล้วในโครงการของคุณหรือคุณต้องการใช้ประโยชน์อย่างเต็มที่จากคุณสมบัติทั้งหมดเช่นฟังก์ชั่นและคำสั่งโดยการสร้างคลาสของคุณเองผ่าน @apply ตัวอย่างเช่น คุณสามารถตรวจสอบแพ็คเกจของเรา @vtmn/css-tailwind-preset ซึ่งจะอธิบายวิธีการใช้สไตล์วิตามินในโครงการ CSS Tailwind

สไตล์ CSS เฉพาะ?

แพ็คเกจเหล่านี้อนุญาตให้ใช้องค์ประกอบที่มีระดับความละเอียดสูงขึ้น คุณจะได้รับเฉพาะสไตล์ที่คุณต้องการและสิ่งที่คุณบริโภคคือ CSs บริสุทธิ์โดยไม่มีคุณสมบัติที่กำหนดเอง CSS ดังนั้นเช่น 11 เข้ากันได้:

สำหรับโทเค็นการออกแบบ

@vtmn/css-design-tokens	readme

สำหรับแต่ละองค์ประกอบ

การกระทำ

@VTMN/CSS-BUTTON	readme
@vtmn/css-dropdown	readme
@vtmn/css-link	readme

รูปแบบ

@vtmn/css-select	readme
@vtmn/css-text-input	readme

ตัวชี้วัด

@vtmn/css-badge	readme
@vtmn/css-loader	readme
@VTMN/CSS-PRICE	readme
@vtmn/css-progressbar	readme
@VTMN/CSS-Rating	readme
@vtmn/css-tag	readme

การนำทาง

@vtmn/css-breadcrumb	readme
@vtmn/css-navbar	readme
@vtmn/css-search	readme
@vtmn/css-tabs	readme

การซ้อนทับ

@vtmn/css-alert	readme
@vtmn/css-modal	readme
@vtmn/css-popover	readme
@vtmn/css-snackbar	readme
@VTMN/CSS-TOAST	readme
@vtmn/css-tooltip	readme

การควบคุมการเลือก

@vtmn/css-checkbox	readme
@vtmn/css-chip	readme
@VTMN/CSS-Quantity	readme
@vtmn/css-radio-button	readme
@vtmn/css-toggle	readme

โครงสร้าง

@VTMN/CSS-ACCORDION	readme
@VTMN/CSS-Card	readme
@vtmn/css-divider	readme
@vtmn/css-list	readme
@vtmn/css-skeleton	readme

สำหรับสาธารณูปโภค

@vtmn/css-utilities	readme

ไอคอน

แพ็คเกจนี้ให้ไอคอนไลบรารี SVG ที่คุณสามารถรวมได้หลายวิธี (SVGs, Icon Font, Sprite, CSS, ฝัง) :

@vtmn/ไอคอน	readme

สินทรัพย์?

แพ็คเกจนี้ให้ห้องสมุดของสินทรัพย์ SVG ที่คุณสามารถรวมได้หลายวิธี (SVGs, ตัวอักษรสินทรัพย์, Sprite, CSS, ฝัง) :

@VTMN/สินทรัพย์	readme

แพ็คเกจชุมชน

เพื่อยกระดับประสบการณ์นักพัฒนาของคุณเราให้ความเป็นไปได้ที่จะพัฒนาส่วนประกอบของคุณใน React, Svelte และ Vue ตามแพ็คเกจหลักของเราด้านบน ห้องสมุดเหล่านี้ได้รับการพัฒนาและดูแลโดยชุมชนทีม Vitamin Core จะอยู่ที่นั่นเพื่อตรวจสอบและให้แน่ใจว่าคุณภาพของข้อเสนอของคุณรู้สึกอิสระที่จะมีส่วนร่วม!

ตอบสนอง?

แพ็คเกจนี้ให้ไลบรารีส่วนประกอบ React:

@vtmn/react	readme

svelte?

แพ็คเกจนี้ให้ห้องสมุดส่วนประกอบ Svelte:

@vtmn/svelte	readme

Vue?

แพ็คเกจนี้ให้ห้องสมุดส่วนประกอบ Vue:

@vtmn/vue	readme

การบริจาค

หนึ่งในเป้าหมายระบบการออกแบบ Decathlon คือการจัดหาแนวทางและส่วนประกอบเพื่อให้ได้รับความสอดคล้องประสิทธิภาพและการเข้าถึง วิธีที่ดีที่สุดในการบรรลุเป้าหมายนี้คือด้วยกัน! นั่นเป็นเหตุผลที่เราอยู่ใน GitHub เราจะรักการมีส่วนร่วมจากชุมชน (รายงานข้อผิดพลาดคำขอคุณลักษณะคำแนะนำการดึงคำขออะไรก็ตามที่คุณต้องการ!)

พื้นที่ทำงานของเส้นด้ายและ NX ใช้ในการจัดการการพึ่งพาและสร้างการกำหนดค่าผ่านแพ็คเกจ Lerna ใช้ในการจัดการการกำหนดเวอร์ชันและการเผยแพร่

เรียกใช้สิ่งต่อไปนี้เพื่อตั้งค่าสภาพแวดล้อม dev ในพื้นที่ของคุณ:

 # Install `yarn`, alternatives at https://yarnpkg.com/en/docs/install
brew install yarn

# Clone or fork `vitamin-web`
git clone [email protected]:Decathlon/vitamin-web.git # or your fork
cd vitamin-web

# install dependencies
yarn

# build all packages
yarn build

# start all showcases and build sources in watch mode & hot reload
yarn start
# or you can launch separately (recommended)
yarn start:css
yarn start:icons
yarn start:react
yarn start:svelte
yarn start:vue

ดูเอกสารที่มีส่วนร่วมสำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการมีส่วนร่วม

ขอบคุณเป็นพิเศษ

ขอขอบคุณผู้มีส่วนร่วมที่เกี่ยวข้องในห้องสมุดวิตามิน-เวทเหล่านี้ (แม้กระทั่งก่อนที่พวกเขาจะเป็นโอเพ่นซอร์ส) -

ขอขอบคุณไอคอนรีมิกซ์เพราะไอคอน Vitamix เป็นห้องสมุดไอคอน Decathlon อย่างเป็นทางการตามห้องสมุดไอคอนโอเพนซอร์ซ (ออกแบบรีมิกซ์© 2020) ไลบรารีดั้งเดิมนี้อยู่ภายใต้ใบอนุญาต Apache 2.0 และได้รับการแก้ไขโดย Decathlon เรียนรู้เพิ่มเติม

ใบอนุญาต

 Copyright 2021 Decathlon.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.