Gweresoryon dewisyow

Pyth a wrewgh drehevel

Panel settyansow may tewisydh an devnydhyoryon aga yeth ha myns skrif — dewisyow a wrer dhe'n skrif kowl, a bes dres gweles, ha a gost dhiso dew darn ha nebes linennow CSS. A-dro dhe 15 mynysenn.

Kyns dalleth

Gorfennewgh an dyskans framwyth rag dha stakk. An sampylyow a-woeles yw Svelte; gweresoryon React, Vue, Angular, HTML, Nunjucks, ha Blazor a gessenva kevambos orth kevambos.

An furv a rannons

• Botton-ikon heb pen a idzhek listbox WAI-ARIA APG (po, rag date-time-picker, kowtys dewis-deiz) — heb genesek <select>, may kyf peub framwyth an keth hwedhel klavyer ha krogow stil.
• Unn krok klass dre bakkya (.locale-picker, .text-size-picker, .share-picker, .date-time-picker), CSS hwath ny vydh danvonys.
• Diogel dhe SSR: skrifans DOM a hwarvidh unnik y'n kylgh-bewnans mount/effect.
• Glan dhe i18n: pub linenn a wel an devnydhyer yw perthynas.
• Kefys rag Svelte (kenedhlek), React, Vue, Angular, elven dhe-wul HTML, Nunjucks, ha Blazor — an keth kevambos yn pub onan.

theme-picker, locale-picker, ha text-size-picker a berth pub onan unn dewis devnydhyer a dhalleth dhe worfenn (dewisyans, devnydh war DOM, ilvyn localStorage pesyans storageKey dre berthynas). share-picker ha date-time-picker yw dyffrans yn kynda: share-picker a berth gwrians — ny wra devnydh vyth war an skrif ha ny with tra — ha date-time-picker a berth gwerth furvdrefen deiz yn furv yw data, nyns yw dewis.

locale-picker — yeth ha tu

A asow an devnydhyer dhe dhewis yeth, ena skrifa lang ha dir dhe wreydh an skrif may sewyo dha lyverva i18n, dha CSS, ha teknologieth gweres. RTL yw ertheges yn awtomatek rag Arabek, Hebrow, ha skrifow erell dhiworth dhyghow dhe gledh. Hi a ressa unnik war sinyans — dha lyverva i18n a dhyghtya an treylyans.

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

An dewisyow a gev lavell dhiworth tabel yn-bos a hynwyn yeth (a yll bos gorholys dre localeLabels), pub dewis a dhon y lang perthynas may lavaro skrin-redyoryon “Français” yn Frenkek, ha kodhow gans striken a-woeles avel en_US a dreylyas heb kellys dhe BCP 47 en-US. Gorrewgh onChange (po an gwerth kelmys) dhe i18next, Paraglide, vue-i18n po pyth a usyewgh.

text-size-picker — myns kontrollys gans an redyer

Gwayn hedhesadewder a gemmer mynysennow: an gweresor a sett data-text-size="{slug}" war wreydh an skrif ha dha CSS a vapp pub gwerth dhe vyns.

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

Maythwgh dha dyllans yn rem ha'n app kowl a skalyas gans dewis an devnydhyer. Lavellow a vydh kapital dhiworth an slugs (“X Large”) po gorholys gans sizeLabels.

share-picker — danvonewgh an folen ma

Botton unn-glif a idzhek folen-rannans genesek an gwel le may fo, ha ow kodha war rol a dhestinasyons a rewgh, ha gwrians kopi-URL. Ny wra danvon URLs rosweyth sokyel — pyth rosweyth a dal yn dha dhiskwedhyans yw dha dowl dha honan, nyns yw an system dyllans.

<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 dhe ragosodhys location.hrefrag henna an kas kemmyn nyns eus othom a wiasow. Fors fordh gans strategy="list" po strategy="native" pan vo othom a hwedhel kehevelys dres leurennow rag previow po skrinshots.

date-time-picker — deiz, termyn, po an dhew

Hwel tekst may hyllowgh skrifa ino, ha botton-ikon a idzhek kowtys dewis-deiz WAI-ARIA APG. Ewn dhe'n yeth dre dhrehevyans — hynwyn mis, hynwyn dydh an seythun, kynsa dydh an seythun, ha klock 12 po 24 our a dheu oll dhiworth Intl — ha'n gwerth yw pub prys linenn ISO ranngadow heb gorholl-termyn: "2026-03-15" rag mode="date", "09:30" rag mode="time", "2026-03-15T09:30" rag 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",
  }}
/>

An gwerth ISO yw an keth avel an pyth a <input type="date"> a bostya, may hyllowgh chanjya an kontroll genesek a-berth po in-mes heb tuchya dha backend.

motion-picker — gwithewgh gwayans lehes

An gweresor a sett data-motion="{slug}" war wreydh an skrif. Y wreydh kynsa a dheu dhiworth settyans system-oberi an gwelyer prefers-reduced-motion — pub prys, heb baner-dewis, drefen gwayans yw othom hedhesadewder gwir (WCAG 2.3.3). Dha CSS ha skrypow a dhewis pyth a vydh dyslywys.

<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 — kowtys whelas na wra lettya

Botton-ikon a idzhek hwel whelas. Gwaskans Return, po botton ⏎ ryb an hwel, a lewy gans govyn GET plen dhe /?<text> (an tekst yw trimys ha URI-kodys; govynn gwag ny gerdh dhe unnik le). Y dri hanow hedhesys yw ilvyn, drefen ny dhanvon an gweresor Sawsnek.

<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 a chanj an fordh (/search?foo), ha navigate a with an lewyans y'n app; heb henna an gweresor a elwys location.assign.

picker-bar — an rew pennfolen kowl unweyth

picker-bar a dhyskwedh whelas, tebel, yeth, myns skrif ha rannans yn unn rew, gans an set kowl a debelyow kehevelys ha skal tekst seyth-kamm kevrys a-rag. Pub hanow hedhesys a dheu yn unn labels objekt ilvyn.

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

Kevewgh dhe bub dewisyer lapys gans searchProps, themeProps, localeProps, textSizeProps ha shareProps.

Tooltips a dheu yn-bos

Pub dewisyer a dhyskwedh y lavell yn tooltip pan vo an poyntyer ow powes war y botton po pan vo fokus klavyer orto. An tooltip a berth pan wayn an poyntyer warnodho, Escape a'n dhistroy ple pynag y fo fokus, ha ny vydh bythkweth displetys pan vo popup an dewisyer ygor. Ev a dhon an keth tekst avel hanow hedhesys an botton, rag henna nyns eus tra vyth dhe settya na dhe dhreylya diwweyth; an tebelyow kehevelys a'n stil.

Panel settyansow yn unn le

An peswar gweresor dewisyow a gesstrew yn naturel:

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

Le may kyffir anedha

# 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-

Pub pakkya a'n jeves y spec y honan, previow mappys dhe gleusow spec, ensamplow kerdhus (gans patromow cookie SSR), ha fordh-drehevel + dyllans. Pakkyow Svelte yw kenedhlek; mar kyhyl, aga hevambosow a wayn.

Kammow nessa

• Rolyans darnow — an dhogynnans kowl a'n 571 darn.
• Skoodhya — kudynnow ha FAQ.
• Prag Lily — ha fatell yllir skoodhya an raglen.

Govynnow war an fordh? An folen skoodhya yw leun a worthebow — ha mar pe kamm moy splann, leverewgh dhyn ha ni a wellha an dyskans yn lowen.