Cúntóirí sainroghanna

An rud a thógfaidh tú

Painéal socruithe ina roghnaíonn úsáideoirí a dteanga agus a méid téacs — roghanna a bhaineann leis an doiciméad ar fad, a mhaireann idir cuairteanna agus a chosnaíonn dhá chomhpháirt agus cúpla líne CSS ort. Thart ar 15 nóiméad.

Sula dtosaíonn tú

Críochnaigh an teagasc creata le haghaidh do chruach ar dtús. Tá na samplaí thíos i Svelte; tá cúntóirí React, Vue, Angular, HTML, Nunjucks agus Blazor ag teacht leo conradh i ndiaidh conartha.

An cruth a roinneann siad

• Cnaipe deilbhín gan cheann a osclaíonn listbox WAI-ARIA APG (nó, i gcás date-time-picker, dialóg roghnóra dáta) — gan <select>dúchasach, ionas go bhfaigheann gach creat an iompar méarchláir agus na crúcaí stíle céanna.
• Crúca aicme amháin in aghaidh an phacáiste (.locale-picker, .text-size-picker, .share-picker, .date-time-picker), nialas CSS seolta.
• Sábháilte do SSR: tarlaíonn scríbhinní DOM sa timthriall saoil mount/effect amháin.
• Glan do i18n: is prop gach teaghrán a fheiceann an t-úsáideoir.
• Ar fáil do Svelte (canónach), React, Vue, Angular, eilimint saincheaptha HTML, Nunjucks agus Blazor — an conradh céanna i ngach ceann.

Tá úinéireacht ag theme-picker, locale-picker agus text-size-picker gach ceann ar shainroghan úsáideora amháin ó thús go deireadh (roghnú, cur i bhfeidhm ar an DOM, localStorage marthanacht roghnach tríd an prop storageKey ). Tá share-picker agus date-time-picker difriúil ó thaobh cineáil de: tá úinéireacht ag share-picker ar ghníomh — ní chuireann sé aon rud i bhfeidhm ar an doiciméad agus ní choinníonn sé aon rud — agus tá úinéireacht ag date-time-picker ar luach foirme, mar is sonraí é dáta i bhfoirm, ní sainroghan.

locale-picker — teanga agus treo

Ligeann sé don úsáideoir logchaighdeán a roghnú, ansin scríobhann sé lang agus dir ar fhréamh an doiciméid ionas go leanfaidh do leabharlann i18n, do CSS agus teicneolaíochtaí cúnta ar fad é. Braitear RTL go huathoibríoch don Araibis, don Eabhrais agus do scripteanna eile ón taobh dheas go clé. Díríonn sé ar chomharthaíocht amháin — láimhseálann do leabharlann i18n an t-aistriúchán.

<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"
/>

Lipéadaítear na roghanna ó tábla ionsuite d'ainmneacha logchaighdeán (inshárú tríd an localeLabels), iompraíonn gach rogha a aitreabúid féin lang ionas go bhfuaimníonn léitheoirí scáileáin "Français" i bhFraincis, agus aistrítear cóid le tanaíocht mar en_US go BCP 47 agus ar ais gan caillteanas en-US. Ceangail onChange (nó an luach ceangailte) le i18next, Paraglide, vue-i18n nó cibé rud a úsáideann tú.

text-size-picker — méid arna rialú ag an léitheoir

Bua inrochtaineachta a thógann nóiméid: socraíonn an cúntóir data-text-size="{slug}" ar fhréamh an doiciméid agus mapálann do CSS gach luach ar mhéid.

<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%; }

Méadaigh do leagan amach i rem agus scálaíonn an app ar fad le rogha an úsáideora. Foirmítear lipéid ó na slugs le ceannlitir ("X Large") nó sáraítear iad leis an sizeLabels.

share-picker — seol an leathanach seo

Cnaipe aon-ghlife a osclaíonn bileog roinnte dhúchasach an ghléis nuair atá ceann ann, agus ar shlí eile titeann sé ar ais ar liosta ceann scríbe a sholáthraíonn tú, móide gníomh cóipeála an URL. Ní sheolann sé aon URLanna líonraí sóisialta — is é do chinneadh féin é cé acu líonraí a bhaineann le do tháirge, ní cinneadh an chórais dearaidh.

