ຕົວຊ່ວຍການຕັ້ງຄ່າ

ສິ່ງທີ່ທ່ານຈະສ້າງ

ແຜງການຕັ້ງຄ່າທີ່ຜູ້ໃຊ້ເລືອກພາສາ ແລະຂະໜາດຕົວອັກສອນຂອງເຂົາເຈົ້າ — ການເລືອກທີ່ນຳໃຊ້ກັບທັງເອກະສານ, ຄົງຢູ່ລະຫວ່າງການເຂົ້າຊົມ ແລະເສຍທ່ານພຽງສອງອົງປະກອບ ແລະ CSS ບໍ່ເທົ່າໃດແຖວ. ປະມານ 15 ນາທີ.

ກ່ອນທ່ານເລີ່ມ

ເຮັດໃຫ້ສຳເລັດ ບົດສອນເຟຣມເວີກ ສຳລັບສະແຕັກຂອງທ່ານກ່ອນ. ຕົວຢ່າງຂ້າງລຸ່ມເປັນ Svelte; ຕົວຊ່ວຍ React, Vue, Angular, HTML, Nunjucks ແລະ Blazor ກົງກັນສັນຍາຕໍ່ສັນຍາ.

ຮູບຮ່າງທີ່ພວກມັນແບ່ງປັນ

• ປຸ່ມໄອຄອນແບບບໍ່ມີຫົວທີ່ເປີດ WAI-ARIA APG listbox (ຫຼື, ສຳລັບ date-time-picker, ກ່ອງໂຕ້ຕອບເລືອກວັນທີ) — ບໍ່ມີພື້ນເມືອງ <select>, ເພື່ອໃຫ້ທຸກເຟຣມເວີກໄດ້ພຶດຕິກຳແປ້ນພິມ ແລະ styling hook ທີ່ຄືກັນ.
• class hook ໜຶ່ງອັນຕໍ່ແພັກເກັດ (.locale-picker, .text-size-picker, .share-picker, .date-time-picker), CSS ສູນຖືກສົ່ງ.
• ປອດໄພສຳລັບ SSR: ການຂຽນ DOM ເກີດຂຶ້ນໃນວົງຈອນຊີວິດ mount/effect ເທົ່ານັ້ນ.
• ສະອາດສຳລັບ i18n: ທຸກສາຍອັກສອນທີ່ຜູ້ໃຊ້ເຫັນແມ່ນຄຸນສົມບັດ.
• ມີສຳລັບ Svelte (ມາດຕະຖານ), React, Vue, Angular, ອົງປະກອບກຳນົດເອງ HTML, Nunjucks ແລະ Blazor — ສັນຍາດຽວກັນໃນແຕ່ລະອັນ.

theme-picker, locale-picker ແລະ text-size-picker ແຕ່ລະອັນເປັນເຈົ້າຂອງ ການຕັ້ງຄ່າ ຂອງຜູ້ໃຊ້ໜຶ່ງຢ່າງແຕ່ຕົ້ນຈົນຈົບ (ການເລືອກ, ການນຳໃຊ້ກັບ DOM, localStorage ຄວາມຄົງຢູ່ storageKey ທາງເລືອກຜ່ານຄຸນສົມບັດ). share-picker ແລະ date-time-picker ຕ່າງກັນທາງຊະນິດ: share-picker ເປັນເຈົ້າຂອງ ການກະທຳ — ມັນບໍ່ນຳໃຊ້ຫຍັງກັບເອກະສານ ແລະບໍ່ເກັບຫຍັງ — ແລະ date-time-picker ເປັນເຈົ້າຂອງ ຄ່າແບບຟອມ, ເພາະວັນທີໃນແບບຟອມແມ່ນຂໍ້ມູນ, ບໍ່ແມ່ນການຕັ້ງຄ່າ.

locale-picker — ພາສາ ແລະທິດທາງ

