Tercih yardımcıları

Ne oluşturacaksınız

Kullanıcıların dillerini ve metin boyutlarını seçtiği bir ayarlar paneli — tüm belgeye uygulanan, ziyaretler arasında kalıcı olan ve size iki bileşen ile birkaç satır CSS'e mal olan seçimler. Yaklaşık 15 dakika.

Başlamadan önce

Önce yığınınız için çerçeve eğitimini bitirin. Aşağıdaki örnekler Svelte'tir; React, Vue, Angular, HTML, Nunjucks ve Blazor yardımcıları sözleşme sözleşme eşleşir.

Paylaştıkları biçim

• WAI-ARIA APG listbox'ını (ya da date-time-picker için bir tarih seçici iletişim kutusunu) açan başsız bir simge düğmesi — yerel <select>yok, böylece her çerçeve aynı klavye davranışını ve biçim kancalarını alır.
• Paket başına bir sınıf kancası (.locale-picker, .text-size-picker, .share-picker, .date-time-picker), sıfır CSS gönderilir.
• SSR güvenli: DOM yazımları yalnızca mount/effect yaşam döngüsünde olur.
• i18n dostu: kullanıcıya görünen her dize bir prop'tur.
• Svelte (asıl), React, Vue, Angular, HTML özel öğesi, Nunjucks ve Blazor için mevcut — her birinde aynı sözleşme.

theme-picker, locale-picker ve text-size-picker her biri bir kullanıcı tercihini baştan sona üstlenir (seçim, DOM'a uygulama, isteğe bağlı localStorage kalıcılık storageKey prop'u üzerinden). share-picker ve date-time-picker tür olarak farklıdır: share-picker bir eylemi üstlenir — belgeye hiçbir şey uygulamaz ve hiçbir şey kalıcı kılmaz — date-time-picker ise bir form değeriniüstlenir, çünkü bir formdaki tarih bir tercih değil, veridir.

locale-picker — dil ve yön

Kullanıcının bir yerel ayar seçmesini sağlar, ardından belge köküne lang ve dir yazar; böylece i18n kitaplığınız, CSS'iniz ve yardımcı teknolojiler hep onu izler. RTL; Arapça, İbranice ve diğer sağdan sola yazı sistemleri için otomatik algılanır. Yalnızca sinyal vermeye odaklanır — çeviriyi i18n kitaplığınız yapar.

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

Seçenekler yerleşik bir yerel ayar adı tablosundan etiketlenir (şununla geçersiz kılınabilir: localeLabels), her seçenek kendi lang özniteliğini taşır, böylece ekran okuyucular "Français" sözcüğünü Fransızca okur ve şunun gibi alt çizgili kodlar en_US BCP 47'ye kayıpsız gidip gelir en-US. Şunu bağlayın: onChange (veya bağlı değer) i18next, Paraglide, vue-i18n veya kullandığınız herhangi bir şeye.

text-size-picker — okuyucunun denetlediği boyut

Dakikalar süren bir erişilebilirlik kazancı: yardımcı belge köküne data-text-size="{slug}" ayarlar ve CSS'iniz her değeri bir boyuta eşler.

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

Düzeninizi şununla boyutlandırın: rem ve tüm uygulama kullanıcının seçimine göre ölçeklenir. Etiketler slug'lardan başlık biçiminde üretilir ("X Large") veya şununla geçersiz kılınır: sizeLabels.

share-picker — bu sayfayı gönder

Varsa cihazın yerel paylaşım sayfasını açan, yoksa sizin verdiğiniz hedefler listesine ve URL kopyalama eylemine geçen tek simgeli bir düğme. Hiçbir sosyal ağ URL'si göndermez — hangi ağların ürününüze uygun olduğu, tasarım sisteminin değil sizin kararınızdır.

<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 varsayılanı location.hrefolduğundan yaygın durumda hiçbir bağlantı gerekmez. Test veya ekran görüntüleri için platformlar arasında tutarlı davranış gerektiğinde bir yolu şununla zorlayın: strategy="list" veya strategy="native" .

date-time-picker — bir tarih, bir saat veya ikisi

İçine yazabileceğiniz bir metin alanı ve bir WAI-ARIA APG tarih seçici iletişim kutusunu açan bir simge düğmesi. Yapı gereği yerel ayara uygundur — ay adları, gün adları, haftanın ilk günü ve 12 ya da 24 saatlik saat hepsi şuradan gelir: Intl — ve değer her zaman sıralanabilir, saat dilimsiz bir ISO dizesidir: "2026-03-15" için mode="date", "09:30" için mode="time", "2026-03-15T09:30" için 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 değeri şunun gönderdiğiyle aynıdır: <input type="date"> böylece arka uca dokunmadan yerel denetimi takıp çıkarabilirsiniz.

motion-picker — azaltılmış harekete saygı gösterin

Yardımcı belge köküne data-motion="{slug}" ayarlar. İlk değeri ziyaretçinin işletim sistemi prefers-reduced-motion ayarından gelir — her zaman, kabul bayrağı olmadan, çünkü hareket gerçek bir erişilebilirlik ihtiyacıdır (WCAG 2.3.3). Neyin bastırılacağına CSS'iniz ve betikleriniz karar verir.

<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 — yolda olmayan bir arama kutusu

Bir arama alanı açan simge düğmesi. Return'e veya alanın yanındaki ⏎ düğmesine basmak, şuraya düz bir GET isteğiyle gider: /?<text> (metin kırpılır ve URI kodlanır; boş sorgu hiçbir yere gitmez). Üç erişilebilir adı zorunludur, çünkü yardımcı İngilizce göndermez.

<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 yolu değiştirir (/search?foo) ve navigate gezintiyi uygulama içinde tutar; o olmadan yardımcı şunu çağırır: location.assign.

picker-bar — tüm üst bilgi satırı tek seferde

picker-bar arama, tema, yerel ayar, metin boyutu ve paylaşımı tek satırda işler; tam referans tema kümesi ve yedi adımlı metin ölçeği önceden bağlanmıştır. Her erişilebilir ad tek bir zorunlu labels nesnesiyle gelir.

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

Sarılmış herhangi bir seçiciye şununla ulaşın: searchProps, themeProps, localeProps, textSizeProps ve shareProps.

İpuçları yerleşik gelir

Her seçici, işaretçi düğmenin üzerinde durduğunda veya düğmede klavye odağı olduğunda etiketini bir ipucunda gösterir. İpucu, işaretçi üzerine geçtiğinde kalır, odak nerede olursa olsun Escape onu kapatır ve seçicinin açılır penceresi açıkken asla görünmez. Düğmenin erişilebilir adıyla aynı metni taşır; yani yapılandırılacak ya da iki kez çevrilecek bir şey yoktur; referans temalar onu biçimlendirir.

Tek yerde bir ayarlar paneli

Dört tercih yardımcısı doğal olarak bir araya gelir:

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

Nereden edinilir

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

Her paketin kendi spec'i, spec maddelerine eşlenmiş testleri, çalıştırılabilir örnekleri (SSR çerez kalıpları dahil) ve bir derleme + yayımlama hattı vardır. Svelte paketleri asıldır; şüphede, onların sözleşmeleri geçerlidir.

Sonraki adımlar

• Bileşen kataloğu — 571 bileşenin tam başvurusu.
• Yardım — sorun giderme ve SSS.
• Neden Lily — ve projeyi nasıl destekleyeceğiniz.

Yol boyunca sorunuz mu var? Yardım sayfası yanıtlarla dolu — ve bir adım daha açık olabilirse, bize söyleyin ve eğitimi memnuniyetle iyileştirelim.