Lily Design System™

Tiwtorial React

Cydrannau ffwythiant teipiedig, un ffeil yr un, wedi'u rheoli gyda'r patrwm safonol value + onChange — mae popeth yn gweithio fel y mae React eisoes yn gweithio.

Beth fyddwch chi'n ei adeiladu

Ffurflen gyswllt fach — maes â label, botwm cyflwyno, cyflwr rheoledig, ymddygiad bysellfwrdd a darllenydd sgrin go iawn — yn noeth yn gyntaf, yna wedi'i steilio, mewn tua 10 munud.

Cyn i chi ddechrau

Mae arnoch angen git, Node 22 neu'n hwyrach, a pnpm 10 neu'n hwyrach. Mae unrhyw brosiect React 18+ yn gweithio — Next.js, Vite neu React syml.

Cam 1 — Cael y cod

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

Ffeiliau gwastad yw'r cydrannau yn components/ — Button.tsx, TextInput.tsx — pob un â'i brawf, ei story a'i ddogfennaeth wrth ei ochr. Copïwch y ffeiliau sydd eu hangen arnoch i'ch ap, neu tynnwch y gadwrfa i mewn a mewnforio ohoni.

Cam 2 — Eich cydran gyntaf

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

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

Yn dangos <button class="button" type="button">. Props: type, disabled, pressed (yn dangos aria-pressed), label ( aria-label i'w ddiystyru), className, ac mae unrhyw briodoledd ychwanegol yn lledaenu ar yr elfen wraidd.

Cam 3 — Cyfansoddi ffurflen fach

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 yn cymryd y label fel ei prop ei hun yn lle cydran label nythedig — pasiwch ef unwaith, ar Fielda TextInputcyfatebol o label yn darparu'r enw hygyrch.

Gwiriwyd 2026-08-29: roedd drafft cynharach yn nythu cydran Label y tu mewn i Field, a oedd yn dangos dau label (un yn wag) oherwydd bod Field eisoes yn dangos ei un ei hun o'r mewnbwn label prop — darganfuwyd drwy lunio'r darn yn union. Y llwybr Y llwybr ffurflen gyswllt cyfansawdd yw'r un patrwm, wedi'i brofi gyda phrofion e2e ac axe go iawn.

Cam 4 — Ei steilio

Mae popeth uchod yn rendro fel strwythur pur, yn barod ar gyfer eich arddulliau. Steiliwch y bachau — .button, .text-input, .label, .field — yn eich taflen arddull, haenwch gyfleustodau Tailwind drwy className, neu cysylltwch thema barod: 

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

Cam 5 — Ei weld yn gweithio i gyd

Ap enghreifftiol Next.js yw'r catalog llawn wedi'i steilio a'i ddangos, gyda Playwright e2e a llinell sylfaen 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

Y camau nesaf

Cwestiynau ar y ffordd? Mae'r dudalen gymorth yn llawn atebion — ac os gellid gwneud cam yn gliriach, dywedwch wrthym a byddwn yn falch o wella'r tiwtorial.