حقل إدخال Input

إدخال المحتوى يدويًا والتحقق منه، مع دعم الوضعين المُتحكم به وغير المُتحكم به، وحد عدد الأحرف، والمسح، والتكيّف متعدد الأسطر وغيرها.

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

إدخال مُتحكم به

القيمة الحالية: (فارغ)

import { useState } from 'react'
import { LhInput } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('')

  return <LhInput value={value} onChange={(val) => setValue(val)} placeholder="حقل إدخال مُتحكم به" />
}

الميزات

مسح / حد الأحرف / كلمة المرور / تكيّف متعدد الأسطر

0/10

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

export default function Demo() {
  return (
    <>
      <LhInput placeholder="قابل للمسح" clearable />
      <LhInput placeholder="حد الأحرف" maxlength={10} showWordLimit />
      <LhInput placeholder="حقل كلمة المرور" type="password" />
      <LhInput
        placeholder="إدخال متعدد الأسطر"
        type="textarea"
        autosize={{ minRows: 2, maxRows: 4 }}
      />
    </>
  )
}

خصائص Input

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
value	القيمة المُتحكم بها	string	—	—
defaultValue	القيمة الافتراضية غير المُتحكم بها	string	—	—
type	النوع الأصلي	'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'search' | 'textarea' | ...	—	'text'
placeholder	العنصر النائب	string	—	قيمة احتياطية من حزمة اللغة (zh-CN: 请输入)
disabled	معطّل	boolean	—	false
readonly	للقراءة فقط	boolean	—	false
maxlength	أقصى طول للإدخال (يُقطع عند تجاوزه)	number	—	—
showWordLimit	إظهار عدّاد الأحرف	boolean	—	false
clearable	قابل للمسح	boolean	—	false
showPassword	إظهار / إخفاء كلمة المرور (عندما يكون type هو password يُعرض زر عين في اللاحقة، وهو ابتكار في React)	boolean	—	false
autosize	ارتفاع متكيّف متعدد الأسطر	boolean | { minRows?: number; maxRows?: number }	—	false
label	علامة عائمة	string	—	—
prefixIcon / suffixIcon	أيقونتان البادئة واللاحقة	LhIconName	—	—
size	الحجم	'large' | 'middle' | 'small'	—	يتبع ConfigProvider
name	خاصية name الأصلية	string	—	—
themeVars	متغيرات السمة على مستوى المكوّن	Record<string, string>	—	—
sx	خصائص التخطيط السريع	SxProps	—	—

أحداث Input

حدث	الوصف	توقيع الاستدعاء	مقابل Vue
onChange	تغيّرت القيمة (وسيطان)	(value: string, event: ChangeEvent) => void	@change
onInput	حدث الإدخال الأصلي	(event: InputEvent) => void	@input
onFocus	تلقّى التركيز	(event: FocusEvent) => void	@focus
onBlur	فقد التركيز	(event: FocusEvent) => void	@blur
onClear	النقر على زر المسح	(event: MouseEvent) => void	@clear
onKeyDown	حدث لوحة المفاتيح الأصلي	(event: KeyboardEvent) => void	@keydown

الوسيطان في onChange

يتساوى onChange(value, event) بنيويًا مع emit('change', [val, e]) في lh-ui-plus مما يسهّل الترحيل. راجع دليل الترحيل.

ref

forwardRef<HTMLInputElement | HTMLTextAreaElement> — العنصر الأصلي القابل للتركيز.

الأنماط

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