ಆದ್ಯತೆ ಸಹಾಯಕಗಳು

ನೀವು ಏನನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ

ಬಳಕೆದಾರರು ತಮ್ಮ ಭಾಷೆ ಮತ್ತು ಪಠ್ಯ ಗಾತ್ರವನ್ನು ಆರಿಸುವ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಪ್ಯಾನೆಲ್ — ಇಡೀ ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸುವ, ಭೇಟಿಗಳ ನಡುವೆ ಉಳಿಯುವ, ಮತ್ತು ನಿಮಗೆ ಎರಡು ಘಟಕಗಳು ಹಾಗೂ ಕೆಲವು 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-ಶುದ್ಧ: ಬಳಕೆದಾರರು ನೋಡುವ ಪ್ರತಿ ಸ್ಟ್ರಿಂಗ್ ಒಂದು ಪ್ರಾಪ್.
• Svelte (ಅಧಿಕೃತ), React, Vue, Angular, HTML ಕಸ್ಟಮ್ ಎಲಿಮೆಂಟ್, Nunjucks ಮತ್ತು Blazor ಗಳಿಗೆ ಲಭ್ಯ — ಪ್ರತಿಯೊಂದರಲ್ಲೂ ಅದೇ ಒಪ್ಪಂದ.

theme-picker, locale-picker, ಮತ್ತು text-size-picker ಪ್ರತಿಯೊಂದೂ ಒಂದು ಬಳಕೆದಾರ ಆದ್ಯತೆಯನ್ನು ಆರಂಭದಿಂದ ಅಂತ್ಯದವರೆಗೆ ಹೊಂದಿದೆ (ಆಯ್ಕೆ, DOM ಅನ್ವಯ, ಐಚ್ಛಿಕ localStorage ಪರ್ಸಿಸ್ಟೆನ್ಸ್ storageKey ಪ್ರಾಪ್ ಮೂಲಕ). 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 — ಮತ್ತು ಯೋಜನೆಯನ್ನು ಹೇಗೆ ಬೆಂಬಲಿಸುವುದು.

ದಾರಿಯಲ್ಲಿ ಪ್ರಶ್ನೆಗಳಿವೆಯೇ? ಸಹಾಯ ಪುಟ ಉತ್ತರಗಳಿಂದ ತುಂಬಿದೆ — ಮತ್ತು ಯಾವುದೇ ಹಂತ ಸ್ಪಷ್ಟವಾಗಬಹುದಾದರೆ, ನಮಗೆ ತಿಳಿಸಿ ಮತ್ತು ನಾವು ಸಂತೋಷದಿಂದ ಟ್ಯುಟೋರಿಯಲ್ ಸುಧಾರಿಸುತ್ತೇವೆ.