Lily Design System™

Svelte ట్యుటోరియల్

Lily యొక్క Svelte లైబ్రరీ ప్రామాణిక అమలు: Svelte 5 runes, టైప్ చేసిన props, మిగిలిన props వ్యాప్తి, మరియు దీనితో ద్విముఖ బైండింగ్ bind:value.

మీరు ఏమి నిర్మిస్తారు

ఒక చిన్న సంప్రదింపు ఫారమ్ — లేబుల్ ఉన్న ఫీల్డ్, సమర్పించే బటన్, ద్విముఖ బైండింగ్, నిజమైన కీబోర్డ్ మరియు స్క్రీన్-రీడర్ ప్రవర్తన — మొదట ఖాళీగా, తర్వాత శైలీకరించి, సుమారు 10 నిమిషాల్లో.

ప్రారంభించే ముందు

మీకు git, Node 22 లేదా కొత్తది, మరియు pnpm 10 లేదా కొత్తది కావాలి. ఏ Svelte 5 ప్రాజెక్ట్ అయినా పనిచేస్తుంది — సరికొత్త npx sv create యాప్ చాలు.

దశ 1 — కోడ్ పొందండి

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-headless
pnpm install
pnpm test        # vitest — thousands of component cases
pnpm run storybook   # browse all 571 components

కాంపోనెంట్లు ఇక్కడ ఉంటాయి: src/lib/components/{Name}/, ప్రతి కాంపోనెంట్‌కు ఒక డైరెక్టరీ, దానిలో .svelte ఫైల్, దాని పరీక్షలు, story లు మరియు డాక్యుమెంటేషన్ పక్కపక్కనే. మీకు కావలసిన డైరెక్టరీలను మీ యాప్‌లోకి కాపీ చేయండి, లేదా రిపోపై ఆధారపడి నేరుగా దిగుమతి చేసుకోండి.

దశ 2 — మీ మొదటి కాంపోనెంట్

<script>
  import Button from "#lib/components/Button/Button.svelte";

  function save() { console.log("saved"); }
</script>

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

ఇది చూపిస్తుంది <button class="button" type="button">. Props టైప్ చేయబడ్డాయి: type, disabled, pressed (చూపిస్తుంది aria-pressed (చూపిస్తుంది label (ఒక aria-label టోగుల్ బటన్ల కోసం),

దశ 3 — ఒక చిన్న ఫారమ్‌ను కూర్చండి

<script>
  import Form from "#lib/components/Form/Form.svelte";
  import Field from "#lib/components/Field/Field.svelte";
  import TextInput from "#lib/components/TextInput/TextInput.svelte";
  import Button from "#lib/components/Button/Button.svelte";

  let name = $state("");
</script>

<Form label="Contact form" onsubmit={handleSubmit}>
  <Field label="Full name" required>
    <TextInput id="name" label="Full name" bind:value={name} required />
  </Field>
  <Button type="submit">Save</Button>
</Form>

Field కనిపించే label దాని స్వంత prop గా, లోపల ఉంచిన లేబుల్ కాంపోనెంట్‌గా కాదు — దాన్ని ఒకసారి ఇవ్వండి, పై Fieldమరియు TextInputయొక్క label అందుబాటులో ఉండే పేరును అందిస్తుంది. TextInput's value ఓవర్‌రైడ్ చేయడానికి), మరియు ఏ అదనపు గుణమైనా మూలంపై వ్యాపిస్తుంది. $bindable ఒక bind:value rune prop, కాబట్టి

2026-08-29న ధృవీకరించబడింది: మీకు వెంటనే ద్విముఖ బైండింగ్ ఇస్తుంది. svelte/server సరిగ్గా ఈ స్నిప్పెట్ దీని ద్వారా కంపైల్ చేయబడింది <label for> మరియు ఒకే ఒక, సరిగ్గా అనుసంధానించిన లేబుల్ కోసం తనిఖీ చేయబడింది Label లోపల Field— ముందటి చిత్తుప్రతి ఒక ప్రత్యేక రెండు లేబుళ్లు (ఒకటి ఖాళీ) కనిపించాయి ఎందుకంటే Field ఇప్పటికే తన స్వంతదాన్ని label లోపల ఉంచింది, అది చూపించింది సంయుక్త సంప్రదింపు-ఫారమ్ మార్గం అదే నమూనా, నిజమైన e2e మరియు axe పరీక్షలతో పరీక్షించబడింది.

మీ పనిని తనిఖీ చేయండి: యాప్‌ను నడపండి, ఫారమ్ సాదాగా కనిపిస్తుంది — సరిగ్గా అనుకున్నట్లే: శైలీకరణ ఇంకా ముందుంది. నొక్కండి Tab: ఫోకస్ ప్రతి నియంత్రణ గుండా వెళుతుంది, లేబుల్ ప్రకటించబడుతుంది మరియు సమర్పణ పనిచేస్తుంది. ప్రవర్తన పూర్తయింది; రూపం మీది మరియు తదుపరి దశ.

దశ 4 — శైలీకరించండి

పైన ఉన్నదంతా స్వచ్ఛమైన నిర్మాణంగా రెండర్ అవుతుంది, మీ శైలులకు సిద్ధంగా. క్లాస్ హుక్‌లను శైలీకరించండి — .button, .text-input, .label, .field — మీ గ్లోబల్ స్టైల్‌షీట్‌లో, లేదా సిద్ధమైన థీమ్‌ను ఇక్కడ లింక్ చేయండి app.html: 

<link rel="stylesheet" href="/themes/dark.css" />

ప్రతి ఇన్‌స్టాన్స్‌కు సర్దుబాట్లు దీని ద్వారా వెళతాయి class prop, ఇది ప్రాథమిక హుక్‌కు జోడించబడుతుంది: <Button class="wide"> చూపిస్తుంది class="button wide".

దశ 5 — అంతా పనిచేయడం చూడండి

SvelteKit ఉదాహరణ యాప్ అదే కేటలాగ్ పూర్తిగా శైలీకరించి, ప్రత్యక్ష ప్రదర్శనలు, Playwright e2e పరీక్షలు మరియు axe-core అందుబాటు ఆధారరేఖతో: 

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

తదుపరి దశలు

దారిలో ప్రశ్నలా? సహాయ పేజీ సమాధానాలతో నిండి ఉంది — మరియు ఏదైనా దశను మరింత స్పష్టంగా చేయవచ్చంటే, మాకు చెప్పండి మరియు మేము సంతోషంగా ట్యుటోరియల్‌ను మెరుగుపరుస్తాము.