表单组件

表单组件用于创建各种输入控件，包括文本输入、选择器、日期选择等。

输入组件

TextInput - 文本输入框

创建单行文本输入框，支持格式化。

基本用法

TextInput()
    .placeholder("请输入内容")
    .value("")
    .format("text")
    .onChange(handleChange)
{
    // 输入框内容
}

属性列表

属性	接受类型	默认值	说明
value	string	""	输入值
defaultValue	string	""	默认值
placeholder	string	""	占位符
format	string	"text"	输入格式
pattern	string	""	自定义校验正则
minLength	int	0	最小长度
maxLength	int	0	最大长度
disabled	bool	false	禁用状态
readonly	bool	false	只读状态
required	bool	false	必填状态
error	bool	false	错误状态
loading	bool	false	加载状态
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	8	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#ffffff"	背景颜色
color	string	"#333333"	文字颜色
borderRadius	string, int, singlef	4	圆角
border	string	"1px solid #d1d5db"	边框
fontSize	string, int, singlef	14	字体大小
fontFamily	string	"inherit"	字体族
onChange	func	null	变化事件
onFocus	func	null	聚焦事件
onBlur	func	null	失焦事件
onClick	func	null	点击事件

输入格式值

值	说明
text	普通文本
password	密码
number	数字
email	邮箱
phone	电话

示例

Col()
    .gap(16)
{
    TextInput()
        .placeholder("请输入用户名")
        .value("")
        .format("text")
        .required(true)
        .onChange((value: string) => {
            print("用户名: " + value);
        })
    
    TextInput()
        .placeholder("请输入密码")
        .value("")
        .format("password")
        .required(true)
        .onChange((value: string) => {
            print("密码: " + value);
        })
    
    TextInput()
        .placeholder("请输入邮箱")
        .value("")
        .format("email")
        .pattern("[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}")
        .onChange((value: string) => {
            print("邮箱: " + value);
        })
}

TextArea - 多行文本输入

创建多行文本输入框。

基本用法

TextArea()
    .placeholder("请输入多行内容")
    .value("")
    .rows(4)
    .onChange(handleChange)
{
    // 文本区域内容
}

属性列表

属性	接受类型	默认值	说明
value	string	""	输入值
defaultValue	string	""	默认值
placeholder	string	""	占位符
rows	int	3	行数
cols	int	0	列数
minLength	int	0	最小长度
maxLength	int	0	最大长度
disabled	bool	false	禁用状态
readonly	bool	false	只读状态
required	bool	false	必填状态
error	bool	false	错误状态
loading	bool	false	加载状态
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	8	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#ffffff"	背景颜色
color	string	"#333333"	文字颜色
borderRadius	string, int, singlef	4	圆角
border	string	"1px solid #d1d5db"	边框
fontSize	string, int, singlef	14	字体大小
fontFamily	string	"inherit"	字体族
resize	string	"vertical"	调整大小
onChange	func	null	变化事件
onFocus	func	null	聚焦事件
onBlur	func	null	失焦事件

调整大小值

值	说明
none	不可调整
both	双向调整
horizontal	水平调整
vertical	垂直调整

示例

TextArea()
    .placeholder("请输入您的留言...")
    .value("")
    .rows(5)
    .maxLength(500)
    .required(true)
    .onChange((value: string) => {
        print("留言内容: " + value);
    })

Search - 搜索输入框

创建带搜索功能的输入框。

基本用法

Search()
    .placeholder("搜索...")
    .value("")
    .onSearch(handleSearch)
    .onChange(handleChange)
{
    // 搜索框内容
}

属性列表

属性	接受类型	默认值	说明
value	string	""	搜索值
defaultValue	string	""	默认值
placeholder	string	"搜索..."	占位符
disabled	bool	false	禁用状态
loading	bool	false	加载状态
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	8	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#ffffff"	背景颜色
color	string	"#333333"	文字颜色
borderRadius	string, int, singlef	4	圆角
border	string	"1px solid #d1d5db"	边框
fontSize	string, int, singlef	14	字体大小
fontFamily	string	"inherit"	字体族
onSearch	func	null	搜索事件
onChange	func	null	变化事件
onFocus	func	null	聚焦事件
onBlur	func	null	失焦事件