ໃຫ້ຜູ້ໃຊ້ເລືອກໂລແຄລ, ຈາກນັ້ນຂຽນ lang ແລະ dir ໄປຍັງຮາກເອກະສານ ເພື່ອໃຫ້ໄລບຣາຣີ i18n, CSS ແລະເຕັກໂນໂລຢີຊ່ວຍເຫຼືອຂອງທ່ານທັງໝົດຕາມ. RTL ຖືກກວດພົບອັດຕະໂນມັດສຳລັບອາຣັບ, ຮີບຣູ ແລະອັກສອນຂວາ-ໄປ-ຊ້າຍອື່ນໆ. ມັນເນັ້ນສະເພາະການສົ່ງສັນຍານ — ໄລບຣາຣີ i18n ຂອງທ່ານຈັດການການແປ.

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

ຕົວເລືອກມີປ້າຍຈາກຕາຕະລາງໃນຕົວຂອງຊື່ໂລແຄລ (ແທນທີ່ໄດ້ຜ່ານ localeLabels), ແຕ່ລະຕົວເລືອກມີຄຸນລັກສະນະ lang ຂອງຕົນເອງ ເພື່ອໃຫ້ໂປຣແກຣມອ່ານໜ້າຈໍອອກສຽງ “Français” ເປັນພາສາຝຣັ່ງ, ແລະລະຫັດທີ່ມີຂີດກ້ອງເຊັ່ນ en_US ໄປ-ກັບໄດ້ໂດຍບໍ່ສູນເສຍກັບ BCP 47 en-US. ເຊື່ອມຕໍ່ onChange (ຫຼືຄ່າທີ່ຜູກ) ເຂົ້າກັບ i18next, Paraglide, vue-i18n ຫຼືອັນໃດທີ່ທ່ານໃຊ້.

text-size-picker — ຂະໜາດທີ່ຜູ້ອ່ານຄວບຄຸມ

ໄຊຊະນະດ້ານການເຂົ້າເຖິງໄດ້ງ່າຍທີ່ໃຊ້ເວລາບໍ່ເທົ່າໃດນາທີ: ຕົວຊ່ວຍຕັ້ງ data-text-size="{slug}" ທີ່ຮາກເອກະສານ ແລະ CSS ຂອງທ່ານແມັບແຕ່ລະຄ່າໄປຫາຂະໜາດ.

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

ກຳນົດຂະໜາດໂຄງຮ່າງຂອງທ່ານໃນ rem ແລະທັງແອັບຈະປັບຂະໜາດຕາມທາງເລືອກຂອງຜູ້ໃຊ້. ປ້າຍຖືກຂຽນອັກສອນຕົ້ນໃຫຍ່ຈາກ slug (“X Large”) ຫຼືແທນທີ່ດ້ວຍ sizeLabels.

share-picker — ສົ່ງໜ້ານີ້

ປຸ່ມສັນຍາລັກດຽວທີ່ເປີດແຜ່ນແບ່ງປັນພື້ນເມືອງຂອງອຸປະກອນບ່ອນທີ່ມີ, ແລະຖ້າບໍ່ມີກໍກັບໄປຫາລາຍການປາຍທາງທີ່ທ່ານສະໜອງ, ບວກການກະທຳສຳເນົາ URL. ມັນບໍ່ສົ່ງ URL ເຄືອຂ່າຍສັງຄົມ — ເຄືອຂ່າຍໃດເປັນຂອງຜະລິດຕະພັນຂອງທ່ານແມ່ນການຕັດສິນໃຈຂອງທ່ານ, ບໍ່ແມ່ນຂອງລະບົບການອອກແບບ.

<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 ຄ່າເລີ່ມຕົ້ນເປັນ location.hrefດັ່ງນັ້ນກໍລະນີທົ່ວໄປບໍ່ຕ້ອງການສາຍເຊື່ອມ. ບັງຄັບເສັ້ນທາງດ້ວຍ strategy="list" ຫຼື strategy="native" ເມື່ອທ່ານຕ້ອງການພຶດຕິກຳທີ່ສອດຄ່ອງຂ້າມແພລດຟອມສຳລັບການທົດສອບ ຫຼືພາບໜ້າຈໍ.

