Cuideachaidhean roghainnean

Na thogas tu

Panal roghainnean far an tagh cleachdaichean an cànan agus meud teacsa — roghainnean a tha an sàs air an sgrìobhainn gu lèir, a mhaireas eadar tadhalan agus nach cosg ach dà cho-phàirt is beagan loidhnichean CSS. Timcheall air 15 mionaidean.

Mus tòisich thu

Cuir crìoch air an oideachadh frèam airson do stac. Tha na sampaill gu h-ìosal ann an Svelte; tha cuideachaidhean React, Vue, Angular, HTML, Nunjucks agus Blazor a’ freagairt cùmhnant air chùmhnant.

An cumadh a tha iad a’ roinn

• Putan-ìomhaigh gun cheann a dh’fhosglas bogsa-liosta WAI-ARIA APG (no, airson date-time-picker, còmhradh roghnaiche-cinn-latha) — gun dùthchasach <select>, gus am faigh gach frèam an aon ghiùlan clàr-iuchrach is crochaidhean stoidhle.
• Aon chrochadh clas airson gach pasgan (.locale-picker, .text-size-picker, .share-picker, .date-time-picker), gun CSS air a lìbhrigeadh.
• Sàbhailte do SSR: bidh sgrìobhaidhean DOM a’ tachairt a-mhàin ann an cuairt-beatha mount/effect.
• Glan do i18n: tha gach sreang a chì cleachdaiche na prop.
• Ri fhaighinn airson Svelte (canonta), React, Vue, Angular, eileamaid ghnàthaichte HTML, Nunjucks agus Blazor — an aon chùmhnant anns gach fear.

Tha theme-picker, locale-picker agus text-size-picker gach fear a’ gabhail seilbh air aon roghainn cleachdaiche bho thoiseach gu deireadh (taghadh, cur an sàs air an DOM, a bharrachd localStorage seasmhachd tro storageKey prop). Tha share-picker agus date-time-picker eadar-dhealaichte ann an gnè: tha share-picker a’ gabhail seilbh air gnìomh — chan eil e a’ cur dad an sàs air an sgrìobhainn agus chan eil e a’ cumail dad — agus tha date-time-picker a’ gabhail seilbh air luach foirm, oir is e dàta a th’ ann an ceann-latha ann am foirm seach roghainn.

locale-picker — cànan is stiùireadh

Leigidh e leis a’ chleachdaiche locale a thaghadh, agus an uairsin sgrìobhaidh e lang agus dir gu freumh an sgrìobhainn gus an lean an leabharlann i18n agad, do CSS agus teicneòlas taiceil. Tha RTL air a lorg gu fèin-obrachail airson Arabais, Eabhra agus sgrìobhadh eile deas-gu-clì. Cuiridh e fòcas dìreach air comharrachadh — làimhsichidh an leabharlann i18n agad an t-eadar-theangachadh.

<script>
  import LocalePicker from "@lilydesignsystem/svelte-locale-picker";

  let locale = $state("en-US");
</script>

<LocalePicker
  label="Language"
  locales={["en-US", "fr", "ar", "he", "ja"]}
  bind:value={locale}
  storageKey="my-app-locale"
/>

Tha na roghainnean air an leubailean à clàr togte a-staigh de dh’ainmean locale (ri tar-sgrìobhadh tro localeLabels), tha an lang buadh fhèin aig gach roghainn gus an can leughadairean-sgrìn “Français” sa Fhraingis, agus bidh còdan le fo-loidhne leithid en_US a’ dol air turas-chuairt gun chall gu BCP 47 en-US. Ceangail onChange (no an luach ceangailte) ri i18next, Paraglide, vue-i18n no rud sam bith eile a chleachdas tu.

text-size-picker — meud fo smachd an leughadair

Buannachd so-ruigsinneachd a bheir mionaidean: bidh an cuideachadh a’ suidheachadh data-text-size="{slug}" air freumh an sgrìobhainn agus bidh do CSS a’ mapadh gach luach gu meud.

<script>
  import TextSizePicker from "@lilydesignsystem/svelte-text-size-picker";
</script>

<TextSizePicker
  label="Text size"
  sizes={["small", "medium", "large", "x-large"]}
  storageKey="my-app-text-size"
/>

