Component Catalog

Showcase of upcoming common components library, providing powerful functional support for Aura Supabass system

按钮

按钮的状态和类型

启用

悬浮

按下

禁用

尺寸变体

使用示例

import { AuraButton } from '@kit/ui/aura-button';
import { Plus } from 'lucide-react';

// 基础按钮
<AuraButton>签到</AuraButton>

// 带图标的按钮
<AuraButton icon={<Plus />}>新增客户</AuraButton>

// 轮廓按钮
<AuraButton variant="outline">取消</AuraButton>

// 禁用按钮
<AuraButton disabled>禁用状态</AuraButton>

// 不同尺寸
<AuraButton size="sm">小按钮</AuraButton>
<AuraButton size="lg">大按钮</AuraButton>

输入

状态、文本、颜色

默认

姓名

错误

电话

位数错误

焦点

姓名

禁用

时间

使用示例

import { AuraInput } from '@kit/ui/aura-input';

// 基础输入框
<AuraInput label="姓名" placeholder="请输入姓名" />

// 错误状态
<AuraInput 
  label="电话" 
  defaultValue="783633878"
  error="位数错误" 
/>

// 禁用状态
<AuraInput 
  label="时间" 
  value="10:30-11:30" 
  disabled 
  readOnly
/>

DatePicker 日期选择器

基于 AuraInput 样式系统的日期选择器组件，支持多种状态和自定义选项。

基础用法

选择日期

带左侧图标

出生日期

错误状态

预约日期

请选择有效的日期

禁用状态

系统日期

自定义格式

美式日期格式

自定义图标

活动日期

代码示例

import { AuraDatePicker } from '@kit/ui/aura-ui';

// 基础用法
<AuraDatePicker
  label="选择日期"
  placeholder="请选择日期"
  value={date}
  onChange={setDate}
/>

// 带图标和错误状态
<AuraDatePicker
  label="出生日期"
  placeholder="请选择出生日期"
  value={birthdate}
  onChange={setBirthdate}
  leftIcon={<UserIcon className="h-4 w-4" />}
  error="请选择有效的日期"
  variant="error"
/>

电话号码输入

基于 AuraInput 样式的电话号码输入组件，支持 E.164 格式和实时验证

基础用法

联系电话

输出值: (空)

预设值

客户电话

输出值: +1234567890

中国手机号

手机号码

输出值: (空)

错误状态

紧急联系人

此字段为必填项

输出值: (空)

禁用状态

系统电话

无图标

备用电话

组件特性

• 自动格式化电话号码显示（如：+1 (234) 567-8900）
• 实时验证电话号码有效性
• 输出标准 E.164 格式（如：+12345678900）
• 支持多国家代码（US、CN 等）
• 集成 Aura UI 设计系统样式
• 支持错误状态和禁用状态
• 可选择是否显示电话图标
• 完整的 TypeScript 支持

使用示例

import { AuraPhoneInput } from '@kit/ui/aura-phone-input';
import { useState } from 'react';

function MyComponent() {
  const [phone, setPhone] = useState('');

  return (
    <AuraPhoneInput
      label="联系电话"
      value={phone}
      onChange={setPhone}
      defaultCountry="CN"
      placeholder="请输入手机号码"
    />
  );
}

下拉选择组件

基于项目设计系统的下拉选择组件，与输入框保持一致的视觉风格

基础下拉选择

选择城市

带图标

选择用户

错误状态

选择类型

请选择有效的类型

禁用状态

固定选项

无标签

长选项列表

选择省份

使用示例

import { AuraSelect } from '@kit/ui/aura-select';
import { User } from 'lucide-react';

// 基础用法
<AuraSelect
  label="选择城市"
  placeholder="请选择城市"
  options={[
    { value: 'beijing', label: '北京' },
    { value: 'shanghai', label: '上海' },
    { value: 'guangzhou', label: '广州' },
  ]}
/>

// 带图标
<AuraSelect
  label="选择用户"
  leftIcon={<User className="h-4 w-4 text-[#7D8592]" />}
  options={userOptions}
  placeholder="请选择用户"
/>

// 错误状态
<AuraSelect
  label="选择类型"
  value="invalid"
  error="请选择有效的类型"
  options={typeOptions}
/>

百分比选择器

支持预设选项和自定义输入的百分比选择组件

基础用法

订单百分比

请选择订单百分比

自定义预设选项

折扣百分比

请选择折扣百分比

带图标

提成百分比

75%

错误状态

无效百分比

请选择百分比

请选择一个有效的百分比

禁用状态

锁定百分比

85%

自定义样式

特殊百分比

请选择百分比

组件特性

预设选项：提供常用的百分比选项（默认：50%, 60%, 70%, 80%）
自定义输入：点击"自定义"按钮可输入任意百分比（1-100%）
动态添加：自定义的百分比会自动添加到选项列表中
键盘支持：支持 Enter 确认、Escape 取消
状态管理：支持错误状态、禁用状态和自定义样式

使用示例

import { AuraPercentageSelect } from '@kit/ui/aura-ui';

function MyComponent() {
  const [percentage, setPercentage] = useState('');

  return (
    <AuraPercentageSelect
      label="订单百分比"
      placeholder="请选择订单百分比"
      value={percentage}
      onChange={setPercentage}
      defaultPercentages={['50%', '60%', '70%', '80%']}
    />
  );
}

文本域组件

基于项目设计系统的文本域组件，与输入框保持一致的视觉风格

基础文本域

用户反馈

错误状态

产品描述

描述内容不符合规范，请重新填写

禁用状态

系统信息

这是系统自动生成的信息，无法编辑。用户可以查看但不能修改此内容。

无标签

自定义高度

详细说明

带字符计数

评论内容

0/200

使用示例

import { AuraTextarea } from '@kit/ui/aura-textarea';

// 基础用法
<AuraTextarea
  label="用户反馈"
  placeholder="请输入您的反馈意见..."
  value={feedback}
  onChange={(e) => setFeedback(e.target.value)}
/>

// 错误状态
<AuraTextarea
  label="产品描述"
  value={description}
  error="描述内容不符合规范，请重新填写"
  onChange={(e) => setDescription(e.target.value)}
/>

// 禁用状态
<AuraTextarea
  label="系统信息"
  value="这是系统自动生成的信息"
  disabled
  readOnly
/>

// 自定义高度
<AuraTextarea
  label="详细说明"
  placeholder="请输入详细说明..."
  rows={6}
  className="min-h-[180px]"
/>