पसंती साहाय्यक

तुम्ही काय बनवाल

एक सेटिंग्ज पॅनेल जिथे वापरकर्ते भाषा आणि मजकुराचा आकार निवडतात — निवडी ज्या संपूर्ण दस्तऐवजाला लागू होतात, भेटींमध्ये टिकतात आणि तुम्हाला दोन घटक व काही ओळी CSS इतकाच खर्च येतो. सुमारे १५ मिनिटे.

सुरू करण्यापूर्वी

आधी पूर्ण करा फ्रेमवर्क ट्युटोरियल तुमच्या स्टॅकसाठी. खालील नमुने 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.

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 तारीख-निवडक डायलॉग उघडणारे आयकॉन बटण. रचनेनेच लोकेलनुसार बरोबर — महिन्यांची नावे, आठवड्याच्या दिवसांची नावे, आठवड्याचा पहिला दिवस आणि १२ किंवा २४ तासांचे घड्याळ सर्व येथून येतात 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>

ते कुठे मिळतील

# 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 पॅकेजेस प्रमाण आहेत; शंका असल्यास त्यांचे करार जिंकतात.

पुढील पायऱ्या

• घटक कॅटलॉग — सर्व 571 घटकांचा संपूर्ण संदर्भ.
• मदत — समस्या निवारण आणि FAQ.
• Lily का — आणि प्रकल्पाला कसे पाठबळ द्यावे.

वाटेत प्रश्न आहेत? मदत पृष्ठ उत्तरांनी भरलेले आहे — आणि एखादी पायरी अधिक स्पष्ट करता आली तर, आम्हाला सांगा आणि आम्ही आनंदाने ट्युटोरियल सुधारू.