Lily உடன் தொடங்குதல்

நிறுவல்

Lily ஒரு Git மோனோரெப்போவில் வாழ்கிறது, ஒவ்வொரு கட்டமைப்பின் தலையற்ற நூலகம், உதவித் தொகுப்புகள் மற்றும் எடுத்துக்காட்டு பயன்பாட்டுக்கு ஒரு கோப்பகத்துடன். முயற்சிக்க விரைவான வழி மோனோரெப்போவை குளோன் செய்து உங்கள் அடுக்குக்கான தலையற்ற நூலகத்தைத் திறப்பது:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-headless
pnpm install

அதே வடிவம் மற்ற கட்டமைப்புகளுக்கும் வேலை செய்கிறது:

• @lilydesignsystem/html-headless — நிறுவல் தேவையில்லை; நகலெடுக்கவும் .html கோப்புகளை
• @lilydesignsystem/svelte-headless — pnpm install
• @lilydesignsystem/react-headless — pnpm install
• @lilydesignsystem/vue-headless — pnpm install
• @lilydesignsystem/angular-headless — pnpm install
• @lilydesignsystem/nunjucks-headless — pnpm install
• lily-design-system-blazor-headless — dotnet build

தலையற்ற நூலகங்கள் குளோன் செய்ய அல்லது வெண்டர் செய்ய வடிவமைக்கப்பட்டவை — மூலத்தை உண்மையின் மூலமாகக் கருதி தேவையானதை நகலெடுங்கள். விருப்ப உதவியாளர்கள் கூடுதலாக உருவாக்க மற்றும் வெளியீட்டுக் குழாயுடன் (JS கட்டமைப்புகளுக்கு npm, Blazor க்கு NuGet) நிறுவக்கூடிய தொகுப்புகளாகவும் வருகின்றன.

தலையற்ற கூறைப் பயன்படுத்துங்கள்

தலையற்ற கூறுகள் பொருள்சார் HTML, ARIA மற்றும் ப்ராப்களை வழங்குகின்றன — ஆனால் CSS அல்ல. ஒவ்வொரு கட்டமைப்பிலும் ஒரு Button இதோ:

HTML

<button class="button" type="button" aria-label="Save">
  Save
</button>

Svelte

<script>
  import Button from "lily-design-system-svelte-headless/components/Button/Button.svelte";
</script>

<Button onclick={save}>Save</Button>

React

import Button from "lily-design-system-react-headless/components/Button";

<Button onClick={save}>Save</Button>

Vue

<script setup>
  import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<Button @click="save">Save</Button>

Angular

import { Button } from "@lilydesignsystem/angular-headless";

@Component({
  imports: [Button],
  template: `<lily-button (click)="save()">Save</lily-button>`,
})

Blazor

<Button OnClick="Save">Save</Button>

Nunjucks

{% from "components/button/macro.njk" import button %}

{{ button({ text: "Save", type: "button" }) }}

பாணியிடப்பட்ட எடுத்துக்காட்டைப் பயன்படுத்துங்கள்

எடுத்துக்காட்டு பயன்பாடுகளில் CSS, வழிகள் மற்றும் முழு டெமோ பக்கங்கள் உள்ளன. சோதிக்க விரைவான வழி SvelteKit, Next, Nuxt, Analog அல்லது Eleventy எடுத்துக்காட்டு பயன்பாட்டைத் தொடங்கி இங்கே டெமோவைப் பார்ப்பது /components.

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install
pnpm run dev

பிறகு திறக்கவும் http://localhost:5173 மற்றும் இங்கே உலாவவும் /components.

பாணியிடல் மற்றும் வடிவமைப்புக் குறிகள்

ஒவ்வொரு கூறும் அதன் மூல உறுப்பில் ஒரு கபாப்-கேஸ் வகுப்புடன் வழங்கப்படுகிறது. எடுத்துக்காட்டாக, <Button> இவ்வாறு வழங்கப்படுகிறது <button class="button">. விரும்பியபடி பாணியிடுங்கள்:

