زر Button

مكوّن الأزرار، يدعم أنواعًا وأحجامًا وحالات متعددة بالإضافة إلى ألوان سمة النمط الصيني.

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

vue

<script setup lang="ts">
</script>

<template>
  <!-- افتراضي -->
  <LhButton>زر افتراضي</LhButton>
  <!-- primary -->
  <LhButton type="primary">زر رئيسي</LhButton>
  <!-- success -->
  <LhButton type="success">زر نجاح</LhButton>
  <!-- warning -->
  <LhButton type="warning">زر تحذير</LhButton>
  <!-- danger -->
  <LhButton type="danger">زر خطر</LhButton>
  <!-- info -->
  <LhButton type="info">زر معلومات</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- افتراضي -->
  <LhButton>زر افتراضي</LhButton>
  <!-- primary -->
  <LhButton type="primary">زر رئيسي</LhButton>
  <!-- success -->
  <LhButton type="success">زر نجاح</LhButton>
  <!-- warning -->
  <LhButton type="warning">زر تحذير</LhButton>
  <!-- danger -->
  <LhButton type="danger">زر خطر</LhButton>
  <!-- info -->
  <LhButton type="info">زر معلومات</LhButton>
</template>

أحجام مختلفة

vue

<script setup lang="ts">
</script>

<template>
  <LhButton size="large">زر كبير</LhButton>
  <LhButton>زر افتراضي</LhButton>
  <LhButton size="small">زر صغير</LhButton>
  <LhButton size="mini">زر مصغّر</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton size="large">زر كبير</LhButton>
  <LhButton>زر افتراضي</LhButton>
  <LhButton size="small">زر صغير</LhButton>
  <LhButton size="mini">زر مصغّر</LhButton>
</template>

أزرار بسيطة

vue

<script setup lang="ts">
</script>

<template>
  <LhButton plain>زر بسيط</LhButton>
  <LhButton type="primary" plain>زر رئيسي</LhButton>
  <LhButton type="success" plain>زر نجاح</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton plain>زر بسيط</LhButton>
  <LhButton type="primary" plain>زر رئيسي</LhButton>
  <LhButton type="success" plain>زر نجاح</LhButton>
</template>

أزرار دائرية

vue

<script setup lang="ts">
</script>

<template>
  <LhButton circle>دائري</LhButton>
  <LhButton type="primary" circle>رئيسي</LhButton>
  <LhButton type="success" circle>نجاح</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton circle>دائري</LhButton>
  <LhButton type="primary" circle>رئيسي</LhButton>
  <LhButton type="success" circle>نجاح</LhButton>
</template>

حالة التحميل

vue

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

const loading1 = ref(false)
</script>

<template>
  <!-- تحميل عند النقر -->
  <LhButton :loading="loading1" @click="loading1 = true">تحميل عند النقر</LhButton>
  <!-- جارٍ التحميل -->
  <LhButton type="primary" loading>جارٍ التحميل</LhButton>
</template>

vue

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

<template>
  <!-- تحميل عند النقر -->
  <LhButton :loading="loading1" @click="loading1 = true">تحميل عند النقر</LhButton>
  <!-- جارٍ التحميل -->
  <LhButton type="primary" loading>جارٍ التحميل</LhButton>
</template>

حالة التعطيل

vue

<script setup lang="ts">
</script>

<template>
  <LhButton disabled>زر معطّل</LhButton>
  <LhButton type="primary" disabled>زر رئيسي</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton disabled>زر معطّل</LhButton>
  <LhButton type="primary" disabled>زر رئيسي</LhButton>
</template>

زر Block

vue

<script setup lang="ts">
</script>

<template>
  <!-- زر كتلة -->
  <LhButton block>زر كتلة</LhButton>
  <!-- زر كتلة رئيسي -->
  <LhButton type="primary" block>زر كتلة رئيسي</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- زر كتلة -->
  <LhButton block>زر كتلة</LhButton>
  <!-- زر كتلة رئيسي -->
  <LhButton type="primary" block>زر كتلة رئيسي</LhButton>
</template>

أزرار بزوايا مدورة

يمنح round شكلًا بزوايا مدوّرة كبيرة (مختلف عن circle الذي يصنع دائرة كاملة).