date-time-picker — ວັນທີ, ເວລາ, ຫຼືທັງສອງ

ຊ່ອງຂໍ້ຄວາມທີ່ທ່ານພິມໄດ້, ບວກປຸ່ມໄອຄອນທີ່ເປີດກ່ອງໂຕ້ຕອບເລືອກວັນທີ WAI-ARIA APG. ຖືກຕ້ອງຕາມໂລແຄລໂດຍການອອກແບບ — ຊື່ເດືອນ, ຊື່ມື້ໃນອາທິດ, ມື້ທຳອິດຂອງອາທິດ ແລະໂມງ 12 ຫຼື 24 ຊົ່ວໂມງ ທັງໝົດມາຈາກ Intl — ແລະຄ່າແມ່ນສາຍ ISO ທີ່ຈັດລຽງໄດ້ ແລະບໍ່ມີເຂດເວລາສະເໝີ: "2026-03-15" ສຳລັບ mode="date", "09:30" ສຳລັບ mode="time", "2026-03-15T09:30" ສຳລັບ 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 ຄືກັນກັບສິ່ງທີ່ <input type="date"> ສົ່ງ, ດັ່ງນັ້ນທ່ານສາມາດສະຫຼັບການຄວບຄຸມພື້ນເມືອງເຂົ້າ ຫຼືອອກໂດຍບໍ່ແຕະ backend ຂອງທ່ານ.

motion-picker — ເຄົາລົບການເຄື່ອນໄຫວທີ່ຫຼຸດລົງ

ຕົວຊ່ວຍຕັ້ງ data-motion="{slug}" ທີ່ຮາກເອກະສານ. ຄ່າທຳອິດຂອງມັນມາຈາກການຕັ້ງຄ່າລະບົບປະຕິບັດການຂອງຜູ້ເຂົ້າຊົມ prefers-reduced-motion — ສະເໝີ, ໂດຍບໍ່ມີທຸງເລືອກເຂົ້າ, ເພາະການເຄື່ອນໄຫວແມ່ນຄວາມຕ້ອງການດ້ານການເຂົ້າເຖິງໄດ້ງ່າຍຈິງ (WCAG 2.3.3). CSS ແລະສະຄຣິບຂອງທ່ານຕັດສິນວ່າຈະສະກັດອັນໃດ.

<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 — ກ່ອງຄົ້ນຫາທີ່ຫຼີກທາງ

ປຸ່ມໄອຄອນທີ່ເປີດຊ່ອງຄົ້ນຫາ. ການກົດ Return, ຫຼືປຸ່ມ ⏎ ຂ້າງຊ່ອງ, ນຳທາງດ້ວຍຄຳຮ້ອງຂໍ GET ທຳມະດາໄປຫາ /?<text> (ຂໍ້ຄວາມຖືກຕັດ ແລະເຂົ້າລະຫັດ URI; ຄຳຖາມຫວ່າງບໍ່ໄປໃສ). ຊື່ທີ່ເຂົ້າເຖິງໄດ້ທັງສາມຂອງມັນຈຳເປັນ, ເພາະຕົວຊ່ວຍບໍ່ສົ່ງພາສາອັງກິດ.

<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 ປ່ຽນເສັ້ນທາງ (/search?foo), ແລະ navigate ຮັກສາການນຳທາງໃນແອັບ; ຖ້າບໍ່ມີມັນ ຕົວຊ່ວຍເອີ້ນ location.assign.

picker-bar — ທັງແຖວສ່ວນຫົວໃນຄັ້ງດຽວ