示例

Search()
    .placeholder("搜索产品...")
    .value("")
    .width("300px")
    .onSearch((keyword: string) => {
        print("搜索关键词: " + keyword);
    })
    .onChange((value: string) => {
        print("输入内容: " + value);
    })

选择组件

Select - 下拉选择框

创建下拉选择框。

基本用法

Select()
    .options(["选项1", "选项2", "选项3"])
    .value("")
    .placeholder("请选择")
    .onChange(handleChange)
{
    // 选择框内容
}

属性列表

属性	接受类型	默认值	说明
options	arr	[]	选项列表
value	string, int, singlef	""	选中值
defaultValue	string, int, singlef	""	默认值
placeholder	string	"请选择"	占位符
disabled	bool	false	禁用状态
loading	bool	false	加载状态
error	bool	false	错误状态
required	bool	false	必填状态
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	8	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#ffffff"	背景颜色
color	string	"#333333"	文字颜色
borderRadius	string, int, singlef	4	圆角
border	string	"1px solid #d1d5db"	边框
fontSize	string, int, singlef	14	字体大小
fontFamily	string	"inherit"	字体族
onChange	func	null	变化事件
onFocus	func	null	聚焦事件
onBlur	func	null	失焦事件

示例

Select()
    .options(["北京", "上海", "广州", "深圳"])
    .value("")
    .placeholder("请选择城市")
    .required(true)
    .onChange((value: string) => {
        print("选择的城市: " + value);
    })

MultiSelect - 多选下拉框

创建多选下拉框。

基本用法

MultiSelect()
    .options(["选项1", "选项2", "选项3"])
    .value([])
    .placeholder("请选择多个选项")
    .onChange(handleChange)
{
    // 多选框内容
}

属性列表

属性	接受类型	默认值	说明
options	arr	[]	选项列表
value	arr	[]	选中值数组
defaultValue	arr	[]	默认值数组
placeholder	string	"请选择多个选项"	占位符
disabled	bool	false	禁用状态
loading	bool	false	加载状态
error	bool	false	错误状态
required	bool	false	必填状态
maxSelections	int	0	最大选择数量
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	8	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#ffffff"	背景颜色
color	string	"#333333"	文字颜色
borderRadius	string, int, singlef	4	圆角
border	string	"1px solid #d1d5db"	边框
fontSize	string, int, singlef	14	字体大小
fontFamily	string	"inherit"	字体族
onChange	func	null	变化事件
onFocus	func	null	聚焦事件
onBlur	func	null	失焦事件

示例

MultiSelect()
    .options(["JavaScript", "TypeScript", "Python", "Java", "C++"])
    .value([])
    .placeholder("请选择编程语言")
    .maxSelections(3)
    .onChange((values: string[]) => {
        print("选择的语言: " + values.join(", "));
    })

Radio - 单选按钮组

创建单选按钮组。

基本用法

Radio()
    .options(["选项1", "选项2", "选项3"])
    .value("")
    .name("radioGroup")
    .onChange(handleChange)
{
    // 单选按钮组内容
}

属性列表

属性	接受类型	默认值	说明
options	arr	[]	选项列表
value	string, int, singlef	""	选中值
defaultValue	string, int, singlef	""	默认值
name	string	""	组名
disabled	bool	false	禁用状态
required	bool	false	必填状态
orientation	string	"vertical"	排列方向
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
gap	string, int, singlef	8	选项间距
color	string	"#007bff"	选中颜色
fontSize	string, int, singlef	14	字体大小
fontFamily	string	"inherit"	字体族
onChange	func	null	变化事件

排列方向值

值	说明
vertical	垂直排列
horizontal	水平排列

示例

Radio()
    .options(["男", "女", "其他"])
    .value("")
    .name("gender")
    .orientation("horizontal")
    .required(true)
    .onChange((value: string) => {
        print("选择的性别: " + value);
    })

Checkbox - 复选框组

创建复选框组。

基本用法