.button {
  background: var(--my-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}
.button:hover { background: var(--my-primary-hover); }

Lily இன் இயல்புநிலை வண்ணத் தட்டு (எடுத்துக்காட்டு பயன்பாடுகளில் பயன்படுத்தப்படுவது):

• முதன்மை: #2563eb
• ஆபத்து: #dc2626
• எச்சரிக்கை: #f59e0b
• வெற்றி: #16a34a
• பக்க பின்னணி: #f9fafb
• அட்டை பின்னணி: #ffffff

இவை பரிந்துரைகள், தேவைகள் அல்ல. உங்கள் சொந்த பிராண்ட் தட்டால் மாற்றுங்கள், Lily மகிழ்ச்சியுடன் உடன் வரும்.

தயார் தீம்கள்

CSS ஐ பூஜ்ஜியத்திலிருந்து எழுத விரும்பவில்லையா? Lily வழங்குகிறது 57 தனித்த குறிப்புத் தீம்களை இந்தக் கோப்பகத்தில் themes/ . ஒவ்வொன்றும் Lily வகுப்பு கொக்கிகளை இலக்கு வைக்கும் ஒரு ஸ்டைல்ஷீட் — இணையுங்கள், பாணி கிடைத்துவிடும்:

<link rel="stylesheet" href="/assets/themes/united-kingdom-government-digital-service.css" />

இத்தொகுப்பு உள்ளடக்குவது:

• பொதுத்துறை — NHS England, NHS Scotland மற்றும் NHS Wales (ஒவ்வொன்றும் நோயாளி-நோக்கு மற்றும் பயிற்சியாளர்-நோக்கு வடிவங்களில்), GOV.UK GDS, மற்றும் U.S. Web Design System.
• விற்பனையாளர்களால் தூண்டப்பட்டவை — Adobe Spectrum, Mozilla Protocol.
• பொது நோக்கம் — light, dark, nord, dracula, wireframe, மற்றும் முப்பது வரை மேலும்.

தீம் தேர்விகள் பயன்படுத்துகின்றன :where(...), அதனால் உங்கள் சொந்த CSS எப்போதும் குறிப்பிட்ட தன்மையில் வெல்லும். இயக்க நேர மாற்றத்துக்கு அவற்றை கீழுள்ள theme-picker உதவியாளருடன் இணையுங்கள், அல்லது பின்பற்றுங்கள் தீமிங் பயிற்சியை.

விருப்ப உதவியாளர்கள்

ஒவ்வொரு கட்டமைப்புக்கும் எட்டு சிறிய தேர்விகள் உள்ளன, ஒவ்வொன்றும் தனக்கே உரிய lily-design-system-{framework}-{package} தொகுப்பு (மற்றும் அவற்றைத் திரட்டும் ஒரு picker-bar ). ஒவ்வொன்றும் பாப்அப் திறக்கும் தலையற்ற ஐகான் பொத்தான் — பட்டியல் பெட்டி, இணைப்புகளின் பட்டியல், தேடல் படிவம், அல்லது (date-time-picker க்கு) தேதி-தேர்வு உரையாடல் — இயல்பான <select>அல்ல; SSR-பாதுகாப்பானது; CSS ஐ வழங்குவதில்லை:

• theme-picker — நிர்வகிக்கப்படும் <link>ஐ மாற்றுவதன் மூலம் இயக்க நேரத்தில் தீம் ஸ்டைல்ஷீட்களை ஏற்றுகிறது, ஆவணத்தில் data-theme அமைக்கிறது, விருப்பப்பட்டால் இதில் நிலைநிறுத்தி வைக்கிறது localStorage.
• locale-picker — அமைக்கிறது lang மற்றும் dir (தானியங்கி RTL கண்டறிதலுடன்) உங்கள் i18n நூலகம் பின்தொடர; தானே எதையும் மொழிபெயர்ப்பதில்லை.
• text-size-picker — அமைக்கிறது data-text-size ஆவணத்தில்; உங்கள் CSS ஒவ்வொரு மதிப்பையும் எழுத்துரு அளவுடன் இணைக்கிறது.
• motion-picker — அமைக்கிறது data-motion ஆவணத்தில், பார்வையாளரின் குறைந்த-இயக்க அமைப்பிலிருந்து தொடங்கி; எதை அடக்குவது என்பதை உங்கள் CSS மற்றும் ஸ்கிரிப்ட்கள் முடிவு செய்கின்றன.
• search-picker — தேடல் புலத்தைத் திறக்கும் ஐகான் பொத்தான்; சமர்ப்பித்தால் தேடல் பக்கத்திற்குச் செல்லும். ஒரு செயலைச் சொந்தமாகக் கொண்டுள்ளது, விருப்பத்தை அல்ல.
• link-picker — உங்கள் பயன்பாடு வரையறுக்கும் பக்க இணைப்புகளின் (முகப்பு, எங்களைப் பற்றி, எங்களைத் தொடர்பு கொள்ள, தனியுரிமைக் கொள்கை, …) மெனுவைத் திறக்கும் வீட்டு ஐகான். ஒரு செயலைச் சொந்தமாகக் கொண்டுள்ளது, விருப்பத்தை அல்ல.
• share-picker — இயல்பான பகிர்வுத் தாள் அல்லது நுகர்வோர் வழங்கிய இலக்குகளின் பட்டியலைத் திறக்கிறது, URL நகலுடன். ஒரு செயலைச் சொந்தமாகக் கொண்டுள்ளது, விருப்பத்தை அல்ல: எதையும் பயன்படுத்தாது, எதையும் நிலைநிறுத்தாது.
• date-time-picker — தேதி, நேரம், அல்லது இரண்டிற்கும் உரைப் புலம் மற்றும் APG தேதி-தேர்வு உரையாடல். ஒரு படிவ மதிப்பைச் சொந்தமாகக் கொண்டுள்ளது, விருப்பத்தை அல்ல: ISO சரம் இதனுடன் முன்னும் பின்னும் மாறுகிறது <input type="date">.

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-theme-picker

Svelte பட்டியல் நியமக் குறிப்பு; React, Vue, Angular, HTML, Nunjucks, Web Components மற்றும் Blazor போர்ட்கள் அதனுடன் ஒப்பந்தத்துக்கு ஒப்பந்தம் பொருந்துகின்றன. பார்க்க உதவியாளர் பயிற்சி.

அணுகல்

கூறுகள் இலக்கு வைப்பது WCAG 2.2 AAA. அவை இந்த வடிவங்களைப் பின்பற்றுகின்றன:

• பொதுவான <div>s.
• <label for="id"> க்கு பதிலாக பொருள்சார் HTML உறுப்புகள், லேபிள்களை உள்ளீடுகளுடன் இணைக்கும்.
• aria-labelledby / aria-describedby குறுக்குக் குறிப்புகளுக்கு.
• aria-invalid + aria-errormessage பிழை நிலைகளுக்கு.
• role="alert" மற்றும் aria-live இயங்குநிலை உள்ளடக்கத்துக்கு.
• aria-pressed, aria-expanded, aria-current நிலைக்கு.
• கட்டங்களுக்கு ரோவிங் tabindex .

குவிப்புக் குறிகாட்டிகள் வேண்டுமென்றே நுகர்வோரால் வழங்கப்படுகின்றன — உங்கள் வடிவமைப்புடன் மோதும் இயல்புநிலை குவிப்பு வளையத்தை Lily ஒருபோதும் வரைவதில்லை. எடுத்துக்காட்டு பயன்பாடுகள் அவற்றின் அனைத்து வழிகளிலும் சுத்தமான axe-core அடிப்படையைப் பராமரிக்கின்றன.

சர்வதேசமயமாக்கல்

ஒவ்வொரு லேபிள், இடஒதுக்கி, பிழைச் செய்தி மற்றும் பொத்தான் உரை ஒரு ப்ராப். நிலையாக எழுதப்பட்ட சரங்கள் இல்லை. உங்கள் விருப்ப மொழிபெயர்ப்புக் கட்டமைப்பைச் சேருங்கள் — Paraglide, i18next, vue-i18n, react-intl, .resx கோப்புகள், எதுவானாலும்.

தேதிகள், எண்கள் மற்றும் நாணயங்களுக்கு, கூறுகள் முன்-வடிவமைக்கப்பட்ட சரங்களை ஏற்கின்றன: நீங்கள் இதனுடன் வடிவமைத்து Intl.DateTimeFormat / Intl.NumberFormat / உங்கள் விருப்ப நூலகம், முடிவை அனுப்புகிறீர்கள்.

locale-picker உதவியாளர் தேர்ந்தெடுத்த மொழிச்சூழலை உங்கள் i18n நூலகத்துக்கு இவ்வாறு அமைத்துத் தெரிவிக்கிறார் lang மற்றும் dir ஆவண மூலத்தில்.

சோதனை

ஒவ்வொரு கட்டமைப்பு துணைத் திட்டமும் அதன் மரபு அடுக்கைப் பயன்படுத்தி தன் சொந்த சோதனைகளை வழங்குகிறது:

• HTML: உண்மையான உலாவிகளை இயக்கும் WebDriverIO.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (Analog Vite செருகுநிரல் வழியாக).
• Nunjucks: வழங்கல் உதவியாளருடன் Vitest.
• Blazor: bUnit.

சோதனைகள் பயன்படுத்துவது Vitest இன் உள்ளமைந்த பொருத்திகளை மட்டும் — ஒருபோதும் இல்லை jest-dom பொருத்திகள். இது சோதனைத் தொகுப்புகளை எடுத்துச்செல்லக்கூடியதாக வைக்கிறது. எடுத்துக்காட்டு பயன்பாடுகள் Playwright முனைக்கு-முனை தொகுப்புகள், axe-core அணுகல் அடிப்படைகள், மற்றும் பதிலளிக்கும் காட்சித்திரை துடைப்பைச் சேர்க்கின்றன.

AI முகவர்கள்

இந்தத் தளம் அதன் மூலத்தில் வெளியிடுகிறது llms.txt மற்றும் llms.json — அதன் மிக முக்கிய பக்கங்களின் தேர்ந்தெடுக்கப்பட்ட வரைபடம், பின்பற்றும் எந்தக் கருவிக்கும் llms.txt மரபை.

நியம மோனோரெப்போ கூடுதலாக இரண்டை வழங்குகிறது Claude Skills: lily-design-system-skill: அமைப்புடன் உருவாக்கும் அனைவருக்கும் Lily இன் கருத்துகள், சொற்களஞ்சியம் மற்றும் கலவை வடிவங்களை உள்ளடக்கும் பொது-நோக்கத் திறன், மற்றும் lily-design-system-maintainer-skill, அதில் வேலை செய்யும் அனைவருக்கும் மோனோரெப்போவின் தேவையான-கோப்பு அமைப்பையும் கருவிகளையும் உள்ளடக்கும் தொழில்நுட்பத் திறன். இரண்டும் இதன் மூலத்தில் உள்ளன நியம மோனோரெப்போ.

சிக்கல் தீர்வு

பங்களிப்பு

Lily இளையது, ஒத்துழைப்பை வரவேற்கிறது. இப்போதைய மிகப் பயனுள்ள பங்களிப்புகள்:

• புதிய கூறுகள் (குறிப்பாக நிலைபெற்ற வடிவமைப்பு அமைப்புகளின் வடிவங்கள்).
• புதிய தீம்கள் — ஒவ்வொன்றும் ஒரு தனித்த ஸ்டைல்ஷீட், நன்கு வரையறுக்கப்பட்ட முதல் PR.
• சிறந்த எடுத்துக்காட்டுப் பாணியிடல் — என்ன சாத்தியம் என்று காட்டுங்கள்.
• எடுத்துக்காட்டு பயன்பாட்டுச் சரங்களின் மொழிபெயர்ப்புகள்.
• குறைந்தபட்ச மறுஉருவாக்கத்துடன் பிழை அறிக்கைகள்.
• திரை வாசிப்பான்கள் மற்றும் உதவித் தொழில்நுட்பத்துடன் அணுகல் தணிக்கைகள்.

இங்கே issues மற்றும் PRs திறக்கவும் github.com/LilyDesignSystem/lily-design-system.

சமூகம் மற்றும் ஆதரவு

• கேள்விகளும் பிழை அறிக்கைகளும் — இங்கே issue திறக்கவும் github.com/LilyDesignSystem/lily-design-system.
• மின்னஞ்சல் — பராமரிப்பாளர் படிக்கிறார் joel@joelparkerhenderson.com மேலும் ஒத்துழைப்பு, வழிகாட்டுதல் மற்றும் கருத்துகளை வரவேற்கிறார்.
• கண்ணாடிகள் — Lily இங்கேயும் தள்ளப்படுகிறது Codeberg மற்றும் GitLab, அதனால் நீங்கள் விரும்பும் ஃபோர்ஜிலிருந்து பங்கேற்கலாம்.
• நடத்தை — திட்டம் ஒரு நிலையான நடத்தை விதிமுறையைப் பின்பற்றுகிறது; அன்பாக இருங்கள், நல்லெண்ணத்தை ஊகியுங்கள்.

FAQ