Lily Design System™

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

అత్యంత సులభమైన ప్రారంభం: Lily యొక్క క్లాస్ హుక్‌లతో అర్థవంతమైన HTML కాపీ చేయండి, ఒక స్టైల్‌షీట్ జోడించండి, ప్రచురించండి. HTML పనిచేసే ప్రతిచోటా పనిచేసే సాదా ఫైళ్లు.

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

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

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

మీకు ఒక బ్రౌజర్ మరియు ఒక టెక్స్ట్ ఎడిటర్ కావాలి. అంతే. (కాంపోనెంట్ ఫైళ్లు పొందడానికి git సహాయపడుతుంది, కానీ బ్రౌజర్‌లో GitHub నుండి కూడా కాపీ చేయవచ్చు.)

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

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

ప్రతి కాంపోనెంట్ ఇక్కడ ఒక స్వతంత్ర ఫైల్: components/ — button.html, text-input.htmlమొదలైనవి — దాని HTML ట్యాగ్, క్లాస్ హుక్, కీబోర్డ్ ప్రవర్తన మరియు అందుబాటు ఒప్పందాన్ని నమోదు చేసే హెడర్ వ్యాఖ్యతో. ఫైళ్లే ఆ లైబ్రరీ — మీకు కావలసింది కాపీ చేసి ముందుకు సాగండి.

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

తెరవండి components/button.html, లేదా కేవలం మార్కప్ రాయండి — క్లాస్ హుక్కే ఒప్పందం:

<button class="button" type="button">
  Save
</button>

ఇది నిజమైన <button>కాబట్టి, కీబోర్డ్ ఫోకస్, Enter మరియు Space తో క్రియాశీలం చేయడం, మరియు అంతర్లీన బటన్ పాత్ర ఇప్పటికే సరిగ్గా ఉన్నాయి.

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

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" name="email" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

నమూనాను గమనించండి: ప్రతి నియంత్రణ తన <label for>ను అనుసంధానిస్తుంది, అత్యంత నిర్దిష్టమైన input రకాన్ని ఉపయోగిస్తుంది మరియు సరిగ్గా ఒక kebab-case క్లాస్ హుక్ కలిగి ఉంటుంది.

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

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

హుక్‌లకు వ్యతిరేకంగా CSS రాయండి:

.button {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
}
.text-input,
.email-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

లేదా చేతితో CSS రాయడాన్ని పూర్తిగా వదిలేయండి — 45 సిద్ధమైన థీమ్‌లలో ఒకదాన్ని లింక్ చేయండి, అదే మార్కప్ వెలుగుతుంది: 

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

దశ 5 — మరింత అన్వేషించండి

  • రిపో పరీక్షలు నిజమైన బ్రౌజర్లలో నడుస్తాయి: pnpm install && pnpm test (WebDriverIO).
  • ప్రతి కాంపోనెంట్ కోసం Storybook: pnpm run storybook.
  • HTML+CSS+JS ఉదాహరణ యాప్ మొత్తం 571 కాంపోనెంట్లను శైలీకరించి, వెతకగలిగేలా, ప్రదర్శనతో చూపిస్తుంది.

తదుపరి దశలు

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