زر Button

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

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

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

import { LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhButton>زر افتراضي</LhButton>
      <LhButton type="primary">زر أساسي</LhButton>
      <LhButton type="success">زر نجاح</LhButton>
      <LhButton type="warning">زر تحذير</LhButton>
      <LhButton type="danger">زر خطر</LhButton>
      <LhButton type="info">زر معلومات</LhButton>
    </>
  )
}

الأحجام والحالات

الأحجام والحالات

import { LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhButton size="large">زر كبير</LhButton>
      <LhButton>زر افتراضي</LhButton>
      <LhButton size="small">زر صغير</LhButton>

      <LhButton type="primary" loading>جارٍ التحميل</LhButton>
      <LhButton type="primary" disabled>حالة معطّلة</LhButton>
      <LhButton type="primary" icon="search">زر بأيقونة</LhButton>
      <LhButton type="primary" round>زر بزوايا مدوّرة</LhButton>
      <LhButton type="primary" plain>زر بسيط</LhButton>
    </>
  )
}

خصائص Button

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
type	نوع الزر	'text' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	—	'text'
size	الحجم	'large' | 'middle' | 'small'	—	يتبع ConfigProvider
loading	حالة التحميل	boolean	—	false
disabled	حالة التعطيل	boolean	—	false
plain	الشكل البسيط	boolean	—	false
block	عرض بعرض كامل (width 100%)	boolean	—	false
round	زوايا مدوّرة	boolean	—	false
circle	شكل دائري	boolean	—	false
icon	اسم الأيقونة	LhIconName	—	—
nativeType	خاصية type الأصلية	'button' | 'submit' | 'reset'	—	'button'
href	عند تمريره يُعرض كـ <a>	string	—	—
target	target في وضع href	string	—	—
themeVars	متغيرات السمة على مستوى المكوّن	Record<string, string>	—	—
bgPattern	خلفية النمط على مستوى المكوّن	string	—	—
sx	خصائص التخطيط السريع	SxProps	—	—

أحداث Button

حدث	الوصف	توقيع الاستدعاء	مقابل Vue
onClick	يُطلق عند النقر (لا يُطلق عند disabled / loading)	(event: MouseEvent) => void	@click

الأنماط

import '@lh-ui/react/style/button'