Checkbox()
    .options(["选项1", "选项2", "选项3"])
    .value([])
    .onChange(handleChange)
{
    // 复选框组内容
}

属性列表

属性	接受类型	默认值	说明
options	arr	[]	选项列表
value	arr	[]	选中值数组
defaultValue	arr	[]	默认值数组
disabled	bool	false	禁用状态
required	bool	false	必填状态
orientation	string	"vertical"	排列方向
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
gap	string, int, singlef	8	选项间距
color	string	"#007bff"	选中颜色
fontSize	string, int, singlef	14	字体大小
fontFamily	string	"inherit"	字体族
onChange	func	null	变化事件

示例

Checkbox()
    .options(["阅读", "运动", "音乐", "旅行"])
    .value([])
    .orientation("vertical")
    .onChange((values: string[]) => {
        print("选择的爱好: " + values.join(", "));
    })

Switch - 开关组件

创建开关组件。

基本用法

Switch()
    .value(false)
    .onChange(handleChange)
{
    // 开关内容
}

属性列表

属性	接受类型	默认值	说明
value	bool	false	开关状态
defaultValue	bool	false	默认状态
disabled	bool	false	禁用状态
loading	bool	false	加载状态
size	string	"medium"	尺寸
color	string	"#007bff"	开启颜色
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
onChange	func	null	变化事件

尺寸值

值	说明
small	小尺寸
medium	中等尺寸
large	大尺寸

示例

Row()
    .gap(12)
    .align("center")
{
    Text("启用通知")
    Switch()
        .value(false)
        .size("medium")
        .onChange((value: boolean) => {
            print("通知状态: " + value.toString());
        })
}

Slider - 滑块组件

创建滑块组件。

基本用法

Slider()
    .value(50)
    .min(0)
    .max(100)
    .step(1)
    .onChange(handleChange)
{
    // 滑块内容
}

属性列表

属性	接受类型	默认值	说明
value	int, singlef	0	当前值
defaultValue	int, singlef	0	默认值
min	int, singlef	0	最小值
max	int, singlef	100	最大值
step	int, singlef	1	步进值
disabled	bool	false	禁用状态
loading	bool	false	加载状态
orientation	string	"horizontal"	方向
size	string	"medium"	尺寸
color	string	"#007bff"	滑块颜色
trackColor	string	"#e9ecef"	轨道颜色
thumbColor	string	"#ffffff"	滑块颜色
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
onChange	func	null	变化事件

方向值

值	说明
horizontal	水平方向
vertical	垂直方向

示例

Col()
    .gap(16)
{
    Text("音量: 50%")
    Slider()
        .value(50)
        .min(0)
        .max(100)
        .step(1)
        .width("200px")
        .onChange((value: number) => {
            print("音量: " + value.toString() + "%");
        })
}

Range - 范围选择器

创建范围选择器。

基本用法

Range()
    .value([20, 80])
    .min(0)
    .max(100)
    .step(1)
    .onChange(handleChange)
{
    // 范围选择器内容
}

属性列表

属性	接受类型	默认值	说明
value	arr	[0, 100]	当前范围值
defaultValue	arr	[0, 100]	默认范围值
min	int, singlef	0	最小值
max	int, singlef	100	最大值
step	int, singlef	1	步进值
disabled	bool	false	禁用状态
loading	bool	false	加载状态
orientation	string	"horizontal"	方向
size	string	"medium"	尺寸
color	string	"#007bff"	范围颜色
trackColor	string	"#e9ecef"	轨道颜色
thumbColor	string	"#ffffff"	滑块颜色
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	0	内边距
margin	string, int, singlef	0	外边距
onChange	func	null	变化事件

示例

Col()
    .gap(16)
{
    Text("价格范围: 20 - 80")
    Range()
        .value([20, 80])
        .min(0)
        .max(100)
        .step(5)
        .width("300px")
        .onChange((values: number[]) => {
            print("价格范围: " + values[0].toString() + " - " + values[1].toString());
        })
}

日期时间组件

DatePicker - 日期选择器

创建日期选择器。

基本用法

DatePicker()
    .value("")
    .placeholder("请选择日期")
    .format("YYYY-MM-DD")
    .onChange(handleChange)
{
    // 日期选择器内容
}

