Lily Design System™

React ಟ್ಯುಟೋರಿಯಲ್

ಟೈಪ್ ಮಾಡಿದ ಫಂಕ್ಷನ್ ಘಟಕಗಳು, ತಲಾ ಒಂದು ಫೈಲ್, ಪ್ರಮಾಣಿತ ಮಾದರಿಯೊಂದಿಗೆ ನಿಯಂತ್ರಿತ value + onChange — ಎಲ್ಲವೂ React ಈಗಾಗಲೇ ಕೆಲಸ ಮಾಡುವ ರೀತಿಯಲ್ಲೇ ಕೆಲಸ ಮಾಡುತ್ತದೆ.

ನೀವು ಏನನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ

ಒಂದು ಸಣ್ಣ ಸಂಪರ್ಕ ಫಾರ್ಮ್ — ಲೇಬಲ್ ಇರುವ ಇನ್‌ಪುಟ್, ಸಲ್ಲಿಸು ಬಟನ್, ನಿಯಂತ್ರಿತ ಸ್ಥಿತಿ, ನಿಜವಾದ ಕೀಬೋರ್ಡ್ ಮತ್ತು ಸ್ಕ್ರೀನ್-ರೀಡರ್ ವರ್ತನೆ — ಮೊದಲು ಬೆತ್ತಲೆ, ನಂತರ ಶೈಲೀಕೃತ, ಸುಮಾರು 10 ನಿಮಿಷಗಳಲ್ಲಿ.

ಆರಂಭಿಸುವ ಮೊದಲು

ನಿಮಗೆ git, Node 22 ಅಥವಾ ನಂತರದ್ದು, ಮತ್ತು pnpm 10 ಅಥವಾ ನಂತರದ್ದು ಬೇಕು. ಯಾವುದೇ React 18+ ಯೋಜನೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ — Next.js, Vite, ಅಥವಾ ಸರಳ React.

ಹಂತ 1 — ಕೋಡ್ ಪಡೆಯಿರಿ

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-headless
pnpm install
pnpm test        # vitest + @testing-library/react
pnpm run storybook   # browse all 571 components

ಘಟಕಗಳು ಇಲ್ಲಿ ಸಮತಟ್ಟಾದ ಫೈಲ್‌ಗಳಾಗಿವೆ components/ — Button.tsx, TextInput.tsx — ಪ್ರತಿಯೊಂದರ ಪಕ್ಕದಲ್ಲಿ ಅದರ ಪರೀಕ್ಷೆ, story ಮತ್ತು ದಾಖಲೆಗಳು. ನಿಮಗೆ ಬೇಕಾದ ಫೈಲ್‌ಗಳನ್ನು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ನಕಲಿಸಿ, ಅಥವಾ ರೆಪೊವನ್ನು ವೆಂಡರ್ ಮಾಡಿ ಮತ್ತು ಅದರಿಂದ ಆಮದು ಮಾಡಿ.

ಹಂತ 2 — ನಿಮ್ಮ ಮೊದಲ ಘಟಕ

import Button from "lily-design-system-react-headless/components/Button";

export function SaveBar() {
  return <Button onClick={save}>Save</Button>;
}

ರೆಂಡರ್ ಮಾಡುತ್ತದೆ <button class="button" type="button">. ಪ್ರಾಪ್‌ಗಳು: type, disabled, pressed (ರೆಂಡರ್ ಮಾಡುತ್ತದೆ aria-pressed), label (ಒಂದು aria-label ಅತಿಕ್ರಮಣ), className, ಮತ್ತು ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಆಟ್ರಿಬ್ಯೂಟ್ ರೂಟ್ ಎಲಿಮೆಂಟ್‌ಗೆ ಹರಡುತ್ತದೆ.

ಹಂತ 3 — ಸಣ್ಣ ಫಾರ್ಮ್ ಸಂಯೋಜಿಸಿ

import { useState } from "react";
import Form from ".../components/Form";
import Field from ".../components/Field";
import TextInput from ".../components/TextInput";
import Button from ".../components/Button";

export function ContactForm() {
  const [name, setName] = useState("");
  return (
    <Form label="Contact form" onSubmit={handleSubmit}>
      <Field label="Full name" required>
        <TextInput id="name" label="Full name" value={name} onChange={setName} required />
      </Field>
      <Button type="submit">Save</Button>
    </Form>
  );
}

Field ಗೋಚರ label ತನ್ನದೇ ಪ್ರಾಪ್ ಆಗಿ, ನೆಸ್ಟ್ ಮಾಡಿದ ಲೇಬಲ್ ಘಟಕವಾಗಿ ಅಲ್ಲ — ಅದನ್ನು ಒಮ್ಮೆ ಕೊಡಿ, Field, ಮತ್ತು TextInputನಲ್ಲಿ label ಪ್ರವೇಶಿಸಬಹುದಾದ ಹೆಸರನ್ನು ಒದಗಿಸುತ್ತದೆ.

2026-08-29 ರಂದು ಪರಿಶೀಲಿಸಲಾಗಿದೆ: ಹಿಂದಿನ ಕರಡು ಪ್ರತ್ಯೇಕ Label ಒಳಗೆ Fieldಒಳಗೆ ನೆಸ್ಟ್ ಮಾಡಿತ್ತು, ಇದು ಎರಡು ಲೇಬಲ್‌ಗಳನ್ನು (ಒಂದು ಖಾಲಿ) ರೆಂಡರ್ ಮಾಡಿತು ಏಕೆಂದರೆ Field ಈಗಾಗಲೇ label ಪ್ರಾಪ್ — ನಿಖರ ತುಣುಕನ್ನು ಕಂಪೈಲ್ ಮಾಡಿ ಪತ್ತೆಹಚ್ಚಲಾಯಿತು. ಸಂಯೋಜಿತ ಸಂಪರ್ಕ-ಫಾರ್ಮ್ ಮಾರ್ಗ ಅದೇ ಮಾದರಿ, ನಿಜವಾದ e2e ಮತ್ತು axe ಪರೀಕ್ಷೆಗಳಿಂದ ಬಳಸಲ್ಪಟ್ಟಿದೆ.

ಹಂತ 4 — ಶೈಲೀಕರಿಸಿ

ಮೇಲಿನ ಎಲ್ಲವೂ ಶುದ್ಧ ರಚನೆಯಾಗಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ, ನಿಮ್ಮ ಶೈಲಿಗಳಿಗೆ ಸಿದ್ಧ. ಹುಕ್‌ಗಳನ್ನು ಶೈಲೀಕರಿಸಿ — .button, .text-input, .label, .field — ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ, ಇದರ ಮೂಲಕ Tailwind ಯುಟಿಲಿಟಿಗಳನ್ನು ಪದರ ಮಾಡಿ className, ಅಥವಾ ಸಿದ್ಧ ಥೀಮ್ ಲಿಂಕ್ ಮಾಡಿ: 

<link rel="stylesheet" href="/themes/united-states-web-design-system.css" />

ಹಂತ 5 — ಎಲ್ಲವೂ ಕೆಲಸ ಮಾಡುವುದನ್ನು ನೋಡಿ

Next.js ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್ Playwright e2e ಮತ್ತು axe-core ಮೂಲರೇಖೆಯೊಂದಿಗೆ ಶೈಲೀಕೃತ ಮತ್ತು ಪ್ರದರ್ಶಿತ ಪೂರ್ಣ ಕ್ಯಾಟಲಾಗ್: 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-next-examples
pnpm install && pnpm run dev

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

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