مفتاح Switch

يُستخدم LhSwitch للتبديل بين حالتين متعارضتين.

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

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

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

const status = ref(false)
</script>

<template>
  <!-- مفتاح أساسي -->
  <LhSwitch v-model="status" />
</template>

<script>
export default {
  data() {
    return { status: false }
  },
}
</script>

<template>
  <!-- مفتاح أساسي -->
  <LhSwitch v-model="status" />
</template>

تسمية نصية

تسمية نصية

تشغيل

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

const notification = ref(true)
</script>

<template>
  <LhSwitch v-model="notification" active-text="تشغيل" inactive-text="إيقاف" />
</template>

<script>
export default {
  data() {
    return { notification: true }
  },
}
</script>

<template>
  <LhSwitch v-model="notification" active-text="تشغيل" inactive-text="إيقاف" />
</template>

الحجم

الحجم

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

const smallVal = ref(false)
const mediumVal = ref(false)
const largeVal = ref(false)
</script>

<template>
  <LhSwitch v-model="smallVal" size="small" />
  <LhSwitch v-model="mediumVal" size="medium" />
  <LhSwitch v-model="largeVal" size="large" />
</template>

<script>
export default {
  data() {
    return {
      smallVal: false,
      mediumVal: false,
      largeVal: false,
    }
  },
}
</script>

<template>
  <LhSwitch v-model="smallVal" size="small" />
  <LhSwitch v-model="mediumVal" size="medium" />
  <LhSwitch v-model="largeVal" size="large" />
</template>

التعطيل والتحميل

التعطيل والتحميل

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

const disabledVal = ref(true)
const loadingVal = ref(true)
const swName = ref(false)
</script>

<template>
  <LhSwitch v-model="disabledVal" disabled />
  <LhSwitch v-model="loadingVal" loading />
</template>

<script>
export default {
  data() {
    return {
      disabledVal: true,
      loadingVal: true,
    }
  },
}
</script>

<template>
  <LhSwitch v-model="disabledVal" disabled />
  <LhSwitch v-model="loadingVal" loading />
</template>

سمة مخصصة

تطبيق لون سمة مخصص على المفتاح.

سمة青花瓷 (الخزف الأزرق)

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

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

<template>
  <!-- سمة الخزف الأزرق -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhSwitch v-model="status" />
  </LhConfigProvider>
</template>

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

export default {
  components: { LhConfigProvider, LhSwitch },
  data() {
    return {
      status: false,
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <!-- سمة الخزف الأزرق -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhSwitch v-model="status" />
  </LhConfigProvider>
</template>

التدويل

ضبط حزمة اللغة العامة عبر LhConfigProvider.

التدويل

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhSwitch, LhButton } 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 messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
const status = ref(false)
</script>

<template>
  <!-- إعداد حزمة اللغة -->
  <LhConfigProvider :locale="messages">
    <LhSwitch v-model="status" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      تبديل اللغة
    </LhButton>
  </LhConfigProvider>
</template>

<script>
import { ref, computed } from 'vue'
import { LhConfigProvider, LhSwitch, LhButton } 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 {
  components: { LhConfigProvider, LhSwitch, LhButton },
  data() {
    return {
      locale: 'ar',
      status: false,
    }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <!-- إعداد حزمة اللغة -->
  <LhConfigProvider :locale="messages">
    <LhSwitch v-model="status" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      تبديل اللغة
    </LhButton>
  </LhConfigProvider>
</template>

name الأصلي

يضبط name خاصية name للعنصر input الأصلي (لاستخدام إرسال النموذج).

name

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

const value = ref(false)
</script>

<template>
  <LhSwitch v-model="value" name="notifications" />
</template>

<script>
export default {
  data() {
    return { value: false }
  },
}
</script>

<template>
  <LhSwitch v-model="value" name="notifications" />
</template>

API

Props

الخاصية	الوصف	النوع	الافتراضي
modelValue	الحالة الحالية	boolean	false
disabled	تعطيل	boolean	false
loading	أثناء التحميل	boolean	false
name	اسم النموذج الأصلي	string	''
size	الحجم	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
activeText	النص عند التشغيل	string	''
inactiveText	النص عند الإيقاف	string	''
sx	خصائص التخطيط السريع sx	LhSxProps	—

Events

اسم الحدث	الوصف	وسائط الاستدعاء
update:modelValue	تتغير الحالة	(value: boolean)
change	تتغير الحالة	(value: boolean)

يُطلق حدث update:modelValue (قيمة منطقية جديدة) وحدث change. يدعم التبديل عبر المفتاحين Enter وSpace في لوحة المفاتيح.

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

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

LhSwitchProps

export interface LhSwitchProps {
  modelValue?: boolean
  disabled?: boolean
  loading?: boolean
  name?: string
  size?: LhComponentSize
  activeText?: string
  inactiveText?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhSwitchSize

export type LhSwitchSize = LhComponentSize

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

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