nili/ui
enfaartr
همه‌ی کامپوننت‌ها

Slider

نمای کلی
۹ اکسپورت۳ محور واریانت۲۳ پراپ۴ فایل
import { Slider, SliderValue } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

تک‌دستگیره و بازه‌ای

شکلِ مقدار همان نوع است: یک عدد یک دستگیره می‌سازد و یک [number, number] یک بازه. اسلایدر بازه‌ای به‌طور تصادفی یک عدد تنها نمی‌گیرد.

بلندی صدا۴۰
بازهٔ قیمت۲۰ – ۷۰
import { Slider } from "@nili/ui"

export function Example() {
  const [value, setValue] = useState(40)
  const [range, setRange] = useState([20, 70])

  return (
    <>
      <Slider
        label="Volume"
        value={value}
        onValueChange={setValue}
        showValue
      />

      <Slider
        label="Price"
        value={range}
        onValueChange={setRange}
        showValue
      />
    </>
  )
}

برچسب، زیربرچسب و مقدار

label علاوه بر اینکه بالای ریل دیده می‌شود، دستگیره‌ها را هم نام‌گذاری می‌کند. showValue عدد فعلی را کنارش می‌گذارد و sublabel یک خط دوم کم‌رنگ اضافه می‌کند.

Brightness
روشناییفقط صفحه‌نمایش۶۰
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider label={t('brightness')} defaultValue={60} />
      <Slider label="Brightness" sublabel="Screen only" defaultValue={60} showValue />

      {/* no visible label — name the thumbs instead */}
      <Slider defaultValue={60} thumbLabels={["Brightness"]} />
    </>
  )
}

تولتیپ

tooltip هنگام کشیدن، مقدار را در حبابی بالای دستگیره نشان می‌دهد — وقتی جایی برای نمایش دائمی نیست به کار می‌آید.

Opacity
import { Slider } from "@nili/ui"

export function Example() {
  return <Slider label={t('opacity')} defaultValue={75} tooltip />
}

گام‌ها و کران‌ها

min، max و step همان‌طور رفتار می‌کنند که انتظار دارید. minStepsBetweenThumbs نمی‌گذارد دو سر یک بازه از هم رد شوند.

امتیاز۳
دما۲۰
بودجه۲۰۰ – ۶۰۰
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider label="Rating" min={1} max={5} step={1} defaultValue={3} showValue />
      <Slider label="Temperature" min={-20} max={50} step={5} defaultValue={20} showValue />
      <Slider
        label="Budget"
        min={0}
        max={1000}
        step={50}
        defaultValue={[200, 600]}
        minStepsBetweenThumbs={2}
        showValue
      />
    </>
  )
}

قالب‌بندی

formatValue هر عددی را که کاربر می‌بیند یا می‌شنود عوض می‌کند، نه فقط عدد دیده‌شدنی را. ارقام به‌طور پیش‌فرض از لوکال محیط پیروی می‌کنند، پس رابط فارسی ارقام فارسی را مفت می‌گیرد.

فضای ذخیره120 گیگابایت
تخفیف25%
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider
        label="Storage"
        max={500}
        defaultValue={120}
        showValue
        formatValue={(value) => `${value} GB`}
      />

      <Slider
        label="Discount"
        defaultValue={25}
        showValue
        formatValue={(value) => `${value}%`}
      />
    </>
  )
}

ثبت نهایی و غیرفعال

onValueChange در هر گام حین کشیدن صدا زده می‌شود؛ onValueCommit فقط یک بار، وقتی اشاره‌گر یا کلید رها شود. برای هر کار پرهزینه دومی را بردارید — یک درخواست به‌ازای هر پیکسل کشیدن، راه معمولِ ازپاانداختن سرور با اسلایدر است.

تعداد نتیجه در هر صفحه۲۰
غیرفعال۴۰
بازهٔ غیرفعال
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider
        label="Results per page"
        defaultValue={20}
        max={100}
        step={10}
        showValue
        onValueCommit={(value) => refetch(value)}
      />

      <Slider label="Disabled" defaultValue={40} disabled />
    </>
  )
}