Svelte ટ્યુટોરિયલ

તમે શું બનાવશો

એક નાનું સંપર્ક ફોર્મ — લેબલ સાથેનું ક્ષેત્ર, સબમિટ બટન, બે-તરફી બાઇન્ડિંગ, સાચું કીબોર્ડ અને સ્ક્રીન-રીડર વર્તન — પહેલાં સાદું, પછી શૈલીબદ્ધ, લગભગ 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 છે, તેથી

પગલું 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

આગળનાં પગલાં

• થીમ — Svelte theme-picker સહાયક સાથે ચાલતી વખતે બદલવું.
• પસંદગી સહાયકો — ભાષા અને લખાણનું કદ.
• ઘટક કેટલોગ — દરેક ઘટક માટે ગુણધર્મો, ARIA અને કીબોર્ડ.

રસ્તામાં પ્રશ્નો છે? મદદ પૃષ્ઠ જવાબોથી ભરેલું છે — અને જો કોઈ પગલું વધુ સ્પષ્ટ થઈ શકે, અમને કહો અને અમે ખુશીથી ટ્યુટોરિયલ સુધારીશું.