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>ಅನ್ನು ಲಿಂಕ್ ಮಾಡುತ್ತದೆ, ಅತ್ಯಂತ ನಿರ್ದಿಷ್ಟ ಇನ್‌ಪುಟ್ ಪ್ರಕಾರವನ್ನು ಬಳಸುತ್ತದೆ ಮತ್ತು ನಿಖರವಾಗಿ ಒಂದು 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 ಘಟಕಗಳನ್ನು ಶೈಲೀಕೃತ, ಹುಡುಕಬಹುದಾದ ಮತ್ತು ಪ್ರದರ್ಶಿತವಾಗಿ ತೋರಿಸುತ್ತದೆ.

ಮುಂದಿನ ಹಂತಗಳು

ದಾರಿಯಲ್ಲಿ ಪ್ರಶ್ನೆಗಳಿವೆಯೇ? ಸಹಾಯ ಪುಟ ಉತ್ತರಗಳಿಂದ ತುಂಬಿದೆ — ಮತ್ತು ಯಾವುದೇ ಹಂತ ಸ್ಪಷ್ಟವಾಗಬಹುದಾದರೆ, ನಮಗೆ ತಿಳಿಸಿ ಮತ್ತು ನಾವು ಸಂತೋಷದಿಂದ ಟ್ಯುಟೋರಿಯಲ್ ಸುಧಾರಿಸುತ್ತೇವೆ.