ترجیحی معاونین

آپ کیا بنائیں گے

ایک ترتیبات پینل جہاں صارف اپنی زبان اور متن کا سائز چنتے ہیں — انتخاب جو پورے دستاویز پر لاگو ہوتے ہیں، ملاقاتوں کے درمیان قائم رہتے ہیں اور آپ کو دو اجزاء اور چند 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 کیوں — اور منصوبے کی حمایت کیسے کریں۔

راستے میں سوالات ہیں؟ مدد کا صفحہ جوابات سے بھرا ہے — اور اگر کوئی مرحلہ مزید واضح ہو سکتا ہے، ہمیں بتائیں اور ہم خوشی سے ٹیوٹوریل بہتر بنائیں گے۔