属性列表

属性	接受类型	默认值	说明
value	string	""	选中日期
defaultValue	string	""	默认日期
placeholder	string	"请选择日期"	占位符
format	string	"YYYY-MM-DD"	日期格式
minDate	string	""	最小日期
maxDate	string	""	最大日期
disabled	bool	false	禁用状态
loading	bool	false	加载状态
error	bool	false	错误状态
required	bool	false	必填状态
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	8	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#ffffff"	背景颜色
color	string	"#333333"	文字颜色
borderRadius	string, int, singlef	4	圆角
border	string	"1px solid #d1d5db"	边框
fontSize	string, int, singlef	14	字体大小
fontFamily	string	"inherit"	字体族
onChange	func	null	变化事件
onFocus	func	null	聚焦事件
onBlur	func	null	失焦事件

示例

DatePicker()
    .value("")
    .placeholder("请选择生日")
    .format("YYYY-MM-DD")
    .minDate("1900-01-01")
    .maxDate("2024-12-31")
    .required(true)
    .onChange((date: string) => {
        print("选择的日期: " + date);
    })

TimePicker - 时间选择器

创建时间选择器。

基本用法

TimePicker()
    .value("")
    .placeholder("请选择时间")
    .format("HH:mm")
    .onChange(handleChange)
{
    // 时间选择器内容
}

属性列表

属性	接受类型	默认值	说明
value	string	""	选中时间
defaultValue	string	""	默认时间
placeholder	string	"请选择时间"	占位符
format	string	"HH:mm"	时间格式
disabled	bool	false	禁用状态
loading	bool	false	加载状态
error	bool	false	错误状态
required	bool	false	必填状态
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	8	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#ffffff"	背景颜色
color	string	"#333333"	文字颜色
borderRadius	string, int, singlef	4	圆角
border	string	"1px solid #d1d5db"	边框
fontSize	string, int, singlef	14	字体大小
fontFamily	string	"inherit"	字体族
onChange	func	null	变化事件
onFocus	func	null	聚焦事件
onBlur	func	null	失焦事件

示例

TimePicker()
    .value("")
    .placeholder("请选择会议时间")
    .format("HH:mm")
    .required(true)
    .onChange((time: string) => {
        print("选择的时间: " + time);
    })

DateTimePicker - 日期时间选择器

创建日期时间选择器。

基本用法

DateTimePicker()
    .value("")
    .placeholder("请选择日期时间")
    .format("YYYY-MM-DD HH:mm")
    .onChange(handleChange)
{
    // 日期时间选择器内容
}

属性列表

属性	接受类型	默认值	说明
value	string	""	选中日期时间
defaultValue	string	""	默认日期时间
placeholder	string	"请选择日期时间"	占位符
format	string	"YYYY-MM-DD HH:mm"	日期时间格式
minDate	string	""	最小日期
maxDate	string	""	最大日期
disabled	bool	false	禁用状态
loading	bool	false	加载状态
error	bool	false	错误状态
required	bool	false	必填状态
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	8	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#ffffff"	背景颜色
color	string	"#333333"	文字颜色
borderRadius	string, int, singlef	4	圆角
border	string	"1px solid #d1d5db"	边框
fontSize	string, int, singlef	14	字体大小
fontFamily	string	"inherit"	字体族
onChange	func	null	变化事件
onFocus	func	null	聚焦事件
onBlur	func	null	失焦事件

示例

DateTimePicker()
    .value("")
    .placeholder("请选择预约时间")
    .format("YYYY-MM-DD HH:mm")
    .minDate("2024-01-01 00:00")
    .maxDate("2024-12-31 23:59")
    .required(true)
    .onChange((datetime: string) => {
        print("选择的日期时间: " + datetime);
    })

文件上传组件

FileUpload - 文件上传组件

创建文件上传组件。

基本用法

FileUpload()
    .accept("image/*,.pdf,.doc,.docx")
    .multiple(true)
    .maxSize(10485760)
    .onUpload(handleUpload)
{
    // 文件上传内容
}

属性列表