:root[data-text-size="small"]   { font-size: 87.5%; }
:root[data-text-size="medium"]  { font-size: 100%; }
:root[data-text-size="large"]   { font-size: 112.5%; }
:root[data-text-size="x-large"] { font-size: 125%; }

Meudaich do chruth-dhealbh ann an rem agus bidh an tagradh gu lèir a’ sgèileadh le roghainn a’ chleachdaiche. Tha na leubailean air an dèanamh le litir mhòr bho na slugs (“X Large”) no air an tar-sgrìobhadh le sizeLabels.

share-picker — cuir an duilleag seo

Putan aon-ghlyph a dh’fhosglas duilleag co-roinn dhùthchasach an uidheim far a bheil fear ann, agus mur eil, a thuiteas air ais air liosta de cheann-uidhean a sholaraicheas tu, a bharrachd air gnìomh lethbhreac-an-URL. Chan eil URLaichean lìonraidhean sòisealta ann — ’s e do cho-dhùnadh-sa a th’ ann dè na lìonraidhean a bhuineas don toradh agad, chan e co-dhùnadh an t-siostaim dealbhaidh.

<script>
  import SharePicker from "@lilydesignsystem/svelte-share-picker";

  const targets = [
    { id: "mastodon", label: "Mastodon",
      href: (url, title) => `https://mastodon.social/share?text=${encodeURIComponent(title)}%20${encodeURIComponent(url)}` },
    { id: "email", label: "Email",
      href: (url, title) => `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(url)}`, newTab: false },
  ];
</script>

<SharePicker
  label="Share this page"
  title="An article worth reading"
  {targets}
  copyLabel="Copy link"
  copiedLabel="Link copied"
/>

url bunaiteach air location.href, agus mar sin chan eil feum air uèirleadh sa chùis àbhaisteach. Èignich slighe le strategy="list" no strategy="native" nuair a tha feum air giùlan cunbhalach thar àrd-ùrlaran airson deuchainnean no glacaidhean-sgrìn.

date-time-picker — ceann-latha, àm, no an dà chuid

Raon teacsa as urrainn dhut sgrìobhadh a-steach, a bharrachd air putan ìomhaigh a dh’fhosglas còmhradh roghnaiche-cinn-latha WAI-ARIA APG. Ceart a thaobh locale le dealbhadh — ainmean mhìosan, ainmean làithean na seachdain, a’ chiad latha dhen t-seachdain, agus cloc 12 no 24 uair, uile a’ tighinn bho Intl — agus tha an luach an-còmhnaidh na shreang ISO a ghabhas rèiteachadh, gun sòn-ama: "2026-03-15" airson mode="date", "09:30" airson mode="time", "2026-03-15T09:30" airson mode="datetime".

<script>
  import DateTimePicker from "@lilydesignsystem/svelte-date-time-picker";

  let appointment = $state("");
</script>

<DateTimePicker
  inputId="appointment"
  name="appointment"
  label="Choose an appointment date"
  locale="en-GB"
  bind:value={appointment}
  labels={{
    previousYear: "Previous year",
    previousMonth: "Previous month",
    nextMonth: "Next month",
    nextYear: "Next year",
    confirm: "OK",
    cancel: "Cancel",
  }}
/>

Tha an luach ISO co-ionnan ris na phostas <input type="date"> , agus mar sin faodaidh tu an smachd dùthchasach a thoirt a-steach no a-mach gun beantainn ris a’ chùl-cheann agad.

motion-picker — thoir urram do ghluasad lùghdaichte

Bidh an cuideachadh a’ suidheachadh data-motion="{slug}" air freumh an sgrìobhainn. Tha a’ chiad luach aige a’ tighinn bho shuidheachadh siostam-obrachaidh an neach-tadhail prefers-reduced-motion — an-còmhnaidh, gun bhratach ro-ghlacaidh, oir tha gluasad na fhìor fheum so-ruigsinneachd (WCAG 2.3.3). Co-dhùnaidh do CSS is sgriobtaichean dè a thèid a chur dheth.

<script>
  import MotionPicker from "@lilydesignsystem/svelte-motion-picker";
</script>

<MotionPicker
  label="Motion"
  motions={["no-preference", "reduce"]}
  storageKey="my-app-motion"
/>

:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

search-picker — bogsa luirg a fhanas a-mach às an rathad

