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 ਕੰਪੋਨੈਂਟ ਸਟਾਈਲ ਕੀਤੇ, ਖੋਜਣਯੋਗ ਅਤੇ ਡੈਮੋ ਸਮੇਤ ਦਿਖਾਉਂਦੀ ਹੈ।

ਅਗਲੇ ਕਦਮ

ਥੀਮ — theme-picker ਨਾਲ ਚੱਲਦੇ ਸਮੇਂ ਥੀਮ ਬਦਲਣਾ।
ਤਰਜੀਹ ਸਹਾਇਕ — ਭਾਸ਼ਾ ਅਤੇ ਲਿਖਤ ਦਾ ਆਕਾਰ।
ਕੰਪੋਨੈਂਟ ਕੈਟਾਲਾਗ — ਪੂਰਾ ਹਵਾਲਾ।

ਰਾਹ ਵਿੱਚ ਸਵਾਲ ਹਨ? ਮਦਦ ਪੰਨਾ ਜਵਾਬਾਂ ਨਾਲ ਭਰਿਆ ਹੈ — ਅਤੇ ਜੇ ਕੋਈ ਕਦਮ ਹੋਰ ਸਾਫ਼ ਹੋ ਸਕਦਾ ਹੈ, ਸਾਨੂੰ ਦੱਸੋ ਅਤੇ ਅਸੀਂ ਖ਼ੁਸ਼ੀ ਨਾਲ ਟਿਊਟੋਰਿਅਲ ਸੁਧਾਰਾਂਗੇ।