vue

<script setup lang="ts">
</script>

<template>
  <LhButton round>زر بزوايا مدورة</LhButton>
  <LhButton type="primary" round>زر رئيسي بزوايا مدورة</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton round>زر بزوايا مدورة</LhButton>
  <LhButton type="primary" round>زر رئيسي بزوايا مدورة</LhButton>
</template>

زر بأيقونة

يقبل icon اسم الأيقونة، كما يمكن استخدام فتحة #icon لتصيير مخصص.

vue

<script setup lang="ts">
</script>

<template>
  <!-- بحث -->
  <LhButton icon="search">بحث</LhButton>
  <!-- المفضلة -->
  <LhButton type="primary" icon="star">المفضلة</LhButton>
  <!-- فتحة أيقونة مخصصة -->
  <LhButton circle>
    <template #icon>🔍</template>
  </LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- بحث -->
  <LhButton icon="search">بحث</LhButton>
  <!-- المفضلة -->
  <LhButton type="primary" icon="star">المفضلة</LhButton>
  <!-- فتحة أيقونة مخصصة -->
  <LhButton circle>
    <template #icon>🔍</template>
  </LhButton>
</template>

زر رابط

عند ضبط href يُصوَّر كعنصر <a>، ويتحكم target في طريقة الفتح؛ وعند عدم ضبط href يحدد native-type نوع الزر الأصلي.

GitHub

vue

<script setup lang="ts">
</script>

<template>
  <LhButton href="https://github.com/lhgb-top/lh-ui-plus" target="_blank">GitHub</LhButton>
  <LhButton native-type="submit" type="primary">إرسال</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton href="https://github.com/lhgb-top/lh-ui-plus" target="_blank">GitHub</LhButton>
  <LhButton native-type="submit" type="primary">إرسال</LhButton>
</template>

التخطيط السريع sx

يضبط sx المسافات والأحجام سريعًا دون الحاجة إلى كتابة CSS إضافي.

vue

<script setup lang="ts">
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">هامش علوي 2، هامش أفقي 1</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">هامش علوي 2، هامش أفقي 1</LhButton>
</template>

يعتمد sx على أساس 8px: mt: 2 ← marginTop: 16px، وmx: 1 ← marginLeft: 8px; marginRight: 8px. للاطلاع على الخصائص كاملة راجع التخطيط السريع sx.

سمة مخصصة

تطبيق لون سمة مخصص على الزر، عبر خاصية themeVars في LhConfigProvider لتجاوز متغيرات CSS.

vue

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

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

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- زر الخزف الأزرق -->
    <LhButton type="primary">زر الخزف الأزرق</LhButton>
    <!-- نجاح -->
    <LhButton type="success">نجاح</LhButton>
  </LhConfigProvider>
</template>

vue

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

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

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- زر الخزف الأزرق -->
    <LhButton type="primary">زر الخزف الأزرق</LhButton>
    <!-- نجاح -->
    <LhButton type="success">نجاح</LhButton>
  </LhConfigProvider>
</template>

لمزيد من السمات راجع تخصيص السمة.

التدويل

يمكن تدويل نص الزر عبر LhConfigProvider مع حزم اللغات.

vue

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

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <LhConfigProvider :locale="messages">
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

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