属性	接受类型	默认值	说明
accept	string	"/"	接受的文件类型
multiple	bool	false	是否支持多文件
maxSize	int	0	最大文件大小(字节)
maxFiles	int	0	最大文件数量
disabled	bool	false	禁用状态
loading	bool	false	加载状态
error	bool	false	错误状态
width	string, int, singlef	"auto"	宽度
height	string, int, singlef	"auto"	高度
padding	string, int, singlef	16	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#f8f9fa"	背景颜色
color	string	"#333333"	文字颜色
borderRadius	string, int, singlef	8	圆角
border	string	"2px dashed #d1d5db"	边框
fontSize	string, int, singlef	14	字体大小
fontFamily	string	"inherit"	字体族
onUpload	func	null	上传事件
onChange	func	null	变化事件

示例

FileUpload()
    .accept("image/*,.pdf,.doc,.docx")
    .multiple(true)
    .maxSize(10485760)
    .maxFiles(5)
    .width("100%")
    .height("120px")
    .onUpload((files: File[]) => {
        print("上传文件数量: " + files.length.toString());
    })

ImageUpload - 图片上传

专门用于图片文件的上传组件。

基本用法

ImageUpload() {
  // 图片上传内容
}

属性列表

属性	接受类型	默认值	说明
accept	string	"image/*"	接受的文件类型
multiple	bool	false	是否支持多文件
maxSize	int	5242880	最大文件大小(字节)
maxFiles	int	1	最大文件数量
preview	bool	true	是否显示预览
crop	bool	false	是否支持裁剪
quality	int, singlef	0.8	图片质量
width	string, int, singlef	200	预览宽度
height	string, int, singlef	200	预览高度
disabled	bool	false	禁用状态
loading	bool	false	加载状态
error	bool	false	错误状态
onUpload	func	null	上传事件
onChange	func	null	变化事件
onCrop	func	null	裁剪事件
padding	string, int, singlef	16	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#f8f9fa"	背景颜色
color	string	"#333333"	文字颜色
borderRadius	string, int, singlef	8	圆角
border	string	"2px dashed #d1d5db"	边框

示例

// 单张图片上传
ImageUpload()
  .accept("image/*")
  .maxSize(2097152) // 2MB
  .preview(true)
  .width(300)
  .height(200)
  .onUpload((file) => {
    // 上传处理
  })

// 多张图片上传
ImageUpload()
  .multiple(true)
  .maxFiles(5)
  .crop(true)
  .quality(0.9)
  .onCrop((croppedImage) => {
    // 裁剪完成
  })

DragDrop - 拖拽上传

支持拖拽上传的文件上传组件。

基本用法

DragDrop() {
  // 拖拽上传内容
}

属性列表

属性	接受类型	默认值	说明
accept	string	"/"	接受的文件类型
multiple	bool	true	是否支持多文件
maxSize	int	0	最大文件大小(字节)
maxFiles	int	0	最大文件数量
disabled	bool	false	禁用状态
loading	bool	false	加载状态
error	bool	false	错误状态
onDrop	func	null	拖拽放置事件
onDragOver	func	null	拖拽悬停事件
onDragLeave	func	null	拖拽离开事件
onUpload	func	null	上传事件
onChange	func	null	变化事件
width	string, int, singlef	"100%"	宽度
height	string, int, singlef	200	高度
padding	string, int, singlef	24	内边距
margin	string, int, singlef	0	外边距
backgroundColor	string	"#f8f9fa"	背景颜色
color	string	"#666666"	文字颜色
borderRadius	string, int, singlef	8	圆角
border	string	"2px dashed #d1d5db"	边框
activeBorder	string	"2px dashed #1890ff"	激活边框

示例

// 基本拖拽上传
DragDrop()
  .accept("image/*,video/*")
  .maxSize(10485760) // 10MB
  .height(300)
  .onDrop((files) => {
    // 处理拖拽文件
  })

// 多文件拖拽上传
DragDrop()
  .multiple(true)
  .maxFiles(10)
  .onDragOver(() => {
    // 拖拽悬停效果
  })
  .onUpload((files) => {
    // 批量上传
  })