شريط تمرير Slider

LhSlider مكوّن شريط تمرير لإنشاء عنصر إدخال مجال، يسحب المستخدم المقبض بين min وmax لاختيار قيمة.

الاستخدام الأساسي

vue

<script setup lang="ts">
import { ref } from 'vue'

const baseValue = ref(0)
</script>

<template>
  <LhSlider v-model="baseValue" />
</template>

vue

<script>
export default {
  data() {
    return { baseValue: 0 }
  },
}
</script>

<template>
  <LhSlider v-model="baseValue" />
</template>

مجال مخصَّص

vue

<script setup lang="ts">
import { ref } from 'vue'

const rangeValue = ref(50)
</script>

<template>
  <LhSlider v-model="rangeValue" :min="10" :max="200" />
</template>

vue

<script>
export default {
  data() {
    return { rangeValue: 50 }
  },
}
</script>

<template>
  <LhSlider v-model="rangeValue" :min="10" :max="200" />
</template>

اختيار مجال

vue

<script setup lang="ts">
import { ref } from 'vue'

const rangeMode = ref([20, 50])
</script>

<template>
  <LhSlider v-model="rangeMode" range />
</template>

vue

<script>
export default {
  data() {
    return { rangeMode: [20, 50] }
  },
}
</script>

<template>
  <LhSlider v-model="rangeMode" range />
</template>

الخطوة

vue

<script setup lang="ts">
import { ref } from 'vue'

const stepValue = ref(0)
</script>

<template>
  <LhSlider v-model="stepValue" :step="10" />
</template>

vue

<script>
export default {
  data() {
    return { stepValue: 0 }
  },
}
</script>

<template>
  <LhSlider v-model="stepValue" :step="10" />
</template>

العلامات

0°C25°C50°C75°C100°C

vue

<script setup lang="ts">
import { ref } from 'vue'

const marksValue = ref(0)
const customMarks = {
  0: '0°C',
  25: '25°C',
  50: '50°C',
  75: '75°C',
  100: '100°C',
}
</script>

<template>
  <LhSlider v-model="marksValue" :marks="customMarks" />
</template>

vue

<script>
export default {
  data() {
    return {
      marksValue: 0,
      customMarks: {
        0: '0°C',
        25: '25°C',
        50: '50°C',
        75: '75°C',
        100: '100°C',
      },
    }
  },
}
</script>

<template>
  <LhSlider v-model="marksValue" :marks="customMarks" />
</template>

إظهار حقل الإدخال

vue

<script setup lang="ts">
import { ref } from 'vue'

const inputValue = ref(50)
</script>

<template>
  <LhSlider v-model="inputValue" show-input />
</template>

vue

<script>
export default {
  data() {
    return { inputValue: 50 }
  },
}
</script>

<template>
  <LhSlider v-model="inputValue" show-input />
</template>

تعطيل

vue

<script setup lang="ts">
import { ref } from 'vue'

const disabledValue = ref(50)
</script>

<template>
  <LhSlider v-model="disabledValue" :value="50" disabled />
</template>

vue

<script>
export default {
  data() {
    return { disabledValue: 50 }
  },
}
</script>

<template>
  <LhSlider v-model="disabledValue" :value="50" disabled />
</template>

الحجم

vue

<script setup lang="ts">
import { ref } from 'vue'

const smallValue = ref(50)
const mediumValue = ref(50)
const largeValue = ref(50)
</script>

<template>
  <LhSlider v-model="smallValue" size="small" />
  <LhSlider v-model="mediumValue" size="medium" />
  <LhSlider v-model="largeValue" size="large" />
</template>

vue

<script>
export default {
  data() {
    return {
      smallValue: 50,
      mediumValue: 50,
      largeValue: 50,
    }
  },
}
</script>

<template>
  <LhSlider v-model="smallValue" size="small" />
  <LhSlider v-model="mediumValue" size="medium" />
  <LhSlider v-model="largeValue" size="large" />
</template>

سمة مخصَّصة

يمكن تطبيق لون سمة مخصَّص على شريط التمرير.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhSlider } from '@lh-ui/vue3'

const value = ref(50)
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhSlider v-model="value" />
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhSlider } from '@lh-ui/vue3'

export default {
  data() {
    return {
      value: 50,
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhSlider v-model="value" />
  </LhConfigProvider>
</template>

التدويل

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhSlider } from '@lh-ui/vue3'
import ar from '@lh-ui/share/locales/lang/ar'
import enUS from '@lh-ui/share/locales/lang/en-US'

const locale = ref('ar')
const value = ref(50)
</script>

<template>
  <!-- إعداد حزمة اللغة -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhSlider v-model="value" />
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhSlider } from '@lh-ui/vue3'
import ar from '@lh-ui/share/locales/lang/ar'
import enUS from '@lh-ui/share/locales/lang/en-US'

export default {
  data() {
    return {
      locale: 'ar',
      value: 50,
      ar: ar,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- إعداد حزمة اللغة -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhSlider v-model="value" />
  </LhConfigProvider>
</template>

Slider API

Props

اسم الخاصية	الوصف	النوع	الافتراضي
modelValue	قيمة شريط التمرير	`number \| [number, number]`	`null`
min	الحد الأدنى	`number`	`0`
max	الحد الأقصى	`number`	`100`
step	قيمة الخطوة	`number`	`1`
disabled	هل يعطَّل	`boolean`	`false`
range	هل يُفعَّل اختيار المجال	`boolean`	`false`
showInput	هل يُعرَض حقل الإدخال	`boolean`	`false`
size	الحجم	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
marks	نقاط العلامات	`{ [x: number]: string; }`	—
sx	خصائص التخطيط السريع (مثل `{ mt: 2, w: '50%' }`)، تتحوّل إلى نمط مضمَّن يُطبَّق على العنصر الجذري	`LhSxProps`	—

Events

اسم الحدث	الوصف	النوع
update:model-value	يُطلق عند تغيّر القيمة	`(value: number \| [number, number]) => void`
change	يُطلق عند تأكيد تغيّر القيمة	`(value: number \| [number, number]) => void`

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن للخارج (مستخرجة تلقائيًا من packages/components/slider/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لتوسيع تعريفه الكامل؛ لأوصاف الخصائص انظر جدول Props أعلاه):

LhSliderProps

export interface LhSliderProps {
  modelValue?: number | [number, number] | null
  min?: number
  max?: number
  step?: number
  disabled?: boolean
  range?: boolean
  showInput?: boolean
  size?: LhComponentSize
  marks?: Record<number, string>
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhSliderSize

export type LhSliderSize = LhComponentSize

LhComponentSize _{(مأخوذ من @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

شريط تمرير Slider ​

الاستخدام الأساسي ​

مجال مخصَّص ​

اختيار مجال ​

الخطوة ​

العلامات ​

إظهار حقل الإدخال ​

تعطيل ​

الحجم ​

سمة مخصَّصة ​

التدويل ​

Slider API ​

Props ​

Events ​

تعريفات الأنواع ​