Stillingahjálpartæki

Það sem þú munt byggja

Stillingaspjald þar sem notendur velja tungumál og textastærð — val sem gilda um allt skjalið, haldast milli heimsókna og kosta þig tvo íhluti og fáeinar línur af CSS. Um 15 mínútur.

Áður en þú byrjar

Ljúktu við rammakennsluefnið fyrir þinn stafla. Sýnishornin hér að neðan eru í Svelte; React-, Vue-, Angular-, HTML-, Nunjucks- og Blazor-hjálpartækin samsvara samningur fyrir samning.

Lögunin sem þau deila

• Höfuðlaus táknhnappur sem opnar WAI-ARIA APG valmöguleikalista (eða, fyrir date-time-picker, dagsetningarvalsglugga) — ekkert innbyggt <select>, svo hver rammi fær eins lyklaborðshegðun og stílkróka.
• Einn klasakrókur á hvern pakka (.locale-picker, .text-size-picker, .share-picker, .date-time-picker), ekkert CSS fylgir.
• SSR-öruggt: DOM-skrif gerast aðeins í mount/effect lífsferlinum.
• Hreint gagnvart i18n: hver texti sem notandinn sér er eiginleiki.
• Fáanlegt fyrir Svelte (kanónískt), React, Vue, Angular, HTML sérþátt, Nunjucks og Blazor — sami samningur í hverju.

theme-picker, locale-picker og text-size-picker eiga hver eina notanda stillingu frá upphafi til enda (val, beitingu á DOM, valfrjálsa localStorage þrautseigju með storageKey eigindinni). share-picker og date-time-picker eru ólíkir að eðli: share-picker á aðgerð — hann beitir engu á skjalið og vistar ekkert — og date-time-picker á formgildi, þar sem dagsetning í eyðublaði eru gögn en ekki stilling.

locale-picker — tungumál og stefna

Leyfir notandanum að velja staðfærslu og skrifar svo lang og dir í rót skjalsins svo i18n-safnið þitt, CSS og hjálpartækni fylgi öll. RTL er greint sjálfkrafa fyrir arabísku, hebresku og önnur ritkerfi frá hægri til vinstri. Hann einbeitir sér eingöngu að merkjagjöf — i18n-safnið sér um þýðinguna.

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

Valkostir fá merkimiða úr innbyggðri töflu staðfærsluheita (hægt að yfirskrifa með localeLabels), hver valkostur ber sína eigin lang eigind svo skjálesarar beri „Français“ fram á frönsku, og kóðar með undirstriki eins og en_US fara taplaust fram og til baka til BCP 47 en-US. Tengdu onChange (eða bundna gildið) við i18next, Paraglide, vue-i18n eða hvað sem þú notar.

text-size-picker — stærð í höndum lesandans

Aðgengisávinningur sem tekur mínútur: hjálpartækið stillir data-text-size="{slug}" á rót skjalsins og CSS-ið þitt varpar hverju gildi á stærð.

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

Stærðarsettu uppsetninguna í rem og allt forritið kvarðast með vali notandans. Merkimiðar eru gerðir með stórum upphafsstaf úr slugs („X Large“) eða yfirskrifaðir með sizeLabels.

share-picker — sendu þessa síðu

Eins tákns hnappur sem opnar innbyggðan deilingarglugga tækisins þar sem hann er til, en annars lista yfir áfangastaði sem þú gefur, auk aðgerðar til að afrita vefslóðina. Hann sendir engar vefslóðir samfélagsneta — hvaða net eiga heima í vörunni þinni er þín ákvörðun, ekki hönnunarkerfisins.

<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 er sjálfgefið location.hrefsvo algengasta tilvikið þarf enga tengingu. Þvingaðu fram leið með strategy="list" eða strategy="native" þegar þú þarft samræmda hegðun milli vettvanga fyrir próf eða skjámyndir.

date-time-picker — dagsetning, tími eða hvort tveggja

Textareitur sem þú getur skrifað í, auk táknhnapps sem opnar WAI-ARIA APG dagsetningarvalsglugga. Réttur miðað við staðfærslu frá grunni — mánaðaheiti, vikudagaheiti, fyrsti dagur vikunnar og 12- eða 24 stunda klukka koma allt frá Intl — og gildið er alltaf raðanlegur ISO-strengur án tímabeltis: "2026-03-15" fyrir mode="date", "09:30" fyrir mode="time", "2026-03-15T09:30" fyrir 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",
  }}
/>

ISO-gildið er það sama og <input type="date"> sendir, svo þú getur skipt innbyggðu stýringunni inn eða út án þess að snerta bakendann.

motion-picker — virtu minni hreyfingu

Hjálpartækið stillir data-motion="{slug}" á rót skjalsins. Fyrsta gildi þess kemur úr stillingu stýrikerfis gestsins prefers-reduced-motion — alltaf, án valfánans, því hreyfing er raunveruleg aðgengisþörf (WCAG 2.3.3). CSS og skriftur þínar ákveða hvað er bælt.

<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 — leitarreitur sem heldur sig til hlés

Táknhnappur sem opnar leitarreit. Að ýta á Return, eða ⏎ hnappinn við hlið reitsins, fer með einfaldri GET-beiðni á /?<text> (textinn er klipptur og URI-kóðaður; tóm fyrirspurn fer hvergi). Heitin þrjú sem hjálpartæki þurfa eru nauðsynleg, því hjálpartækið sendir ekki ensku.

<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 breytir slóðinni (/search?foo), og navigate heldur leiðsögninni innan forritsins; án þess kallar hjálpartækið á location.assign.

picker-bar — alla hausröðina í einu

picker-bar birtir leit, þema, staðfærslu, textastærð og deilingu í einni röð, með öllu safni viðmiðunarþema og sjö þrepa textakvarða forstilltu. Hvert aðgengilegt heiti kemur í einum nauðsynlegum labels hlut.

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

Náðu í hvaða vafða veljara sem er með searchProps, themeProps, localeProps, textSizeProps og shareProps.

Tooltips eru innbyggðir

Hver veljari sýnir merkimiða sinn í tooltip þegar bendillinn hvílir á hnappnum eða hnappurinn hefur lyklaborðsfókus. Tooltipið helst þegar bendillinn færist yfir á það, Escape lokar því hvar sem fókusinn er og það birtist aldrei á meðan sprettgluggi veljarans er opinn. Það ber sama texta og aðgengilegt heiti hnappsins, svo ekkert þarf að stilla og ekkert að þýða tvisvar; viðmiðunarþemun stílsetja það.

Stillingaspjald á einum stað

Hjálpartækin fjögur fyrir stillingar fara eðlilega saman:

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

Hvar á að nálgast þá

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

Hver pakki hefur sína eigin spec, próf varpað á spec-ákvæði, keyranleg dæmi (þar á meðal SSR-kökumynstur) og byggingar- og útgáfuferli. Svelte-pakkarnir eru kanónískir; ef vafi leikur á gilda samningar þeirra.

Næstu skref

• Íhlutasafn — full viðmiðun allra 571 íhlutanna.
• Hjálp — bilanaleit og algengar spurningar.
• Af hverju Lily — og hvernig á að styðja verkefnið.

Spurningar á leiðinni? hjálparsíðan er full af svörum — og ef skref gæti verið skýrara, segðu okkur og við bætum kennsluefnið með ánægju.