Lily Design System™

पसंद सहायक

हर फ्रेमवर्क खातिर सात छोट पैकेज, हर एक प्रयोगकर्ता के एक काम के शुरू से अंत तक मालिक बा, संगे एगो पट्टी जे ओहमें से पाँच के जोड़ेला। रउआ पहिले से मिल चुकल बानी theme-pickerसे; इहाँ बा locale-picker, text-size-picker आ motion-picker (पसंद), share-picker आ search-picker (कार्य), date-time-picker (फॉर्म मान) आ picker-bar।

रउआ का बनाईब

एगो सेटिंग पैनल जहाँ प्रयोगकर्ता आपन भाषा आ पाठ के आकार चुनेलें — चुनाव जे पूरा दस्तावेज पर लागू होखेला, दौरा के बीच टिकल रहेला आ रउआ के दू घटक आ कुछ CSS पंक्ति के खरचा पड़ेला। करीब 15 मिनट।

शुरू करे से पहिले

पहिले पूरा करीं फ्रेमवर्क ट्यूटोरियल आपन स्टैक खातिर। नीचे के नमूना Svelte के बाड़ें; React, Vue, Angular, HTML, Nunjucks आ Blazor सहायक करार-दर-करार मेल खालें।

उ आकार जवन साझा करेलें

  • एगो हेडलेस आइकन बटन जे WAI-ARIA APG लिस्टबॉक्स खोलेला (भा date-time-picker खातिर तारीख-चयन संवाद) — कवनो मूल <select>ना, ताकि हर फ्रेमवर्क के एके कीबोर्ड व्यवहार आ स्टाइलिंग हुक मिले।
  • हर पैकेज खातिर एगो क्लास हुक (.locale-picker, .text-size-picker, .share-picker, .date-time-picker), शून्य CSS भेजल जाला।
  • SSR-सुरक्षित: DOM लिखाई खाली mount/effect जीवनचक्र में होखेला।
  • i18n-साफ: प्रयोगकर्ता के लउके वाला हर स्ट्रिंग एगो prop ह।
  • Svelte (मानक), React, Vue, Angular, HTML कस्टम तत्व, Nunjucks आ Blazor खातिर उपलब्ध — हर एक में उहे करार।

theme-picker, locale-picker आ text-size-picker हर एक एगो प्रयोगकर्ता पसंद के शुरू से अंत तक मालिक बाड़ें (चुनाव, DOM पर लागू करे, वैकल्पिक localStorage टिकाऊपन storageKey prop से)। 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.

आपन काम जाँचीं: चयनकर्ता से "Large" चुनीं, आ पन्ना के पाठ बड़ा हो जाला। फेर लोड करीं — अबहियो बड़ा बा: चुनाव एहमें सँजोवल गइल localStorage। आपन भाषा चयनकर्ता के अरबी करीं आ dir="rtl" दस्तावेज पर अपने-आप सेट हो जाला।

share-picker — ई पन्ना भेजीं

एगो एक-चिह्न बटन जे जहाँ उपलब्ध होखे उहाँ उपकरण के मूल साझा शीट खोलेला, आ ना तS रउआ के देल गंतव्य के सूची पर लउट जाला, संगे 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"> भेजेला, एहसे रउआ आपन बैकएंड के छुअले बिना मूल नियंत्रण के भीतर भा बाहर बदल सकीले।

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.

टूलटिप अंदर बनल बा

हर चयनकर्ता आपन लेबल टूलटिप में देखावेला जब पॉइंटर ओकर बटन पर टिके भा बटन पर कीबोर्ड फोकस होखे। पॉइंटर ओकरा पर जाए तक टूलटिप टिकल रहेला, फोकस कहीं रहो 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>

जाँचल: locale-picker, text-size-picker, share-picker, date-time-picker आ संयुक्त पैनल के टुकड़ा प्रकाशित 0.1.1 पैकेज के खिलाफ अलग-अलग कंपाइल कइल गइल, एकरा से svelte/server (2026-08-29); motion-picker, search-picker आ picker-bar के टुकड़ा 2026-10-06 के पैकेज के आपन घटक के खिलाफ रेंडर कइल गइल।

कहाँ मिली

# 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 खंड से जुड़ल परीक्षण, चलावे लायक उदाहरण (SSR कुकी पैटर्न समेत) आ बिल्ड + प्रकाशन पाइपलाइन बा। Svelte पैकेज मानक बाड़ें; संदेह में उनकर करार जीतेला।

अगिला कदम

रास्ता में सवाल बा? मदद पन्ना जवाब से भरल बा — आ अगर कवनो कदम अउरी साफ हो सकेला, हमनी के बताईं आ हमनी खुशी से ट्यूटोरियल सुधारब।