Masu taimakon abubuwan so

Abin da za ka gina

Allon saituna inda masu amfani ke zaɓar harshensu da girman rubutu — zaɓuɓɓukan da ke aiki ga dukan takarda, suna dawwama tsakanin ziyara, kuma suna kashe maka abubuwa biyu da ƴan layukan CSS. Kusan mintuna 15.

Kafin ka fara

Fara gama koyarwar tsarin don tarin fasahar ka. Samfuran da ke ƙasa na Svelte ne; masu taimakon React, Vue, Angular, HTML, Nunjucks da Blazor suna daidaita yarjejeniya da yarjejeniya.

Siffar da suke rabawa

• Maɓallin alama maras kai da ke buɗe listbox na WAI-ARIA APG (ko, ga date-time-picker, maganar zaɓar kwanan wata) — babu na asali <select>, don kowane tsari ya samu halayyar maɓallan rubutu da ƙugiyoyin tsari iri ɗaya.
• Ƙugiyar aji ɗaya ga kowane fakiti (.locale-picker, .text-size-picker, .share-picker, .date-time-picker), sifili CSS da ake aikawa.
• Amintacce ga SSR: rubuce-rubucen DOM suna faruwa ne kawai a zagayen rayuwar mount/effect.
• Mai tsabta ga i18n: kowane rubutu da mai amfani ke gani prop ne.
• Akwai don Svelte (na asali), React, Vue, Angular, sinadarin HTML na musamman, Nunjucks da Blazor — yarjejeniya ɗaya a kowanne.

theme-picker, locale-picker da text-size-picker kowanne yana mallakar abin so ɗaya na mai amfani daga farko zuwa ƙarshe (zaɓi, amfani ga DOM, na zaɓi localStorage dawwama ta prop ɗin storageKey ). share-picker da date-time-picker sun bambanta a nau'i: share-picker yana mallakar aiki — ba ya amfani da komai ga takardar kuma ba ya riƙe komai — kuma date-time-picker yana mallakar ƙimar fom, domin kwanan wata a cikin fom bayani ne, ba abin so ba.

locale-picker — harshe da alkibla

Yana barin mai amfani ya zaɓi yanayin yanki, sannan ya rubuta lang da dir a tushen takardar domin ɗakin karatun i18n ɗinka, CSS ɗinka da fasahohin taimako duk su bi. Ana gano RTL kai tsaye ga Larabci, Ibrananci da sauran rubutu daga dama zuwa hagu. Yana mai da hankali ne kawai kan nuni — ɗakin karatun i18n ɗinka yana kula da fassara.

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

Ana sa wa zaɓuɓɓuka lakabi daga teburin sunayen yanayin yanki da aka gina a ciki (ana iya gyarawa ta localeLabels), kowane zaɓi yana ɗauke da sifar lang nasa don masu karanta allo su furta "Français" da Faransanci, kuma lambobin da ke da ƙasan layi kamar en_US ana mayar da su zuwa BCP 47 da dawowa ba tare da asara ba en-US. Haɗa onChange (ko ƙimar da aka ɗaure) zuwa i18next, Paraglide, vue-i18n ko duk abin da kake amfani da shi.

text-size-picker — girman da mai karatu ke sarrafawa

Nasarar sauƙin isa da ke ɗaukar mintuna: mai taimakon yana saita data-text-size="{slug}" a tushen takardar kuma CSS ɗinka yana haɗa kowace ƙima da girma.

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

Auna tsarinka da rem kuma dukan app ɗin yana daidaita da zaɓin mai amfani. Ana ƙirƙirar lakabi daga slugs da babban harafin farko ("X Large") ko a gyara su da sizeLabels.

share-picker — aika wannan shafi

Maɓalli mai alama ɗaya da ke buɗe takardar rabawa ta asali ta na'urar inda akwai, in ba haka ba ya koma jerin wuraren da kake bayarwa, tare da aikin kwafin URL. Ba ya aika wani URL na shafukan sada zumunta — waɗanne shafuka suka dace da samfurinka shawararka ce, ba ta tsarin ƙira ba.

<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 tsohon ƙimarsa location.hrefdon haka al'amarin gama gari ba ya buƙatar wata haɗawa. Tilasta hanya da strategy="list" ko strategy="native" lokacin da kake buƙatar halayyar da ta daidaita a dandamali don gwaje-gwaje ko hotunan allo.