<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 is é location.hrefan réamhshocrú, mar sin ní theastaíonn aon sreangú sa ghnáthchás. Fórsáil cosán le strategy="list" nó strategy="native" nuair a theastaíonn iompar comhsheasmhach ar fud ardán le haghaidh tástálacha nó seatanna scáileáin.

date-time-picker — dáta, am, nó an dá cheann

Réimse téacs inar féidir leat clóscríobh, móide cnaipe deilbhín a osclaíonn dialóg roghnóra dáta WAI-ARIA APG. Ceart don logchaighdeán de réir dearaidh — tagann ainmneacha míonna, ainmneacha laethanta, céad lá na seachtaine agus clog 12 nó 24 uair ar fad ó Intl — agus is teaghrán ISO inchomhairithe gan crios ama an luach i gcónaí: "2026-03-15" le haghaidh mode="date", "09:30" le haghaidh mode="time", "2026-03-15T09:30" le haghaidh 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",
  }}
/>

Tá an luach ISO comhionann leis an rud a sheolann <input type="date"> ionas gur féidir leat an rialú dúchasach a mhalartú isteach nó amach gan teagmháil a dhéanamh le do chúl-chóras.

motion-picker — tabhair meas ar ghluaiseacht laghdaithe

Socraíonn an cúntóir data-motion="{slug}" ar fhréamh an doiciméid. Tagann a chéad luach ó shocrú prefers-reduced-motion chórais oibriúcháin an chuairteora — i gcónaí, gan bratach rogha isteach, mar is fíor-riachtanas inrochtaineachta é gluaiseacht (WCAG 2.3.3). Cinneann do CSS agus do scripteanna cad a chuirtear faoi chois.

<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 — bosca cuardaigh nach gcuireann bac ort

Cnaipe deilbhín a osclaíonn réimse cuardaigh. Nuair a bhrúnn tú Return, nó an cnaipe ⏎ in aice leis an réimse, nascleanann sé le hiarratas GET simplí chuig /?<text> (bearrtar an téacs agus códaítear mar URI é; ní théann ceist fholamh in áit ar bith). Tá a thrí ainm inrochtana ag teastáil, mar ní sheolann an cúntóir Béarla.

<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 athraíonn an cosán (/search?foo), agus navigate coinníonn sé an nascleanúint istigh san app; gan é glaonn an cúntóir location.assign.

picker-bar — an tsraith ceanntásc iomlán in aon turas

picker-bar rindreálann sé cuardach, téama, logchaighdeán, méid téacs agus roinnt in aon tsraith amháin, leis an tsraith iomlán téamaí tagartha agus scála téacs seacht gcéim réamhcheangailte. Tagann gach ainm inrochtana in aon réad riachtanach amháin labels .

<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}
/>

Sroich aon roghnóir fillte le searchProps, themeProps, localeProps, textSizeProps agus shareProps.

Tá leideanna uirlise ionsuite

Taispeánann gach roghnóir a lipéad i leid uirlise nuair a luíonn an pointeoir ar a chnaipe nó nuair a bhíonn fócas méarchláir ar an gcnaipe. Fanann an leid uirlise nuair a ghluaiseann an pointeoir air, dúnann Escape é cibé áit a bhfuil an fócas, agus ní thaispeántar riamh é fad atá preabfhuinneog an roghnóra oscailte. Iompraíonn sé an téacs céanna le hainm inrochtana an chnaipe, mar sin níl aon rud le cumrú ná le haistriú faoi dhó; stíleálann na téamaí tagartha é.

Painéal socruithe in aon áit amháin

Cuireann na ceithre chúntóir sainroghanna le chéile go nádúrtha:

<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á bhfaighidh tú 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-

Tá a spec féin ag gach pacáiste, tástálacha mapáilte ar chlásail an spec, samplaí inrite (lena n-áirítear patrúin fianán SSR) agus píblíne tógála + foilsithe. Is iad na pacáistí Svelte na cinn canónacha; i gcás amhrais, buann a gconarthaí.

Na chéad chéimeanna eile

• Catalóg na gcomhpháirteanna — tagairt iomlán na 571 comhpháirt.
• Cabhair — fabhtcheartú agus ceisteanna coitianta.
• Cén fáth Lily — agus conas tacú leis an tionscadal.

Ceisteanna ar an mbealach? Tá an leathanach cabhrach lán de fhreagraí — agus más féidir céim a dhéanamh níos soiléire, inis dúinn agus déanfaimid an teagasc a fheabhsú go sásta.