ప్రాధాన్యత సహాయకాలు

మీరు ఏమి నిర్మిస్తారు

వినియోగదారులు తమ భాష మరియు టెక్స్ట్ పరిమాణాన్ని ఎంచుకునే సెట్టింగ్‌ల ప్యానెల్ — మొత్తం పత్రానికి వర్తించే, సందర్శనల మధ్య నిలిచి ఉండే, మీకు రెండు కాంపోనెంట్లు మరియు కొన్ని 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.

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"> పంపేదానితో ఒకేలా ఉంటుంది, కాబట్టి మీ బ్యాకెండ్‌ను తాకకుండా స్థానిక నియంత్రణను లోపలికి లేదా బయటికి మార్చవచ్చు.

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 ఎందుకు — మరియు ప్రాజెక్ట్‌కు ఎలా మద్దతివ్వాలి.

దారిలో ప్రశ్నలా? సహాయ పేజీ సమాధానాలతో నిండి ఉంది — మరియు ఏదైనా దశను మరింత స్పష్టంగా చేయవచ్చంటే, మాకు చెప్పండి మరియు మేము సంతోషంగా ట్యుటోరియల్‌ను మెరుగుపరుస్తాము.