Lily Design System™

Koyi Lily, mataki-mataki

Barka da zuwa! Kowace koyarwa tana farawa daga sifili kuma tana gina abu ɗaya ƙarami — fom mai sauƙin shiga, mai ado — cikin kusan minti 10, don ka iya kwatanta tsarin aiki daidai da daidai. Sai ka ci gaba zuwa zurfi da jigo da zaɓin mai amfani.

Kafin ka fara

Kana buƙatar kaɗan abin mamaki:

  • Don koyarwar HTML — mai bincike da editan rubutu kawai. Wannan duka akwatin kayan aikin ne.
  • Don Svelte, React, Vue, Angular ko Nunjucks — git, Node 26, da pnpm 10 ko sama.
  • Don Blazor — git da .NET SDK 8 ko sama.

Sabo ne ga abubuwa marasa kai? Kana wurin da ya dace — kowace koyarwa tana bayanin abin da ke faruwa, kuma kowane mataki yana nuna ainihin lambar da za a kwafa.

Matakai huɗu daga sifili zuwa aikawa

  1. Ɓangarenka na farko (~minti 5) — zaɓi tsarin aikinka a ƙasa, ɗauki lambar, kuma nuna Button.
  2. Haɗa kuma yi ado (~minti 5) — gina fom mai lakabi kuma yi masa ado bisa ƙugiyoyin aji na kebab-case (ɓangare na kowace koyarwar tsarin aiki).
  3. Ba shi jigo (~minti 15) — maye gurbin CSS ɗinka da aka rubuta da hannu da ɗaya daga cikin jigogi 57 da aka shirya, sannan ka bar masu amfani su canza lokacin gudu: koyarwar jigo.
  4. Girmama zaɓuka (~minti 15) — ƙara zaɓen harshe da girman rubutu tare da masu taimakon zaɓi: koyarwar masu taimako.

Zaɓi tsarin aikinka

HTML

Kwafi HTML mai ma’ana tare da ƙugiyoyin aji ka tafi — mai bincike da edita sun isa.

~minti 10 · mafi sauƙin farawa

Svelte

Runes na Svelte 5, snippets, da ɗaure mai alƙibla biyu da bind:value .

~minti 10

React

Abubuwan aiki tare da value + onChange da yaɗa sauran kadarori.

~minti 10

Vue

Abubuwan fayil ɗaya na Vue 3 tare da goyon bayan v-model .

~minti 10

Angular

Abubuwan Angular masu zaman kansu tare da shigarwar sigina da [(value)].

~minti 10

Blazor

Abubuwan Razor tare da sigogi, ChildContentda gwajin bUnit.

~minti 10

Nunjucks

Macro da aka nuna a uwar garke don Eleventy da kowane bututun samfuri na Node.

~minti 10

Ka rasa yadda za ka zaɓa? Fara da HTML — yana koyar da yarjejeniyar ƙugiyoyin aji da kowane sauran tsarin aiki ke rabawa, kuma yana gudana kai tsaye daga fayil.

Ci gaba zuwa zurfi

Jigo

Haɗa ɗaya daga cikin jigogi 57 da aka shirya — NHS, GOV.UK, USWDS, haske, duhu, da ƙari — rinjaye shi da CSS ɗinka, kuma ƙara sauya jigo lokacin gudu tare da mai taimakon theme-picker.

~minti 15

Masu taimakon zaɓi

Ba masu amfani iko akan jigo, harshe, girman rubutu, motsi, bincike, hanyoyin shafuka, rabawa, da shigar kwanan wata/lokaci tare da theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker, da date-time-picker: sarrafawa marasa kai tare da dagewa, amincin SSR da gano RTL na atomatik.

~minti 15

Bayan koyarwar

  • Bincika jerin abubuwan — kowane ɓangare yana rubuta kadarorinsa, yarjejeniyar ARIA da halin madannai.
  • Kwafa aikace-aikacen misali don ganin dukkan abubuwa 571 da aka yi wa ado kuma suna aiki tare — CSS yana nufin ƙugiyoyin aji da kuka yi amfani da su yanzu, don haka kwafi kowane ɓangare zuwa aikinka ka daidaita yadda kake so.
  • Tambayoyi? Shafin taimako yana da amsoshi, FAQ, da hanyoyin isa ga mutum mai abokantaka. Idan koyarwa za ta iya zama mafi bayyanawa, gaya mana — za mu inganta ta da farin ciki.