Indstillingshjælpere

Det her bygger du

Et indstillingspanel, hvor brugere vælger sprog og tekststørrelse — valg, der gælder for hele dokumentet, bevares mellem besøg og koster dig to komponenter og et par linjer CSS. Cirka 15 minutter.

Før du går i gang

Gør først framework-vejledningen færdig for din stak. Eksemplerne nedenfor er Svelte; hjælperne til React, Vue, Angular, HTML, Nunjucks og Blazor svarer til dem kontrakt for kontrakt.

Den form, de deler

• En headless-ikonknap, der åbner en WAI-ARIA APG-listbox (eller, for date-time-picker, en datovælgerdialog) — ingen indbygget <select>, så hvert framework får den samme tastaturadfærd og de samme stylingkroge.
• Én klassekrog pr. pakke (.locale-picker, .text-size-picker, .share-picker, .date-time-picker), nul leveret CSS.
• SSR-sikker: DOM-skrivninger sker kun i mount-/effect-livscyklussen.
• i18n-ren: hver streng, brugeren ser, er en prop.
• Findes til Svelte (kanonisk), React, Vue, Angular, HTML-tilpasset element, Nunjucks og Blazor — samme kontrakt i hver.

theme-picker, locale-picker og text-size-picker ejer hver én bruger indstilling fra ende til anden (valg, anvendelse på DOM'en, valgfri localStorage vedvarende lagring via storageKey -propen). share-picker og date-time-picker er anderledes af art: share-picker ejer en handling — den anvender intet på dokumentet og gemmer intet — og date-time-picker ejer en formularværdi, fordi en dato i en formular er data, ikke en indstilling.

locale-picker — sprog og retning

Lader brugeren vælge en landestandard og skriver derefter lang og dir på dokumentroden, så dit i18n-bibliotek, din CSS og hjælpeteknologier alle følger med. RTL registreres automatisk for arabisk, hebraisk og andre højre-til-venstre-skriftsystemer. Den holder sig til at signalere — dit i18n-bibliotek tager sig af oversættelsen.

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

Valgmulighederne får deres etiketter fra en indbygget tabel over landestandardnavne (kan tilsidesættes via localeLabels), hver valgmulighed bærer sin egen lang -attribut, så skærmlæsere udtaler "Français" på fransk, og koder med understregning som en_US konverteres tabsfrit til og fra BCP 47 en-US. Forbind onChange (eller den bundne værdi) til i18next, Paraglide, vue-i18n eller hvad du nu bruger.

text-size-picker — størrelse styret af læseren

En tilgængelighedssejr, der tager minutter: hjælperen sætter data-text-size="{slug}" på dokumentroden, og din CSS knytter hver værdi til en størrelse.

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

Dimensionér dit layout i rem og hele appen skalerer med brugerens valg. Etiketter dannes med stort begyndelsesbogstav ud fra sluggene ("X Large") eller tilsidesættes med sizeLabels.

share-picker — send denne side

En knap med ét enkelt tegn, der åbner enhedens indbyggede delingsark, hvor der findes et, og ellers falder tilbage til en liste over destinationer, du leverer, plus en handling til at kopiere URL'en. Den leverer ingen URL'er til sociale netværk — hvilke netværk der hører hjemme i dit produkt, er dit valg, ikke designsystemets.

<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 har som standard location.href, så det almindelige tilfælde kræver ingen ledningsføring. Gennemtving en sti med strategy="list" eller strategy="native" når du har brug for ensartet adfærd på tværs af platforme til tests eller skærmbilleder.

date-time-picker — en dato, et klokkeslæt eller begge dele

Et tekstfelt, du kan skrive i, plus en ikonknap, der åbner en WAI-ARIA APG-datovælgerdialog. Sprogrigtig af konstruktion — månedsnavne, ugedagsnavne, første ugedag og 12- eller 24-timers ur kommer alle fra Intl — og værdien er altid en sorterbar ISO-streng uden tidszone: "2026-03-15" for mode="date", "09:30" for mode="time", "2026-03-15T09:30" for 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-værdien er identisk med det, som <input type="date"> sender, så du kan bytte den indbyggede kontrol ind eller ud uden at røre din backend.

motion-picker — respektér reduceret bevægelse

Hjælperen sætter data-motion="{slug}" på dokumentroden. Dens første værdi kommer fra den besøgendes operativsystems prefers-reduced-motion -indstilling — altid, uden opt-in-flag, fordi bevægelse er et reelt tilgængelighedsbehov (WCAG 2.3.3). Din CSS og dine scripts afgør, hvad der undertrykkes.

<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 — en søgeboks, der ikke er i vejen

En ikonknap, der åbner et søgefelt. Tryk på Retur, eller på ⏎-knappen ved siden af feltet, navigerer med en almindelig GET-forespørgsel til /?<text> (teksten trimmes og URI-kodes; en tom forespørgsel fører ingen steder hen). De tre tilgængelige navne er påkrævede, fordi hjælperen ikke leverer engelsk.

<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 ændrer stien (/search?foo), og navigate holder navigationen i appen; uden den kalder hjælperen location.assign.

picker-bar — hele sidehovedrækken på én gang

picker-bar gengiver søgning, tema, sprog, tekststørrelse og deling i én række, med hele sættet af referencetemaer og den syvtrins tekstskala forbundet på forhånd. Hvert tilgængeligt navn kommer i ét påkrævet labels -objekt.

<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å enhver indpakket vælger med searchProps, themeProps, localeProps, textSizeProps og shareProps.

Værktøjstip er indbygget

Hver vælger viser sin etiket i et værktøjstip, når markøren hviler på dens knap, eller knappen har tastaturfokus. Værktøjstippet bliver stående, mens markøren flytter sig over på det, Escape lukker det, uanset hvor fokus er, og det vises aldrig, mens vælgerens popup er åben. Det bærer den samme tekst som knappens tilgængelige navn, så der er intet at konfigurere og intet at oversætte to gange; referencetemaerne formgiver det.

Et indstillingspanel ét sted

De fire indstillingshjælpere sættes naturligt sammen:

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

Hvor du får fat i dem

# 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 pakke har sin egen spec, tests knyttet til specens klausuler, kørbare eksempler (inklusive SSR-cookiemønstre) og en bygge- og udgivelsespipeline. Svelte-pakkerne er kanoniske; når du er i tvivl, vinder deres kontrakter.

Næste skridt

• Komponentkatalog — den fulde reference for de 571 komponenter.
• Hjælp — fejlfinding og ofte stillede spørgsmål.
• Hvorfor Lily — og hvordan du støtter projektet.

Spørgsmål undervejs? Siden Hjælp er fuld af svar — og hvis et trin kan blive tydeligere, så fortæl os det og vi forbedrer gerne vejledningen.