Putan ìomhaigh a dh’fhosglas raon luirg. Le bhith a’ brùthadh Return, no am putan ⏎ ri taobh an raoin, seòlaidh e le iarrtas GET sìmplidh gu /?<text> (an teacsa air a thrimeadh is air a chòdachadh URI; chan fhalbh ceist fhalamh gu àite sam bith). Tha feum air a thrì ainmean so-ruigsinneach, oir chan eil an cuideachadh a’ lìbhrigeadh Beurla.

<script>
  import SearchPicker from "@lilydesignsystem/svelte-search-picker";
  import { goto } from "$app/navigation";
</script>

<SearchPicker
  label="Search this site"
  inputLabel="Search terms"
  submitLabel="Search"
  placeholder="Search…"
  action="/search"
  navigate={(href) => goto(href)}
/>

action ag atharrachadh na slighe (/search?foo), agus navigate a’ cumail an t-seòlaidh san tagradh; às aonais, bidh an cuideachadh a’ gairm location.assign.

picker-bar — an t-sreath-cinn gu lèir aig an aon àm

picker-bar a’ reandaradh lorg, ùrlar, locale, meud teacsa agus co-roinn ann an aon sreath, leis an t-seata slàn de dh’ùrlaran-tùsais agus sgèile teacsa seachd-ceumannach ro-uèirichte. Tha gach ainm so-ruigsinneach a’ tighinn ann an aon labels nì riatanach.

<script>
  import PickerBar from "@lilydesignsystem/svelte-picker-bar";
</script>

<PickerBar
  labels={{
    search: "Search", searchInput: "Search terms", searchSubmit: "Search",
    theme: "Theme", locale: "Language", textSize: "Text size", share: "Share",
  }}
  themesUrl="/themes/"
  locales={["en", "fr", "es"]}
  shareTargets={targets}
/>

Ruig roghnaiche sam bith cuartaichte le searchProps, themeProps, localeProps, textSizeProps agus shareProps.

Tha tooltips togte a-staigh

Bidh gach roghnaiche a’ sealltainn a leubail ann an tooltip nuair a laigheas am putan-sràide air a phutan no nuair a tha fòcas clàr-iuchrach air a’ phutan. Fanaidh an tooltip nuair a ghluaiseas am putan-sràide air, bidh Escape ga sguabadh air falbh ge bith càite a bheil am fòcas, agus cha nochd e a-chaoidh fhad ’s a tha priob-uinneag an roghnaiche fosgailte. Tha an aon teacsa ann ri ainm so-ruigsinneach a’ phutain, agus mar sin chan eil dad ri rèiteachadh no ri eadar-theangachadh dà uair; bidh na h-ùrlaran-tùsais a’ cur stoidhle air.

Panal roghainnean na aon àite

Bidh na ceithir cuideachaidhean roghainnean a’ co-chur gu nàdarra:

<fieldset class="fieldset">
  <legend>Preferences</legend>
  <ThemePicker    label="Theme"     themesUrl="/themes/" themes={themes} storageKey="pref-theme" />
  <LocalePicker   label="Language"  locales={locales}    storageKey="pref-locale" />
  <TextSizePicker label="Text size" sizes={sizes}        storageKey="pref-text-size" />
  <MotionPicker   label="Motion"    motions={motions}    storageKey="pref-motion" />
</fieldset>

Càite am faigh thu iad

# one directory per package in the monorepo, e.g.
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-theme-picker
# or lily-design-system-react-theme-picker, -vue- / -angular- / -html- / -web-components- / -nunjucks- / -blazor-

Tha spec, deuchainnean air am mapadh gu clàsan an spec, eisimpleirean a ghabhas ruith (a’ gabhail a-steach pàtranan cookie SSR), agus loidhne togail + foillseachaidh aig gach pasgan. Tha na pasganan Svelte canonta; ma tha teagamh ann, buannaichidh na cùmhnantan aca.

Na ceumannan a leanas

• Catalog cho-phàirtean — an tùs-iùl slàn de na 571 co-phàirt.
• Cuideachadh — fuasgladh dhuilgheadasan is ceistean cumanta.
• Carson Lily — agus ciamar a chuireas tu taic ris a’ phròiseact.

Ceistean air an t-slighe? Tha an duilleag chuideachaidh làn fhreagairtean — agus nam b’ urrainn ceum a bhith nas soilleire, innis dhuinn agus nì sinn an t-oideachadh nas fheàrr le toileachas.