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 ક્લાસ હૂક ધરાવે છે.

પગલું 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 ઘટકો શૈલીબદ્ધ, શોધી શકાય તેવા અને નિદર્શન સાથે દર્શાવે છે.

આગળનાં પગલાં

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

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