export default {
  components: { LhConfigProvider, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="messages">
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

واجهة برمجة تطبيقات Button

الخصائص

الخاصية	الوصف	النوع	الافتراضي
type	نوع الزر	`"success" \| "warning" \| "error" \| "info" \| "danger" \| "default" \| "primary"`	`LH_BUTTON_TYPE_CONST.default`
size	حجم الزر، يُورَّث من ConfigProvider عند عدم تمريره	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	—
loading	حالة التحميل	`boolean`	`false`
disabled	حالة التعطيل	`boolean`	`false`
plain	ما إذا كان زرًا بسيطًا	`boolean`	`false`
block	ما إذا كان على مستوى الكتلة	`boolean`	`false`
round	ما إذا كان زرًا بزوايا مدورة	`boolean`	`false`
circle	ما إذا كان زرًا دائريًا	`boolean`	`false`
icon	اسم الأيقونة (أيقونات LhIcon المدمجة، مثل `search`؛ وعند الحاجة إلى تصيير مخصص استخدم فتحة `icon` للتجاوز)	`LhIconName`	—
nativeType	نوع الزر الأصلي (يعمل فقط عند عدم تمرير `href`)	`"button" \| "submit" \| "reset"`	`'button'`
href	عنوان الرابط (عند تمريره يُصوَّر كعنصر `<a>` بدلًا من `<button>`)	`string`	`''`
target	طريقة فتح الرابط	`string`	`'_self'`
themeVars	متغيرات السمة على مستوى المكوّن، تجاوز تكوين ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	خلفية النمط على مستوى المكوّن، تجاوز تكوين ConfigProvider	`string`	—
sx	خصائص التخطيط السريع sx	`LhSxProps`	—

الأحداث

الحدث	الوصف	معاملات الاستدعاء
click	حدث النقر	`(event: MouseEvent)`

الفتحات

الفتحة	الوصف
default	محتوى الزر
icon	تصيير أيقونة مخصص (يتجاوز `LhIcon` الافتراضي لخاصية `icon`)

إمكانية الوصول

حلقة تركيز لوحة المفاتيح: يوفّر العنصر الجذري حلقة تركيز :focus-visible بشكل موحّد (تُعرض عند التنقّل بلوحة المفاتيح ولا تُعرض عند النقر بالفأرة)، ملوّنة بمتغير السمة --lh-primary-color، وتتبع الوضع الفاتح/الداكن تلقائيًا دون إعداد إضافي
تسمية الأزرار ذات الأيقونات: عندما يحتوي الزر على أيقونة فقط دون نص (مثل الأزرار الدائرية ذات الأيقونات)، لا يستطيع قارئ الشاشة معرفة الغرض، لذا يجب تمرير aria-label، وهذه الخاصية تُمرَّر تلقائيًا إلى العنصر الجذري. خاصية icon تقبل مباشرةً اسم أيقونة مدمجة (مثل icon="search")؛ وعند الحاجة إلى تصيير مخصص للأيقونة تُستخدم فتحة icon:
vue
```
<LhButton circle aria-label="بحث">
  <template #icon>
    <LhIcon name="search" />
  </template>
</LhButton>
```
خفض مستوى الحركة: يحترم رسم التحميل إعداد النظام prefers-reduced-motion (يتوقف الدوران عند تقليل الحركة)

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

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

LhButtonProps

export interface LhButtonProps {
  type?: LhButtonType
  /** الحجم، اختياري. يُورَّث من ConfigProvider عند عدم تمريره */
  size?: LhButtonSize
  loading?: boolean
  disabled?: boolean
  plain?: boolean
  block?: boolean
  round?: boolean
  circle?: boolean
  /** اسم الأيقونة (أيقونات LhIcon المدمجة، مثل `search`؛ وعند الحاجة إلى تصيير مخصص استخدم فتحة `icon` للتجاوز) */
  icon?: LhIconName
  nativeType?: 'button' | 'submit' | 'reset'
  href?: string
  target?: string
  /** متغيرات السمة على مستوى المكوّن، تجاوز themeVars و componentTheme العامة في ConfigProvider */
  themeVars?: Record<string, string>
  /** خلفية النمط على مستوى المكوّن، تجاوز تكوين ConfigProvider (لا تخضع لقائمة patternComponents المسموح بها) */
  bgPattern?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhButtonType

export type LhButtonType = (typeof LH_BUTTON_TYPE_CONST)[keyof typeof LH_BUTTON_TYPE_CONST]

LhButtonSize

export type LhButtonSize = (typeof LH_BUTTON_SIZE_CONST)[keyof typeof LH_BUTTON_SIZE_CONST]

LhIconName _{(مأخوذ من @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

زر Button ​

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

أحجام مختلفة ​

أزرار بسيطة ​

أزرار دائرية ​

حالة التحميل ​

حالة التعطيل ​

زر Block ​

أزرار بزوايا مدورة ​

زر بأيقونة ​

زر رابط ​

التخطيط السريع sx ​

سمة مخصصة ​

التدويل ​

واجهة برمجة تطبيقات Button ​

الخصائص ​

الأحداث ​

الفتحات ​

إمكانية الوصول ​

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