date-time-picker — kwanan wata, lokaci, ko duka biyu

Filin rubutu da za ka iya rubutawa a ciki, tare da maɓallin alama da ke buɗe maganar zaɓar kwanan wata ta WAI-ARIA APG. Daidai ga yanayin yanki ta tsari — sunayen watanni, sunayen ranakun mako, ranar farko ta mako da agogon sa'o'i 12 ko 24 duk suna fitowa daga Intl — kuma ƙimar koyaushe zaren ISO ne mai jerawa kuma marar yankin lokaci: "2026-03-15" don mode="date", "09:30" don mode="time", "2026-03-15T09:30" don 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",
  }}
/>

ƙimar ISO iri ɗaya ce da abin da <input type="date"> ke aikawa, don haka za ka iya musanya sarrafawar ta asali ciki ko waje ba tare da taɓa bayan fagenka ba.

motion-picker — girmama rage motsi

Mai taimakon yana saita data-motion="{slug}" a tushen takardar. Ƙimarsa ta farko tana fitowa daga saitin tsarin aiki na baƙo prefers-reduced-motion — koyaushe, ba tare da tuta ta shiga ba, domin motsi ainihin buƙatar sauƙin isa ne (WCAG 2.3.3). CSS ɗinka da rubutunka suna yanke abin da za a danne.

<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 — akwatin bincike da ba ya shiga hanya

Maɓallin alama da ke buɗe filin bincike. Danna Return, ko maɓallin ⏎ kusa da filin, yana tafiya da buƙatar GET mai sauƙi zuwa /?<text> (ana yanke rubutun kuma a ɓoye shi a matsayin URI; tambaya fanko ba ta zuwa ko'ina). Sunayensa uku masu sauƙin isa wajibi ne, domin mai taimakon ba ya aika Turanci.

<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 yana canza hanya (/search?foo), kuma navigate yana riƙe tafiya a cikin app; ba tare da shi ba mai taimakon yana kiran location.assign.

picker-bar — dukan layin kai a lokaci ɗaya

picker-bar yana nuna bincike, jigo, yanayin yanki, girman rubutu da rabawa a layi ɗaya, tare da cikakken saitin jigogin tunani da ma'aunin rubutu na matakai bakwai da aka riga aka haɗa. Kowane suna mai sauƙin isa yana zuwa cikin abu ɗaya wajibi 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}
/>

Isa ga kowane mai zaɓe da aka naɗe da searchProps, themeProps, localeProps, textSizeProps da shareProps.

Shawarwarin kayan aiki sun zo a ciki

Kowane mai zaɓe yana nuna lakabinsa a cikin shawarar kayan aiki lokacin da mai nunawa ya tsaya a kan maɓallinsa ko maɓallin yana da mayar da hankali na maɓallan rubutu. Shawarar kayan aiki tana tsayawa yayin da mai nunawa ke motsawa kanta, Escape yana rufe ta duk inda mayar da hankali yake, kuma ba a taɓa nuna ta yayin da buɗaɗɗen taga na mai zaɓen ke buɗe. Tana ɗauke da rubutu iri ɗaya da suna mai sauƙin isa na maɓallin, don haka babu abin da za a saita ko a fassara sau biyu; jigogin tunani suna ba ta tsari.

Allon saituna a wuri ɗaya

Masu taimakon abubuwan so huɗu suna haɗuwa a hankali:

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

Inda za a samu su

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

Kowane fakiti yana da spec ɗinsa, gwaje-gwajen da aka daidaita da sassan spec, misalan da za a iya gudanarwa (ciki har da tsarin kuki na SSR) da bututun ginawa + wallafawa. Fakitin Svelte na asali ne; idan shakka, yarjejeniyoyinsu suna nasara.

Matakai na gaba

• Kundin abubuwa — cikakken bayanin abubuwa 571.
• Taimako — warware matsaloli da FAQ.
• Me ya sa Lily — da yadda za a goyi bayan aikin.

Tambayoyi a hanya? Shafin taimako cike yake da amsoshi — kuma idan wani mataki zai iya zama mafi bayyana, gaya mana kuma za mu gyara koyarwar da farin ciki.