પસંદગી સહાયકો

તમે શું બનાવશો

એક સેટિંગ્સ પેનલ જ્યાં વપરાશકર્તાઓ પોતાની ભાષા અને લખાણનું કદ પસંદ કરે છે — પસંદગીઓ જે આખા દસ્તાવેજ પર લાગુ પડે છે, મુલાકાતો વચ્ચે ટકી રહે છે અને તમને બે ઘટકો અને થોડી 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 શા માટે — અને પ્રોજેક્ટને કેવી રીતે ટેકો આપવો.

રસ્તામાં પ્રશ્નો છે? મદદ પૃષ્ઠ જવાબોથી ભરેલું છે — અને જો કોઈ પગલું વધુ સ્પષ્ટ થઈ શકે, અમને કહો અને અમે ખુશીથી ટ્યુટોરિયલ સુધારીશું.