picker-bar ສະແດງການຄົ້ນຫາ, ຮູບແບບສີສັນ, ໂລແຄລ, ຂະໜາດຕົວອັກສອນ ແລະການແບ່ງປັນໃນແຖວດຽວ, ພ້ອມຊຸດເຕັມຂອງຮູບແບບສີສັນອ້າງອີງ ແລະມາດຕາສ່ວນຂໍ້ຄວາມເຈັດຂັ້ນທີ່ເຊື່ອມຕໍ່ໄວ້ກ່ອນ. ທຸກຊື່ທີ່ເຂົ້າເຖິງໄດ້ມາໃນອອບເຈັກຈຳເປັນດຽວ 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}
/>

ເຂົ້າເຖິງຕົວເລືອກທີ່ຫໍ່ໃດໆດ້ວຍ searchProps, themeProps, localeProps, textSizeProps ແລະ shareProps.

Tooltip ມາພ້ອມໃນຕົວ

ທຸກຕົວເລືອກສະແດງປ້າຍຂອງມັນໃນ tooltip ເມື່ອຕົວຊີ້ພັກຢູ່ເທິງປຸ່ມຂອງມັນ ຫຼືປຸ່ມມີຈຸດສຸມແປ້ນພິມ. Tooltip ຢູ່ຕໍ່ໄປໃນຂະນະທີ່ຕົວຊີ້ເຄື່ອນໄປຫາມັນ, Escape ປິດມັນບ່ອນໃດກໍຕາມທີ່ຈຸດສຸມຢູ່, ແລະມັນບໍ່ເຄີຍສະແດງໃນຂະນະທີ່ປັອບອັບຂອງຕົວເລືອກເປີດຢູ່. ມັນມີຂໍ້ຄວາມຄືກັນກັບຊື່ທີ່ເຂົ້າເຖິງໄດ້ຂອງປຸ່ມ, ດັ່ງນັ້ນບໍ່ມີຫຍັງຕ້ອງຕັ້ງຄ່າ ແລະບໍ່ມີຫຍັງຕ້ອງແປສອງຄັ້ງ; ຮູບແບບສີສັນອ້າງອີງໃສ່ຮູບແບບໃຫ້ມັນ.

ແຜງການຕັ້ງຄ່າໃນບ່ອນດຽວ

ຕົວຊ່ວຍການຕັ້ງຄ່າທັງສີ່ປະກອບກັນຢ່າງເປັນທຳມະຊາດ:

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

ຈະເອົາມັນໄດ້ຈາກໃສ

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

ແຕ່ລະແພັກເກັດມີ spec ຂອງຕົນເອງ, ການທົດສອບທີ່ແມັບກັບຂໍ້ spec, ຕົວຢ່າງທີ່ແລ່ນໄດ້ (ລວມທັງຮູບແບບ cookie SSR) ແລະທໍ່ສ້າງ + ເຜີຍແຜ່. ແພັກເກັດ Svelte ແມ່ນມາດຕະຖານ; ເມື່ອສົງໄສ, ສັນຍາຂອງພວກມັນຊະນະ.

ຂັ້ນຕອນຕໍ່ໄປ

• ແຄັດຕາລັອກອົງປະກອບ — ການອ້າງອີງເຕັມຂອງທັງ 571 ອົງປະກອບ.
• ຊ່ວຍເຫຼືອ — ການແກ້ໄຂບັນຫາ ແລະຄຳຖາມທີ່ພົບເລື້ອຍ.
• ເປັນຫຍັງຕ້ອງ Lily — ແລະວິທີສະໜັບສະໜູນໂຄງການ.

ມີຄຳຖາມລະຫວ່າງທາງບໍ? ໜ້າຊ່ວຍເຫຼືອ ເຕັມໄປດ້ວຍຄຳຕອບ — ແລະຖ້າຂັ້ນຕອນໃດຊັດເຈນຂຶ້ນໄດ້, ບອກພວກເຮົາ ແລະພວກເຮົາຍິນດີປັບປຸງບົດສອນ.