([])
return (
<>
日期
{
console.log('onChange', date, dateStr)
}}
onSelect={console.log}
/>
年份
{
console.log('onChange', date, dateStr)
}}
onSelect={console.log}
/>
季度
{
console.log('onChange', date, dateStr)
}}
onSelect={console.log}
/>
月份
{
console.log('onChange', date, dateStr)
}}
onSelect={console.log}
/>
周
{/* 如果遇到周范围选择选值问题，尝试手动引入 import 'moment/locale/zh-cn' */}
{
console.log('onChange', date, dateStr)
}}
onSelect={console.log}
/>
日期时间范围
{
console.log('onChange', date, dateStr)
}}
onSelect={console.log}
/>
时间段快速选择
{
console.log('onChange', date, dateStr)
}}
/>
动态限制日期范围
{
if (dynamicSelectedValue) {
const timestampCurrent = new Date(val).getTime()
const timestampSelect = new Date(dynamicSelectedValue).getTime()
const range = 7 * 24 * 60 * 60 * 1000
return !(
timestampSelect - range < timestampCurrent &&
timestampCurrent < timestampSelect + range
)
}
return false
}}
onChange={(date, dateStr) => {
console.log('onChange', date, dateStr)
}}
onSelect={(val, isCompleted) => {
console.log(val, isCompleted)
setDynamicSelectedValue(isCompleted ? '' : val)
}}
onClear={() => {
setDynamicSelectedValue('')
}}
/>
动态限制日期时间范围
{
if (!date) {
setStart([])
}
}}
onSelect={(val, isCompleted, index = 0) => {
console.log('select', val, isCompleted, index)
start[index] = val
setStart([...start])
}}
disabledDate={(val, view, index) => {
// 如果还没有选择开始日期，不禁用任何日期
if (!start[0]) {
return false
}
const currentTime = new Date(val).getTime()
const startTime = new Date(start[0]).getTime()
const sixtyDays = 60 * 24 * 60 * 60 * 1000 // 60天的毫秒数
// 如果是选择第二个日期
if (index === 1) {
// 禁用超过开始日期一周范围的日期
return currentTime < startTime || currentTime > startTime + sixtyDays
}
// 如果是选择第一个日期且已经选择了结束日期
if (index === 0 && start[1]) {
const endTime = new Date(start[1]).getTime()
// 禁用导致日期范围超过一周的日期
return currentTime > endTime || endTime - currentTime > sixtyDays
}
return false
}}
/>
)
}
```
### 带快捷选项
将常用的日期或时间提炼成快捷项，节省操作成本
```tsx
import React from 'react'
import DatePicker from '@hi-ui/date-picker'
export const Shortcut = () => {
return (
<>
内置
{
console.log('onChange', date, dateStr)
}}
/>
自定义选择范围
{
console.log('onChange', date, dateStr)
}}
/>
)
}
```
### 日历面板
```tsx
import React, { useState } from 'react'
import DatePicker from '@hi-ui/date-picker'
import DayJs from 'dayjs'
export const Lunar = () => {
const [customValue, setCustomValue] = useState(new Date('2020/4/8'))
return (
<>
预置农历
{
console.log('onChange', date, dateStr)
}}
/>
自定义日期信息
{
// const date = DatePicker.format(currentDate, 'yyyy/M/D')
// const yesterday = DatePicker.format(today - 86400000, 'yyyy/M/D')
// const currentday = DatePicker.format(customValue, 'yyyy/M/D')
const date = DayJs(currentDate).format('yyyy/M/D')
const yesterday = DayJs(today - 86400000).format('yyyy/M/D')
if (date === '2020/4/8') {
return (
米
)
} else if (date === yesterday) {
return (
昨
)
} else {
return ''
}
}}
onChange={(date, dateStr) => {
console.log('onChange', date, dateStr)
setCustomValue(date as Date)
}}
/>
)
}
```
### 不同尺寸
```tsx
import React from 'react'
import DatePicker from '@hi-ui/date-picker'
export const Size = () => {
return (
<>
xs
{
console.log('onChange', date, dateStr)
}}
/>
sm
{
console.log('onChange', date, dateStr)
}}
/>
md
{
console.log('onChange', date, dateStr)
}}
/>
lg
{
console.log('onChange', date, dateStr)
}}
/>
)
}
```
### 自定义渲染页脚
```tsx
import React from 'react'
import DatePicker from '@hi-ui/date-picker'
import Button from '@hi-ui/button'
export const FooterRender = () => {
return (
<>
日期
{
console.log('onChange', date, dateStr)
}}
onSelect={console.log}
footerRender={(action, onPick) => {
return (
)
}}
/>
日期时间
{
console.log('onChange', date, dateStr)
}}
showTime
onSelect={console.log}
footerRender={(sureActionContent, onPick) => (
{sureActionContent}
)}
/>
日期范围
{
console.log('onChange', date, dateStr)
}}
onSelect={console.log}
footerRender={(action, onPick) => (
)}
/>
日期时间范围
(
{sureActionContent}
)}
onChange={(date, dateStr) => {
console.log('onChange', date, dateStr)
}}
onSelect={console.log}
/>
)
}
```
### 自定义触发器
```tsx
import React from 'react'
import DatePicker from '@hi-ui/date-picker'
import Input from '@hi-ui/input'
export const CustomRender = () => {
return (
<>
日期
{
console.log('onChange', date, dateStr)
}}
onSelect={console.log}
customRender={(data) => {
const date = new Date(data[0] ?? new Date())
const year = date.getFullYear()
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDate().toString().padStart(2, '0')
const formattedDate = `${year}-${month}-${day}`
return
}}
/>
日期范围
{
console.log('onChange', date, dateStr)
}}
defaultValue={[new Date(), new Date()]}
customRender={(data) => {
const date1 = new Date(data[0] ?? new Date())
const date2 = new Date(data[1] ?? new Date())
const year1 = date1.getFullYear()
const year2 = date2.getFullYear()
const month1 = (date1.getMonth() + 1).toString().padStart(2, '0')
const month2 = (date2.getMonth() + 1).toString().padStart(2, '0')
const day1 = date1.getDate().toString().padStart(2, '0')
const day2 = date2.getDate().toString().padStart(2, '0')
const formattedDateTime1 = `${year1}-${month1}-${day1}`
const formattedDateTime2 = `${year2}-${month2}-${day2}`
return (
)
}}
/>
)
}
```
### 前内置元素
```tsx
import React from 'react'
import DatePicker from '@hi-ui/date-picker'
import { AppStoreOutlined } from '@hi-ui/icons'
export const Addon = () => {
return (
Addon
{
console.log('onChange', date, dateStr)
}}
onSelect={console.log}
prefix={}
/>
)
}
```
### 选择确认
为 true 时，只有点击确认按钮才会触发值变化，暂不支持范围选择
```tsx
import React from 'react'
import DatePicker from '@hi-ui/date-picker'
export const NeedConfirm = () => {
return (
<>
日期选择
console.log('onChange', date, dateStr)}
onSelect={(date) => console.log('onSelect', date)}
onConfirm={(date) => console.log('onConfirm', date)}
/>
日期时间选择
console.log('onChange', date, dateStr)}
onSelect={(date) => console.log('onSelect', date)}
onConfirm={(date) => console.log('onConfirm', date)}
/>
)
}
```
### 设置时区偏移
UTC时间偏移量，单位为小时。例如：东八区传入 8，西五区传入 -5
```tsx
import React from 'react'
import DatePicker from '@hi-ui/date-picker'
import moment from 'moment'
export const UTCOffset = () => {
const [value, setValue] = React.useState(new Date())
const [utcOffset] = React.useState(1)
return (
<>
日期时间
{
console.log('onSelect', date)
}}
onChange={(date, dateStr) => {
console.log('onChange', date, dateStr)
setValue(date)
}}
// 禁用小于今天的时间
disabledDate={(current, view) => {
// 获取当前系统时区
const systemTimezone = moment().utcOffset()
// 获取 UTC 时间
const utcTime = moment().startOf('day').add(-systemTimezone, 'minutes').clone()
// 获取对应时区的时间
const offsetUtcToday = utcTime.add(utcOffset, 'hours').clone()
const isDisabled = current < offsetUtcToday.toDate()
// console.log(isDisabled, current, offsetUtcToday.toDate())
return isDisabled
}}
/>
系统时间：{value?.toLocaleString()}
UTC时间：{(value as Date)?.toUTCString()}
)
}
```
### 自定义样式
通过 classNames 和 styles 属性，可以对 DatePicker 各元素进行细粒度的样式控制
```tsx
import React, { useState } from 'react'
import { Row, Col } from '@hi-ui/grid'
import List from '@hi-ui/list'
import DatePicker, { DatePickerSemanticName } from '@hi-ui/date-picker'
import Button from '@hi-ui/button'
export const Semantic = () => {
const [selected, setSelected] = useState()
return (
<>
{
return (
)
}}
/>
(
setSelected(dataItem.title as DatePickerSemanticName)}
onMouseLeave={() => setSelected(undefined)}
>
)}
/>
)
}
```
## Props
### DatePicker Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| type | 选择器类型 | DatePickerTypeEnum | "date" \| "daterange" \| "year" \| "month" \| "week" \| "quarter" \| "weekrange" \| "timeperiod" \| "yearrange" \| "monthrange" \| "quarterrange" | - |
| defaultValue | 默认显示的日期 | DatePickerValue \| DatePickerValue\[] | null \| string \| number \| Date \| DatePickerValue\[] | - |
| value | 日期 | DatePickerValue \| DatePickerValue\[] | null \| string \| number \| Date \| DatePickerValue\[] | - |
| minDate | 最小日期 | Date | - | - |
| maxDate | 最大日期 | Date | - | - |
| utcOffset | UTC时间偏移量，单位为小时。例如：东八区传入8，西五区传入-5 | number | - | - |
| disabled | 是否禁用 | boolean | true \| false | "false" |
| inputReadOnly | 设置输入框为只读 | boolean | true \| false | "false" |
| disabledDate | 不可选择的日期(返回true为不可选) | ((currentDate: Date, view: CalendarViewEnum, panelIndex?: number) => boolean) \| undefined | (currentDate: Date, view: CalendarViewEnum, panelIndex?: number \| undefined) => boolean | () => false |
| clearable | 是否可以清空 | boolean | true \| false | true |
| showTime | 是否在日期选择器中显示时间选择器，在使用时请注意 format 的设置。
传入对象时等价于开启时间选择，且可通过 \`defaultOpenValue\` 在未选择日期时指定时间列的默认展示（与 \`defaultPickerValue\` 独立，仅影响时间滚轮）。 | boolean \| { defaultOpenValue?: TimePickerValue \| TimePickerValue\[]; } \| undefined | false \| true \| { defaultOpenValue?: TimePickerValue \| TimePickerValue\[] \| undefined; } | false |
| timeInterval | 时间段的间隔，以分钟为单位 | number | - | 240 |
| format | 展示的日期格式，配置参考 \[moment.js]\(http\://momentjs.cn/docs/#/displaying/format/) | string \| ((date: Moment) => string) | string \| (date: Moment) => string | - |
| shortcuts | 快捷面板 | string\[] \| { title: string; range: (number \| Date)\[]; }\[] | string\[] \| { title: string; range: (number \| Date)\[]; }\[] | - |
| weekOffset | 周起始，默认周日做为第一列(3.3.0版本后，优化为根据中英文自动设置周起始) | number | - | "0" |
| hourStep | 小时步进 | number | - | 1 |
| minuteStep | 分钟步进 | number | - | 1 |
| secondStep | 秒钟步进 | number | - | 1 |
| placeholder | 输入框占位符 | string \| string\[] | string \| string\[] | - |
| altCalendar | 自定义日期中历法展示信息 | CalendarDataItem\[] | - | - |
| altCalendarPreset | 预置历法信息（支持中国农历和印度节假日） | DatePickerAltCalendarPresetEnum | "zh-CN" \| "id-ID" | - |
| dateMarkRender | 自定义日期的右上角标记 | ((currentDate: number, today: number) => ReactNode) | - | - |
| dateMarkPreset | 预置日期的右上角标记（休 \| 班） | string | - | - |
| disabledHours | 禁止选择的小时，仅在 showTime 开启时生效 | ((panel: TimePickerPanelType) => number\[]) \| number\[] | (panel: TimePickerPanelType) => number\[] \| number\[] | () => \[] |
| disabledMinutes | 禁止选择的分钟，仅在 showTime 开启时生效 | number\[] \| ((selectedHour: number, panel: TimePickerPanelType) => number\[]) | number\[] \| (selectedHour: number, panel: TimePickerPanelType) => number\[] | () => \[] |
| disabledSeconds | 禁止选择的秒数，仅在 showTime 开启时生效 | number\[] \| ((selectedHour: number, selectedMinute: number, panel: TimePickerPanelType) => number\[]) | number\[] \| (selectedHour: number, selectedMinute: number, panel: TimePickerPanelType) => number\[] | () => \[] |
| onSelect | 选择日期的回调函数，(data: 选中的 moment 日期对象, isCompleted: 是否选择完成，仅在范围选择下有效，panelIndex: 当前操作面板索引) => void | ((data: Date, isCompleted: boolean, panelIndex?: number) => void) \| undefined | (data: Date, isCompleted: boolean, panelIndex?: number \| undefined) => void | - |
| onChange | 选择后的回调，(date: 选中的日期，dateStr: 选中的日期字符串) => void | ((date: Date \| Date\[] \| null, dateStr: string \| string\[] \| null) => void) | (date: Date \| Date\[] \| null, dateStr: string \| string\[] \| null) => void | - |
| onPanelChange | 日期面板改变时的回调函数 | ((data: Date) => void) | - | - |
| appearance | 不同 UI 外观 | "line" \| "unset" \| "filled" \| "borderless" \| "contained" | "line" \| "unset" \| "filled" \| "borderless" \| "contained" | "line" |
| label | 设置输入框 label 内容，仅在 appearance 为 contained 时生效 | ReactNode | - | - |
| size | 不同尺寸 | HiBaseSizeEnum | "xs" \| "sm" \| "md" \| "lg" | "'md'" |
| overlay | 自定义控制弹出层 popper | PopperOverlayProps | - | - |
| invalid | 是否非法 | boolean | true \| false | false |
| onOpen | 面板打开时回调 | (() => void) | - | - |
| onClose | 面板关闭时回调 | (() => void) | - | - |
| onClear | 清空时回调 | (() => void) | - | - |
| cellRender | 自定义单元格内容 | ((colInfo: CalendarColInfo, date: Moment) => ReactNode) | - | - |
| footerRender | 自定义渲染页脚 | ((actionContents: ReactElement\>, onPick: (dates: (Date \| Moment \| null)\[], isShowPanel?: boolean) => void) => ReactNode) \| undefined | (actionContents: ReactElement\>, onPick: (dates: (Date \| Moment \| null)\[], isShowPanel?: boolean \| undefined) => void) => ReactNode | - |
| strideSelectMode | 跨月选择模式
'auto' 自动切换模式，跨月选择时自动切换到跨月的日期选择面板；
'fixed' 固定模式，不自动切换（仅周范围选择下生效） | "auto" \| "fixed" | "auto" \| "fixed" | "auto" |
| customRender | 自定义触发器 | ReactNode \| ((option: (Date)\[]) => ReactNode) | null \| string \| number \| false \| true \| {} \| ReactElement\> \| ReactNodeArray \| ReactPortal \| (option: (Date \| undefined)\[]) => ReactNode | - |
| prefix | 选择框前置内容 | ReactNode | - | - |
| needConfirm | 是否需要确认按钮，为 \false\ 时失去焦点即代表选择。日期时间范围选择默认为 \true\ | boolean | true \| false | "false" |
| onConfirm | 点击确认按钮的回调 | ((date: Date \| Date\[]) => void) | (date: Date \| Date\[]) => void | - |
| visible | 是否显示日期选择器 | boolean | true \| false | - |
| defaultPickerValue | 默认面板显示的日期，当用户没有传入或选择日期时，选择面板基于此值来显示日期 | DatePickerValue \| DatePickerValue\[] | null \| string \| number \| Date \| DatePickerValue\[] | - |
| showIndicator | 是否展示指示器 | boolean | true \| false | true |
| showWeek | 是否展示周，仅在 type 为 date 或 daterange 时生效 | boolean | true \| false | - |
| classNames | | DatePickerSemanticClassNames | - | - |
| styles | | DatePickerSemanticStyles | - | - |
## Type
### DatePickerValue
> Date | string | number
### CalendarDataItem
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ------------ | --------------- | ------------- | ------ |
| date | 日期 | DatePickerValue | - | - |
| content | 描述内容 | string | - | - |
| highlighted | 是否高亮展示 | boolean | true \| false | false |
## FAQ
### 输入框中出现日期显示异常
如出现选择日期后，在输入框中出现日期显示异常，或者日期格式和原来不同的话，请确认 format 属性的格式是否正确
# Descriptions 描述列表
展示只读性字段，一般用于详情页的信息展示。
## 使用示例
### 基础用法
Descriptions 结合 Descriptions.Item 完成描述列表的动态配置
```tsx
import React from 'react'
import Descriptions from '@hi-ui/descriptions'
export const Basic = () => {
return (
<>
张三
15311969622
北京天安门
100000000
100000022220
test
1000000222201133
)
}
```
### 通过Data 数组配置
Descriptions 通过 data api 描述 Item 信息
```tsx
import React from 'react'
import Descriptions from '@hi-ui/descriptions'
export const Config = () => {
const data = [
{
label: '满江红',
value: '怒发冲冠',
},
{
label: '靖康耻，犹未雪',
value: '臣子恨，何时灭',
},
{
label: '驾长车',
value: '踏破贺兰山缺',
},
{
label: '壮志饥餐胡虏肉',
value: '笑谈渴饮匈奴血',
},
{
label: '待从头',
value: '收拾旧山河',
},
{
label: '朝天阙',
value: '结束',
},
]
return (
<>
)
}
```
### 超出展示省略号
Descriptions 配合 EllipsisTooltip 组件，形成超出展示省略号功能
```tsx
import React from 'react'
import Descriptions from '@hi-ui/descriptions'
import EllipsisTooltip from '@hi-ui/ellipsis-tooltip'
export const Ellipsis = () => {
const data = [
{
// 超出宽度限制才会展示，没有超出不展示
label: 满江红,
value: '怒发冲冠',
},
{
label: 靖康耻，犹未雪。,
labelWidth: 100,
value: '臣子恨，何时灭。臣子恨，何时灭。',
},
{
label: '驾长车',
value: '踏破贺兰山缺',
},
{
label: '壮志饥餐胡虏肉',
value: '笑谈渴饮匈奴血',
},
{
label: '待从头',
labelWidth: 100,
value: 收拾旧山河，收拾旧山河，收拾旧山河，收拾旧山河,
},
{
label: '朝天阙',
value: '结束',
},
]
return (
<>
)
}
```
### 带边框的
设置 `appearance` 控制描述列表组件的展现形态
```tsx
import React from 'react'
import Descriptions from '@hi-ui/descriptions'
export const Bordered = () => {
return (
<>
张三
15311969622
北京天安门
100000000
100000022220
test
1000000222201133
)
}
```
### label对齐方式
通过设置 `labelPlacement` 控制 label 的对齐方式
```tsx
import React from 'react'
import Descriptions from '@hi-ui/descriptions'
export const LabelPlacement = () => {
return (
<>
默认外形：右对齐
张三
15311969622
北京天安门
100000000
100000022220
test
1000000222201133
表格外形：右对齐
张三
15311969622
北京天安门
100000000
100000022220
test
1000000222201133
)
}
```
### 设置标签和内容对齐方式
```tsx
import React from 'react'
import Descriptions from '@hi-ui/descriptions'
import Preview from '@hi-ui/preview'
import { JpgColorful } from '@hi-ui/icons'
import Button from '@hi-ui/button'
export const ContentPosition = () => {
const [images] = React.useState([
'http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png',
'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png',
'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png',
])
const [visible, setVisible] = React.useState(false)
const [current, setCurrent] = React.useState(0)
return (
<>
)
}
```
### 自定义列数
支持一栏至四栏平均分布
```tsx
import React from 'react'
import Descriptions from '@hi-ui/descriptions'
export const Col = () => {
return (
<>
张三
15311969622
北京天安门
100000000
100000022220
test
1000000222201133
)
}
```
### 上下布局
支持 label 和 content 上下布局形式进行展示
```tsx
import React from 'react'
import Descriptions from '@hi-ui/descriptions'
export const Vertical = () => {
return (
<>
张三
15311969622
北京天安门
100000000
100000022220
test
1000000222201133
)
}
```
### 垂直带边框
```tsx
import React from 'react'
import Descriptions from '@hi-ui/descriptions'
export const VerticalBorder = () => {
return (
<>
张三
15311969622
北京天安门
100000000
100000022220
test
1000000222201133
1000000222201133
)
}
```
### 固定label宽度
根据实际情况配置label宽度，一个页面中label宽度应该保持一致
```tsx
import React from 'react'
import Descriptions from '@hi-ui/descriptions'
export const LabelWidth = () => {
return (
<>
张三
15311969622
北京天安门
100000000
100000022220
test
1000000222201133
张三
15311969622
北京天安门
100000000
100000022220
test
1000000222201133
)
}
```
### 设置大小
```tsx
import React from 'react'
import Descriptions from '@hi-ui/descriptions'
import Preview from '@hi-ui/preview'
import { JpgColorful } from '@hi-ui/icons'
export const Size = () => {
const [images] = React.useState([
'http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png',
'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png',
'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png',
])
const [visible, setVisible] = React.useState(false)
const [current, setCurrent] = React.useState(0)
return (
<>
md
第三方网点
主站
有效
某某有限公司
是
备注内容可能会非常长备注内容可能会非常长备注内容可能会非常长
{
setCurrent(0)
setVisible(true)
}}
/>
{
setCurrent(1)
setVisible(true)
}}
/>
{
setCurrent(2)
setVisible(true)
}}
/>
sm
第三方网点
主站
有效
某某有限公司
是
备注内容可能会非常长备注内容可能会非常长备注内容可能会非常长
{
setCurrent(0)
setVisible(true)
}}
/>
{
setCurrent(1)
setVisible(true)
}}
/>
{
setCurrent(2)
setVisible(true)
}}
/>
{
setVisible(false)
}}
/>
)
}
```
### 自定义样式
通过 classNames 和 styles 属性，可以对组件进行更细粒度的样式控制
```tsx
import React, { useState } from 'react'
import { Row, Col } from '@hi-ui/grid'
import List from '@hi-ui/list'
import Descriptions, { DescriptionsSemanticName } from '@hi-ui/descriptions'
export const Semantic = () => {
const [selected, setSelected] = useState()
return (
<>
张三
15311969622
北京天安门
100000000
100000022220
test
{
return (
{
setSelected(dataItem.title as DescriptionsSemanticName)
}}
onMouseLeave={() => {
setSelected(undefined)
}}
>
)
}}
/>
)
}
```
## Props
### Descriptions Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------------- | --------------------------------------------------------------- | ------------------------------ | -------------------------- | ------------ |
| placement | 对齐方式，默认'horizontal' | DescriptionsPlacementEnum | "horizontal" \| "vertical" | "horizontal" |
| appearance | 描述样式，分为table样式和unset | DescriptionsAppearanceEnum | "table" \| "unset" | "unset" |
| column | 列数，表示一行包含DescriptionItems的数量 | number | - | 3 |
| data | 提供JS配置化的方式渲染单元模块 | DescriptionsItemProps\[] | - | - |
| fieldNames | 设置 data 中label, value, labelWidth, labelPlacement 对应的 key | HiBaseFieldNames | - | - |
| labelPlacement | label对齐方式 | DescriptionsLabelPlacementEnum | "left" \| "right" | "left" |
| labelWidth | label宽度 | ReactText | - | - |
| columnGap | 单元格列间距
注：在无边框场景下生效 | ReactText | - | - |
| size | 设置大小 | "md" \| "sm" | "md" \| "sm" | - |
| contentPosition | 在 horizontal 放置时，标签相对内容垂直对齐的方式 | ContentPosition | - | "top" |
| classNames | | DescriptionsSemanticClassNames | - | - |
| styles | | DescriptionsSemanticStyles | - | - |
### DescriptionsItem Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------------- | ------------------------------- | ------------------------------ | ----------------- | ------ |
| colSpan | 包含列的数量 | number | - | - |
| span | @deprecated 请使用 colSpan 替代 | number | - | - |
| label | 内容标题 | ReactNode | - | - |
| labelWidth | label宽度 | ReactText | - | - |
| labelPlacement | label 对齐方式 | DescriptionsLabelPlacementEnum | "left" \| "right" | - |
| value | 每一项的内容 | ReactNode | - | - |
# Drawer 抽屉
模态对话框一般会中断当前任务流，在相对无信息干扰的环境下完成微型任务
## 使用示例
### 基础用法
```tsx
import React from 'react'
import Drawer from '@hi-ui/drawer'
import Button from '@hi-ui/button'
export const Basic = () => {
const [visible, setVisible] = React.useState(false)
return (
<>
setVisible(false)}
footer={
}
>
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
)
}
```
### 尺寸
```tsx
import React from 'react'
import Drawer, { DrawerProps } from '@hi-ui/drawer'
import Button from '@hi-ui/button'
export const Size = () => {
const [visible, setVisible] = React.useState(false)
const [size, setSize] = React.useState('sm')
return (
<>
sm
md
setVisible(false)}
footer={
}
>
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
)
}
```
### 无头抽屉
title 不设置任何内容开启无头模式
```tsx
import React from 'react'
import Drawer from '@hi-ui/drawer'
import Button from '@hi-ui/button'
export const Header = () => {
const [visible, setVisible] = React.useState(false)
return (
<>
setVisible(false)}>
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
)
}
```
### 标签页头部
```tsx
import React from 'react'
import Drawer from '@hi-ui/drawer'
import Button from '@hi-ui/button'
import { TabList } from '@hi-ui/tabs'
export const TabsHeader = () => {
const [visible, setVisible] = React.useState(false)
const [activeId, setActiveId] = React.useState('1')
const Content1 = () => {
return 内容1
}
const Content2 = () => {
return 内容2
}
const Content3 = () => {
return 内容3
}
return (
<>
}
visible={visible}
onClose={() => setVisible(false)}
footer={
}
>
{(() => {
if (activeId === '1') {
return
}
if (activeId === '2') {
return
}
if (activeId === '3') {
return
}
return null
})()}
)
}
```
### 无蒙层
```tsx
import React from 'react'
import Drawer from '@hi-ui/drawer'
import Button from '@hi-ui/button'
export const Mask = () => {
const [visible, setVisible] = React.useState(false)
return (
<>
setVisible(false)}
footer={
}
>
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
)
}
```
### 点击外部事件处理
常用于无蒙层模式下，切换列表项详情内容
```tsx
import React from 'react'
import Drawer from '@hi-ui/drawer'
import Button from '@hi-ui/button'
import Tree, { TreeDataItem } from '@hi-ui/tree'
export const OutsideClick = () => {
const [visible, setVisible] = React.useState(false)
const [data] = React.useState([
{
id: 1,
title: '小米',
children: [
{
id: 2,
title: '研发',
disabled: true,
children: [
{ id: 3, title: '后端', disabled: true },
{ id: 4, title: '运维' },
{ id: 5, title: '前端' },
],
},
{ id: 6, title: '产品' },
],
},
{
id: 11,
title: '大米',
children: [
{ id: 22, title: '可视化' },
{ id: 66, title: 'HiUI' },
],
},
])
const [currentData, setCurrentData] = React.useState()
const wrapperRef = React.useRef(null)
return (
<>
{
// console.log('node', node)
if (id) {
setVisible(true)
setCurrentData(node?.raw)
} else {
setVisible(false)
}
}}
/>
setVisible(false)}
// 点击列表外部内容时关闭抽屉
onOutsideClick={(e) => {
// console.log('target', e.target)
console.log('dom', wrapperRef.current?.contains(e.target as Element))
if (!wrapperRef.current?.contains(e.target as Element)) {
setVisible(false)
}
}}
footer={
}
>
{currentData?.title}
)
}
```
### 局部容器抽屉
\`container` 自定义渲染抽屉的容器
```tsx
import React from 'react'
import Drawer from '@hi-ui/drawer'
import Button from '@hi-ui/button'
export const Container = () => {
const [visible, setVisible] = React.useState(false)
const [container, setContainer] = React.useState(null)
return (
<>
setVisible(false)}
>
我是一段文字，也可以是表单、表格、步骤条等等
)
}
```
### 嵌套抽屉
```tsx
import React from 'react'
import Button from '@hi-ui/button'
import Drawer from '@hi-ui/drawer'
export const Nested = () => {
const [visible, setVisible] = React.useState(false)
const [nestVisible, setNestVisible] = React.useState(false)
return (
<>
setVisible(false)}
>
我是一段文字，也可以是表单、表格、步骤条等等
setNestVisible(false)}
>
Nest我是一段文字，也可以是表单、表格、步骤条等等
)
}
```
### 顶部额外操作
```tsx
import React from 'react'
import Drawer from '@hi-ui/drawer'
import Button from '@hi-ui/button'
import { EditOutlined } from '@hi-ui/icons'
export const Extra = () => {
const [visible, setVisible] = React.useState(false)
return (
<>
我是大标题
}
appearance="text"
size="xs"
/>
}
visible={visible}
onClose={() => setVisible(false)}
>
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
)
}
```
### 出现方位
设置抽屉拉出的方向
```tsx
import React from 'react'
import Drawer from '@hi-ui/drawer'
import Button from '@hi-ui/button'
export const Placement = () => {
const [visible, setVisible] = React.useState(false)
const [placement, setPlacement] = React.useState('tpp')
return (
<>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setVisible(false)}
footer={
}
>
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
)
}
```
### 自定义样式
通过 classNames 和 styles 属性，可以对组件进行更细粒度的样式控制
```tsx
import React, { useState } from 'react'
import { Row, Col } from '@hi-ui/grid'
import List from '@hi-ui/list'
import Drawer, { DrawerSemanticName } from '@hi-ui/drawer'
import Button from '@hi-ui/button'
export const Semantic = () => {
const [selected, setSelected] = useState()
const [container, setContainer] = useState(null)
return (
<>
}
classNames={{
root: 'my-drawer__root',
overlay: 'my-drawer__overlay',
wrapper: 'my-drawer__wrapper',
header: 'my-drawer__header',
title: 'my-drawer__title',
close: 'my-drawer__close',
body: 'my-drawer__body',
footer: 'my-drawer__footer',
}}
styles={{
[selected as string]: {
outline: '1px solid #ffbe0a',
overflow: 'unset',
},
}}
>
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
我是一段文字，也可以是表单、表格、步骤条等等
{
return (
{
setSelected(dataItem.title as DrawerSemanticName)
}}
onMouseLeave={() => {
setSelected(undefined)
}}
>
)
}}
/>
)
}
```
### 命令式 API
通过 Drawer.open / Drawer.close 以命令方式打开和关闭抽屉；支持 confirm/cancel；若需在抽屉内容中访问 React Context，请使用 Drawer.useDrawer
```tsx
import React from 'react'
import Button from '@hi-ui/button'
import Drawer from '@hi-ui/drawer'
export const WithAPI = () => {
return (
<>
)
}
```
### Context 访问
可通过 Drawer.useDrawer 在使用 api 式调用时，访问外层 Context
```tsx
import React, { useContext, useState } from 'react'
import Button from '@hi-ui/button'
import Drawer from '@hi-ui/drawer'
export const Context = () => {
const [ThemeContext] = useState(() => React.createContext('light'))
const ThemeConsumer = () => {
const theme = useContext(ThemeContext)
return 当前主题: {theme}
}
const [drawer, contextHolder] = Drawer.useDrawer()
return (
将 contextHolder 放在 ThemeContext.Provider 内，抽屉内容区域可正常获取外部 Context
{contextHolder}
)
}
```
## Props
### Drawer Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------------- | ----------------------------------------------------------- | ------------------------ | -------------------------------------- | ------ |
| title | 模态框标题 | ReactNode | - | - |
| footer | 自定义抽屉底部 | ReactNode | - | - |
| showMask | 是否显示蒙层 | boolean | true \| false | - |
| width | 自定义抽屉宽度，仅在 placement="left" \| "right" 有效 | string \| number | string \| number | - |
| height | 自定义抽屉高度，仅在 placement="bottom" \| "top" 有效 | string \| number | string \| number | - |
| size | 头部大小 | "sm" \| "md" | "sm" \| "md" | - |
| zIndex | 自定义css展示层级 | number | - | - |
| preload | 开启预加载渲染，用于性能优化，优先级小于 \`unmountOnClose\` | boolean | true \| false | - |
| unmountOnClose | 开启关闭时销毁，用于性能优化，优先级大于 \`preload\` | boolean | true \| false | - |
| onClose | 关闭事件触发时的回调 | (() => void) | - | - |
| container | 指定 portal 的容器 | HTMLElement \| null | null \| HTMLElement | - |
| placement | 设置唤起的方向 | DrawerPlacementEnum | "left" \| "right" \| "top" \| "bottom" | - |
| closeable | 是否展示右上角关闭按钮 | boolean | true \| false | - |
| onOutsideClick | 外界元素点击数触发 | ((evt: Event) => void) | - | - |
| closeIcon | 自定义关闭按钮 | ReactNode | - | - |
| disabledPortal | 禁用 portal | boolean | true \| false | - |
| visible | 是否弹出显示 | boolean | true \| false | - |
| closeOnEsc | 开启 Esc 快捷键关闭 | boolean | true \| false | - |
| maskClosable | 开启点击蒙层时关闭 | boolean | true \| false | - |
| classNames | | DrawerSemanticClassNames | - | - |
| styles | | DrawerSemanticStyles | - | - |
# Dropdown 下拉菜单
用来将菜单收起在下拉面板中，使用中唤起面板，有效节省空间
## 使用示例
### 基础用法
将一组同类的动作收起成为菜单，由一个操作入口展示使用
```tsx
import React from 'react'
import Dropdown from '@hi-ui/dropdown'
export const Basic = () => {
const [list] = React.useState([
{
id: 0,
title: '小米商城',
href: 'https://www.mi.com',
},
{
id: 1,
title: '菜单二',
},
{
id: 2,
title: '菜单三',
},
{
id: 3,
title: '菜单四',
},
{
id: 4,
title: '菜单五',
},
])
return (
<>
)
}
```
### 禁用状态
```tsx
import React from 'react'
import Dropdown from '@hi-ui/dropdown'
export const Disabled = () => {
const [list] = React.useState([
{
id: '1',
title: '菜单一',
},
{
id: '2',
title: '菜单二',
},
{
id: '3',
title: '菜单三',
},
{
id: '4',
title: '链接一',
href: 'https://www.mi.com',
},
])
return (
<>
)
}
```
### 分组
通过分隔线将选项进行分组划分
```tsx
import React from 'react'
import Dropdown from '@hi-ui/dropdown'
export const Group = () => {
const [list] = React.useState([
{
id: 0,
title: '小米商城',
href: 'https://www.mi.com',
},
{
id: 1,
title: '菜单二',
},
{
id: 2,
title: '菜单三',
},
{
id: 3,
title: '菜单四',
},
{
id: 4,
title: '菜单五',
},
{
id: 'divider',
split: true,
},
{
id: 6,
title: '小米商城',
href: 'https://www.mi.com',
disabled: true,
},
])
return (
<>
)
}
```
### 触发方式
不同触发方式呼出菜单
```tsx
import React from 'react'
import Dropdown from '@hi-ui/dropdown'
export const Trigger = () => {
const [list] = React.useState([
{
id: 0,
title: '小米商城',
href: 'https://www.mi.com',
},
{
id: 1,
title: '菜单二',
},
{
id: 2,
title: '菜单三',
},
{
id: 3,
title: '菜单四',
},
{
id: 4,
title: '菜单五',
},
{
id: 5,
title: '菜单六',
},
])
return (
<>
)
}
```
### 多级菜单
菜单项不属于同一级别，可分层级展开使用
```tsx
import React from 'react'
import Dropdown from '@hi-ui/dropdown'
export const MultiMenu = () => {
const [list] = React.useState([
{
id: '移动至',
title: '移动至',
children: [
{
id: '2019',
title: '2019',
children: [
{
id: 'Q1',
title: 'Q1',
children: [
{
id: '01',
title: '01',
},
{
id: '02',
title: '02',
},
{
id: '03',
title: '03',
},
],
},
{
id: 'Q2',
title: 'Q2',
disabled: true,
},
{
id: 'Q3',
title: 'Q3',
},
],
},
{
id: '2020',
title: '2020',
children: [
{
id: 'Q1',
title: 'Q1',
children: [
{
id: '01',
title: '01',
},
{
id: '02',
title: '02',
},
{
id: '03',
title: '03',
},
],
},
{
id: 'Q2',
title: 'Q2',
disabled: true,
},
{
id: 'Q3',
title: 'Q3',
},
],
},
],
},
{
id: '复制至',
title: '复制至',
children: [
{
id: '2019',
title: '2019',
children: [
{
id: 'Q1',
title: 'Q1',
disabled: true,
children: [
{
id: '01',
title: '01',
},
{
id: '02',
title: '02',
children: [
{
id: '02-01',
title: '02-01',
},
{
id: '02-02',
title: '02-02',
},
],
},
{
id: '03',
title: '03',
children: [
{
id: '03-01',
title: '03-01',
},
{
id: '03-02',
title: '03-02',
},
],
},
],
},
{
id: 'Q2',
title: 'Q2',
},
{
id: 'Q3',
title: 'Q3',
},
],
},
{
id: '2020',
title: '2020',
children: [
{
id: 'Q1',
title: 'Q1',
disabled: true,
children: [
{
id: '01',
title: '01',
},
{
id: '02',
title: '02',
children: [
{
id: '02-01',
title: '02-01',
},
{
id: '02-02',
title: '02-02',
},
],
},
{
id: '03',
title: '03',
children: [
{
id: '03-01',
title: '03-01',
},
{
id: '03-02',
title: '03-02',
},
],
},
],
},
{
id: 'Q2',
title: 'Q2',
},
{
id: 'Q3',
title: 'Q3',
},
],
},
],
},
{
id: '删除',
title: '删除',
},
])
return (
<>
)
}
```
### 弹出方位
下拉菜单可打开不同的方向，以应对页面边缘的遮盖问题
```tsx
import React from 'react'
import Dropdown from '@hi-ui/dropdown'
import Button from '@hi-ui/button'
export const Placement = () => {
const [list] = React.useState([
{
id: 0,
title: '小米商城',
href: 'https://www.mi.com',
},
{
id: 1,
title: '菜单二',
},
{
id: 2,
title: '菜单三',
},
{
id: 3,
title: '菜单四',
},
{
id: 4,
title: '菜单五',
},
])
return (
<>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
)
}
```
### 按钮用法
操作入口以 Button 样式展示，强调重要操作
```tsx
import React from 'react'
import Dropdown from '@hi-ui/dropdown'
import message from '@hi-ui/message'
export const Type = () => {
const [list] = React.useState([
{
id: 0,
title: '小米商城',
href: 'https://www.mi.com',
},
{
id: 1,
title: '菜单二',
},
{
id: 2,
title: '菜单三',
},
{
id: 3,
title: '菜单四',
},
{
id: 4,
title: '菜单五',
},
{
id: 5,
title: '菜单六',
},
])
return (
<>
{
message.open({ title: '点击左侧按钮' })
}}
/>
)
}
```
### 自定义触发按钮
```tsx
import React from 'react'
import Dropdown from '@hi-ui/dropdown'
import { Tooltip } from '@hi-ui/tooltip'
import { Avatar } from '@hi-ui/avatar'
export const TriggerButton = () => {
const [list] = React.useState([
{
id: 0,
title: '小米商城',
href: 'https://www.mi.com',
},
{
id: 1,
title: '菜单二',
},
{
id: 2,
title: '菜单三',
},
{
id: 3,
title: '菜单四',
},
{
id: 4,
title: '菜单五',
},
{
id: 5,
title: '菜单六',
},
{
id: 6,
title: '菜单七',
},
])
return (
<>
)
}
```
### 带Icon
```tsx
import React from 'react'
import Dropdown from '@hi-ui/dropdown'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@hi-ui/icons'
export const Icon = () => {
const [list] = React.useState([
{
id: 0,
title: (
添加
),
},
{
id: 1,
title: (
编辑
),
},
{
id: 2,
title: (
删除
),
},
])
return (
<>
)
}
```
### 自定义样式
通过 classNames 和 styles 属性，可以对组件进行更细粒度的样式控制
```tsx
import React, { useState } from 'react'
import { Row, Col } from '@hi-ui/grid'
import List from '@hi-ui/list'
import Dropdown, { DropdownSemanticName } from '@hi-ui/dropdown'
export const Semantic = () => {
const [selected, setSelected] = useState()
const [list] = React.useState([
{
id: 0,
title: '小米商城',
href: 'https://www.mi.com',
},
{
id: 1,
title: '菜单二',
},
{
id: 2,
title: '菜单三',
},
{
id: 3,
title: '菜单四',
},
{
id: 4,
title: '菜单五',
},
])
return (
<>
{
return (
{
setSelected(dataItem.title as DropdownSemanticName)
}}
onMouseLeave={() => {
setSelected(undefined)
}}
>
)
}}
/>
)
}
```
## Props
### Dropdown Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------- | ------ |
| title | 下拉菜单显示标题的内容 | ReactNode | - | - |
| data | 下拉菜单数据项 | DropdownDataItem\[] | - | \[] |
| fieldNames | 设置data 中id, title, href, target, disabled, split 等属性对应的 key | HiBaseFieldNames | - | - |
| width | 设置下拉面板宽度 | number | - | - |
| type | 下拉菜单按钮类型 | "button" \| "text" \| "group" | "button" \| "text" \| "group" | "text" |
| onButtonClick | 点击左侧按钮的回调，仅在 type 为 group 时有效 | ((event: MouseEvent\) => void) | - | - |
| onClick | 点击后的回调 | ((id: ReactText, item: DropdownDataItem) => void) | - | - |
| overlayClassName | 下拉根元素的类名称 | string | - | - |
| children | 自定义下拉菜单触发按钮
注意：自定义按钮需要支持 ref 获取元素 dom 引用 以及 trigger 对应的事件：
hover: onMouseEnter \ onMouseLeave
click: onClick
contextmenu: onContextMenu | ReactNode | - | - |
| overlay | 自定义控制 下拉 popper 行为 | PopperOverlayProps | - | - |
| size | 设置大小 | Omit\ | Omit\ | "lg" |
| trigger | 下拉菜单触发方式 | DropdownTriggerActionEnum \| DropdownTriggerActionEnum\[] | "click" \| "contextmenu" \| "hover" \| DropdownTriggerActionEnum\[] | - |
| disabled | 是否禁用下拉菜单 | boolean | true \| false | - |
| classNames | | DropdownSemanticClassNames | - | - |
| styles | | DropdownSemanticStyles | - | - |
## Type
### DropdownDataItem
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | --------------------------------------------- | --------- | ----------------------------------------------- | ------ |
| title | 标题的内容 | ReactNode | - | - |
| id | 唯一标识 id | ReactText | - | - |
| disabled | 是否禁用 | boolean | true \| false | false |
| href | 点击跳转的路径 | string | - | - |
| target | 同 a 标签的 target 属性，仅在设置 href 后有效 | string | ︎'\_self' \| '\_blank' \| '\_parent' \| '\_top' | - |
| split | 是否在其底部建立分隔线 | boolean | ︎true \| false | false |
### PopperOverlayProps
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------------- | ---------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| className | 弹层类名 | string | - | - |
| matchWidth | 自动计算匹配吸附元素的宽度与其一致 | boolean | true \| false | false |
| placement | 相对吸附元素的位置 | PopperPlacementEnum | "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end" \| "auto" \| "auto-start" \| "auto-end" | "bottom-start" |
| container | 指定 portal 的容器 | HTMLElement | - | - |
| disabledPortal | 禁用 portal | boolean | true \| false | false |
| arrow | 是否展示箭头 | boolean | true \| false | false |
# EllipsisTooltip 文字超出提示
文字个数超出后展示省略号，鼠标悬停时出现全部描述。
## 使用示例
### 基础用法
```tsx
import React from 'react'
import EllipsisTooltip from '@hi-ui/ellipsis-tooltip'
export const Basic = () => {
const textOverview = '学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？'
return (
<>
没有超出
这段文字没有超出限制时，不会出现提示
超出宽度限制
{textOverview} ,
}}
>
{textOverview}
)
}
```
### 多行省略
```tsx
import React from 'react'
import EllipsisTooltip from '@hi-ui/ellipsis-tooltip'
export const MultiplyLine = () => {
const textOverview =
'【译】孔子说：“学习并且不断温习，不也很愉快吗？远方来了朋友，不也很快乐吗？人家不了解我，我也不怨恨，不也是君子吗？”，【译】孔子说：“学习并且不断温习，不也很愉快吗？远方来了朋友，不也很快乐吗？人家不了解我，我也不怨恨，不也是君子吗？”'
return (
<>
超出 3 行(tooltip 内容过多可设置样式换行)
{textOverview} ,
}}
>
{textOverview}
)
}
```
### 超出字数省略
```tsx
import React from 'react'
import EllipsisTooltip from '@hi-ui/ellipsis-tooltip'
export const MaxTextCount = () => {
const textOverview = '学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？'
return (
<>
没有超出
学而时习之
文字超出 20 个字符时
{textOverview} ,
}}
>
{textOverview}
)
}
```
## Props
### EllipsisTooltip Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------- | ------------------------------------------------- | ---------------------- | ------ | ------ |
| numberOfLines | 超出行数展示省略号，children 是 string 类型时有效 | number | - | 1 |
| maxTextCount | 最大文字展示，children 是 string 类型时有效 | number | - | 0 |
| tooltipProps | tooltip 属性收敛 | Partial\ | - | - |
# EmptyState 空状态
指当前场景没有对应的数据内容，呈现出的一种状态。
## 使用示例
### 基础用法
```tsx
import React from 'react'
import EmptyState from '@hi-ui/empty-state'
export const Basic = () => {
return (
<>
)
}
```
### 不同尺寸
```tsx
import React from 'react'
import EmptyState from '@hi-ui/empty-state'
export const Size = () => {
return (
<>
)
}
```
### 带内容
```tsx
import React from 'react'
import EmptyState from '@hi-ui/empty-state'
import { Button } from '@hi-ui/button'
export const WithContent = () => {
return (
<>
)
}
```
### 自定义
```tsx
import React from 'react'
import EmptyState, {
EMPTY_STATE_IMAGE_NO_RESULT,
EMPTY_STATE_IMAGE_SERVICE_ERROR,
EMPTY_STATE_IMAGE_NO_ACCESS,
EMPTY_STATE_IMAGE_404,
EMPTY_STATE_IMAGE_NO_OPEN,
EMPTY_STATE_IMAGE_NO_NETWORK,
EMPTY_STATE_IMAGE_NO_LAN,
} from '@hi-ui/empty-state'
export const Custom = () => {
return (
<>
)
}
```
### 彩色图标
```tsx
import React from 'react'
import EmptyState, {
EMPTY_STATE_IMAGE_NO_MESSAGE_COLORFUL,
EMPTY_STATE_IMAGE_NO_RESULT_COLORFUL,
EMPTY_STATE_IMAGE_NO_COLLECTION_COLORFUL,
EMPTY_STATE_IMAGE_NO_ACCESS_COLORFUL,
EMPTY_STATE_IMAGE_NO_NETWORK_COLORFUL,
EMPTY_STATE_IMAGE_NO_OPEN_COLORFUL,
EMPTY_STATE_IMAGE_404_COLORFUL,
EMPTY_STATE_IMAGE_SERVICE_ERROR_COLORFUL,
EMPTY_STATE_IMAGE_PAGE_ERROR_COLORFUL,
EMPTY_STATE_IMAGE_SUCCESS_COLORFUL,
EMPTY_STATE_IMAGE_ERROR_COLORFUL,
EMPTY_STATE_IMAGE_WARNING_COLORFUL,
EMPTY_STATE_IMAGE_NO_DATA_COLORFUL,
EMPTY_STATE_IMAGE_JUMP_COLORFUL,
EMPTY_STATE_IMAGE_CHART_NO_DATA_COLORFUL,
} from '@hi-ui/empty-state'
export const Colorful = () => {
return (
<>
)
}
```
### 自定义样式
通过 classNames 和 styles 属性，可以对组件进行更细粒度的样式控制
```tsx
import React, { useState } from 'react'
import { Row, Col } from '@hi-ui/grid'
import List from '@hi-ui/list'
import EmptyState, { EmptyStateSemanticName } from '@hi-ui/empty-state'
export const Semantic = () => {
const [selected, setSelected] = useState()
return (
<>
这里是自定义内容区域
{
return (
{
setSelected(dataItem.title as EmptyStateSemanticName)
}}
onMouseLeave={() => {
setSelected(undefined)
}}
>
)
}}
/>
)
}
```
## Props
### EmptyState Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------- | --------------------------------------------- | ---------------------------- | --------------------------- | ------ |
| indicator | 指示器图标，如果是字符串将被设置为 Img 的 src | ReactNode | - | - |
| title | 空状态的标题 | ReactNode | - | - |
| size | 图标尺寸 | EmptyStateSizeEnum | Omit\ | - |
| classNames | | EmptyStateSemanticClassNames | - | - |
| styles | | EmptyStateSemanticStyles | - | - |
# FileSelect 文件选择器
用于选择文件。
## 使用示例
### 基础用法
```tsx
import React from 'react'
import FileSelect from '@hi-ui/file-select'
export const Basic = () => {
return (
<>
Upload
)
}
```
## Props
### FileSelect Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ------------------ | ----------------------------------- | --------------------------------- | ------ |
| className | 组件的注入选择器类 | string | - | - |
| style | 组件的注入样式 | CSSProperties | - | - |
| accept | 接受的上传文件类型 | string | - | - |
| disabled | 是否禁用 | boolean | true \| false | - |
| multiple | 是否支持批量上传 | boolean | true \| false | - |
| onSelect | 选择上传的事件 | ((files: FileList \| null) => void) | (files: FileList \| null) => void | - |
| children | 自定义触发器 | ReactNode | - | - |
# Filter 筛选
多个维度筛选
## 使用示例
### 基础用法
一般作为筛选场景，作为筛选项
```tsx
import React from 'react'
import Filter from '@hi-ui/filter'
export const Basic = () => {
const [dataStore] = React.useState([
{
id: 1,
title: '小米商城',
},
{
id: 2,
title: '米家有品',
},
{
id: 3,
title: '京东商城',
},
{
id: 4,
title: '天猫淘宝',
},
{
id: 5,
title: '创新渠道',
},
{
id: 6,
title: '线下KA',
},
{
id: 7,
title: '线下KA1',
},
{
id: 8,
title: '线下KA2',
},
{
id: 9,
title: '线下KA3',
},
{
id: 10,
title: '线下KA4',
},
])
const [dataColor] = React.useState([
{
id: 1,
title: '深空',
},
{
id: 2,
title: '白色',
},
{
id: 3,
title: '亮黑色',
},
{
id: 4,
title: '金色',
},
])
return (
<>
{
console.log('value', value)
}}
/>
{
console.log('value', value)
}}
/>
)
}
```
### 级联选择
一般作为筛选场景，作为筛选项组合,每个级别之间有联动
```tsx
import React from 'react'
import Filter from '@hi-ui/filter'
export const Cascade = () => {
return (
<>
)
}
```
### 受控
```tsx
import React from 'react'
import Filter from '@hi-ui/filter'
export const Controlled = () => {
const [value, setValue] = React.useState([2, 21])
const data = [
{
id: 1,
title: '小米商城',
children: [
{
id: 11,
title: '小米商城',
},
{
id: 12,
title: '米家优品',
disabled: true,
},
],
},
{
id: 2,
title: '米家有品',
children: [
{
id: 21,
title: '五彩城店',
children: [
{
id: '小米9',
title: '小米9',
},
{
id: '小米MIXS',
title: '小米MIXS',
},
{
id: '小米8',
title: '小米8',
},
],
},
{
id: 22,
title: '清河店',
},
{
id: 23,
title: '西三旗店',
},
],
},
{
id: 3,
title: '京东商城',
children: [
{
id: 31,
title: '小米直营',
children: [
{
id: '线下KA',
title: '线下KA',
},
],
},
],
},
]
return (
<>
{
console.log('onChange', ids, targetItem)
setValue(ids)
}}
data={data}
/>
)
}
```
### 下划线
```tsx
import React from 'react'
import Filter from '@hi-ui/filter'
export const Underlined = () => {
return (
<>
)
}
```
### 设置选中时的形状
```tsx
import React from 'react'
import Filter from '@hi-ui/filter'
export const Appearance = () => {
const [dataStore] = React.useState([
{
id: 1,
title: '小米商城',
},
{
id: 2,
title: '米家有品',
},
{
id: 3,
title: '京东商城',
},
{
id: 4,
title: '天猫淘宝',
},
{
id: 5,
title: '创新渠道',
},
{
id: 6,
title: '线下KA',
},
{
id: 7,
title: '线下KA1',
},
{
id: 8,
title: '线下KA2',
},
{
id: 9,
title: '线下KA3',
},
{
id: 10,
title: '线下KA4',
},
])
const [dataColor] = React.useState([
{
id: 1,
title: '深空',
},
{
id: 2,
title: '白色',
},
{
id: 3,
title: '亮黑色',
},
{
id: 4,
title: '金色',
},
])
return (
<>
link
{
console.log('value', value)
}}
/>
{
console.log('value', value)
}}
/>
filled
{
console.log('value', value)
}}
/>
{
console.log('value', value)
}}
/>
)
}
```
## Props
### Filter Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------- | ----------------------------------------------------- | ----------------------------------------------------------- | ------------------ | ------ |
| appearance | 筛选表头选择时形状 | "link" \| "filled" | "link" \| "filled" | "link" |
| showUnderline | 是否显示下划线 | boolean | true \| false | false |
| labelWidth | 筛选标题宽度 | number | - | - |
| label | 筛选标题列表 | ReactText\[] | - | - |
| data | 筛选选项数据 | FilterDataItem\[] | - | - |
| fieldNames | 设置 data 中 id, title, disabled, children 对应的 key | HiBaseFieldNames | - | - |
| defaultValue | 默认选中项的值 | ReactText\[] | - | - |
| value | 被选中项的值 | ReactText\[] | - | - |
| onChange | 选择时的回调函数， value 表示选中项的 ID 集合 | ((value: ReactText\[], targetItem: FilterDataItem) => void) | - | - |
## Type
### FilterDataItem
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | --------------------- | ---------------- | ------------- | ------ |
| title | 选项的展示内容 | string | - | - |
| id | 选项对应的值，唯一 id | string | - | - |
| disabled | 是否禁用 | boolean | true \| false | false |
| children | 级联筛选项列表 | FilterDataItem[] | - | - |
# Form 表单
用来收集数据的组件集合
## 使用示例
### 基础用法
```tsx
import React from 'react'
import Form from '@hi-ui/form'
import Input from '@hi-ui/input'
export const Basic = () => {
const FormItem = Form.Item
return (
<>
)
}
```
### 对齐方式
表单项较少，对应标题字数易对齐工整
```tsx
import React from 'react'
import Form, { FormHelpers, FormProps } from '@hi-ui/form'
import Input from '@hi-ui/input'
import Radio from '@hi-ui/radio'
export const LabelPlacement = () => {
const FormItem = Form.Item
const FormSubmit = Form.Submit
const RadioGroup = Radio.Group
const formRef = React.useRef(null)
const [labelPlacement, setLabelPlacement] = React.useState('left')
return (
<>
setLabelPlacement(value as FormProps['labelPlacement'])}
/>
)
}
```
### 横向表单
适用于筛选或查询数据的场景，和表格配合使用
```tsx
import React from 'react'
import Form from '@hi-ui/form'
import Input from '@hi-ui/input'
import Button from '@hi-ui/button'
export const Placement = () => {
const FormItem = Form.Item
return (
<>
)
}
```
### 表单校验
可在Form中配置全部Item的rules,也可在Form.Item中使用rules校验单个表单项
```tsx
import React from 'react'
import Form, { FormHelpers, FormRules } from '@hi-ui/form'
import {
Input,
NumberInput,
Select,
Cascader,
Radio,
Button,
DatePicker,
TimePicker,
} from '@hi-ui/hiui'
export const Validate = () => {
const FormItem = Form.Item
const RadioGroup = Radio.Group
const formRef = React.useRef(null)
const [cascaderOptions] = React.useState([
{
id: '手机',
title: '手机',
children: [
{
id: '小米',
title: '小米',
children: [
{
id: '小米3',
title: '小米3',
},
{
id: '小米4',
title: '小米4',
},
],
},
],
},
])
const [rules] = React.useState({
region: [
{
required: true,
message: '请选择区域',
},
],
store: [
{
required: true,
message: '请选择门店',
},
],
count: [
{
validator: (rule, value, cb) => {
const count = +value
if (isNaN(count)) {
cb(new Error('请输入数字'))
} else if (count <= 0) {
cb(new Error('必须是正数'))
} else {
cb()
}
},
},
],
count2: [
{
required: true,
message: '请输入数量',
},
],
})
return (
<>
)
}
```
### 校验指定表单项
针对单个表单控件值进行校验
```tsx
import React from 'react'
import Form, { FormHelpers } from '@hi-ui/form'
import Input from '@hi-ui/input'
import Button from '@hi-ui/button'
import Grid from '@hi-ui/grid'
export const ValidateField = () => {
const { Row, Col } = Grid
const FormItem = Form.Item
const FormReset = Form.Reset
const FormSubmit = Form.Submit
const formRef = React.useRef(null)
const [formData, setFormData] = React.useState({
phone: '',
passwordConfirm: '',
password: '',
code: '',
})
const [countDown, setCountDown] = React.useState(60)
const [codeDisabled, setCodeDisabled] = React.useState(false)
const getCode = () => {
const countDownTimer = setInterval(() => {
if (countDown - 1 <= 0) {
clearInterval(countDownTimer)
setCountDown(60)
setCodeDisabled(false)
return
}
setCountDown((prev) => prev - 1)
}, 1000)
}
return (
<>
)
}
```
### 是否显示校验提示
适用于无需展示校验提示的场景
```tsx
import React from 'react'
import Form from '@hi-ui/form'
import Input from '@hi-ui/input'
import Button from '@hi-ui/button'
import Card from '@hi-ui/card'
export const ValidateMessage = () => {
const FormItem = Form.Item
return (
<>
)
}
```
### 滑动到错误字段
校验失败时，表单会自动滚动至第一个未通过的表单项
```tsx
import React from 'react'
import Form, { FormHelpers, FormRules } from '@hi-ui/form'
import Input from '@hi-ui/input'
import { Select } from '@hi-ui/select'
import { Cascader } from '@hi-ui/cascader'
import Radio from '@hi-ui/radio'
import Button from '@hi-ui/button'
export const ScrollToError = () => {
const FormItem = Form.Item
const RadioGroup = Radio.Group
const formRef = React.useRef(null)
const [cascaderOptions] = React.useState([
{
id: '手机',
title: '手机',
children: [
{
id: '小米',
title: '小米',
children: [
{
id: '小米3',
title: '小米3',
},
{
id: '小米4',
title: '小米4',
},
],
},
],
},
])
const [rules] = React.useState({
region: [
{
required: true,
message: '请选择区域',
},
],
store: [
{
required: true,
message: '请选择门店',
},
],
count: [
{
required: true,
validator: (rule, value, cb) => {
const count = +value
if (isNaN(count)) {
cb(new Error('请输入数字'))
} else if (count <= 0) {
cb(new Error('必须是正数'))
} else {
cb()
}
},
},
],
})
return (
<>
)
}
```
### 设置表单值
控制表单项的值
```tsx
import React from 'react'
import Form, { FormHelpers } from '@hi-ui/form'
import Input from '@hi-ui/input'
import Button from '@hi-ui/button'
import { Select } from '@hi-ui/select'
import Grid from '@hi-ui/grid'
export const SetValues = () => {
const { Row, Col } = Grid
const FormItem = Form.Item
const FormSubmit = Form.Submit
const FormReset = Form.Reset
const formRef = React.useRef(null)
const [singleList] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '手机', id: '2' },
])
return (
<>
)
}
```
### 获取表单值
静默获取表单值：不触发校验
```tsx
import React from 'react'
import Form, { FormHelpers } from '@hi-ui/form'
import Input from '@hi-ui/input'
import Button from '@hi-ui/button'
import message from '@hi-ui/message'
export const GetValues = () => {
const FormItem = Form.Item
const formRef = React.useRef(null)
return (
<>
)
}
```
### 自定义渲染表单控件
```tsx
import React from 'react'
import Form from '@hi-ui/form'
import Input from '@hi-ui/input'
export const Render = () => {
const FormItem = Form.Item
return (
<>
)
}
```
### 字段嵌套
```tsx
import React from 'react'
import Form, { FormHelpers } from '@hi-ui/form'
import Input from '@hi-ui/input'
export const NestedField = () => {
const FormItem = Form.Item
const FormReset = Form.Reset
const FormSubmit = Form.Submit
const formRef = React.useRef(null)
return (
<>
)
}
```
### 动态表单组
动态 Form 删减表单组
```tsx
import React from 'react'
import Form, { FormListHelper } from '@hi-ui/form'
import Input from '@hi-ui/input'
import Button from '@hi-ui/button'
export const List = () => {
const FormItem = Form.Item
const FormList = Form.List
const formListRef = React.useRef(null)
return (
<>
)
}
```
### 表单联动
根据数据控制某个表单的显示隐藏或校验规则
```tsx
import React from 'react'
import Form, { FormHelpers } from '@hi-ui/form'
import Button from '@hi-ui/button'
import message from '@hi-ui/message'
import Select from '@hi-ui/select'
import { Counter } from '@hi-ui/counter'
import Checkbox from '@hi-ui/checkbox'
import { DatePicker } from '@hi-ui/date-picker'
import { Cascader } from '@hi-ui/cascader'
import Radio from '@hi-ui/radio'
import { Switch } from '@hi-ui/switch'
import { Rating } from '@hi-ui/rating'
import { Upload } from '@hi-ui/upload'
export const Cascade = () => {
const FormItem = Form.Item
const FormReset = Form.Reset
const FormSubmit = Form.Submit
const CheckboxGroup = Checkbox.Group
const RadioGroup = Radio.Group
const formRef = React.useRef(null)
const [formData, setFormData] = React.useState({
controlCounter: 'show',
select: '3',
counter: 3,
radio: 0,
rating: 3,
checkbox: [],
switch: false,
})
return (
<>
)
}
```
### 自定义样式
Form 传入的 label/content 会作为所有 Form.Item 的默认样式；Form.Item 单独传入 label/content 时以 Form.Item 为准（覆盖 Form）
```tsx
import React, { useState } from 'react'
import { Row, Col } from '@hi-ui/grid'
import List from '@hi-ui/list'
import Form, { FormSemanticName } from '@hi-ui/form'
import Input from '@hi-ui/input'
export const Semantic = () => {
const [selected, setSelected] = useState()
const FormItem = Form.Item
const highlightOutline = { outline: '2px solid #ffbe0a' }
return (
<>
{
return (
{
setSelected(dataItem.title as FormSemanticName)
}}
onMouseLeave={() => {
setSelected(undefined)
}}
>
)
}}
/>
)
}
```
## Props
### Form Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------- | ---------- |
| innerRef | 提供辅助方法的内部引用 | Ref\>> | - | - |
| labelWidth | label 宽度，可用任意 CSS 长度单位 | ReactText | - | - |
| labelPlacement | label 对齐的方式 | "left" \| "right" \| "top" | "left" \| "right" \| "top" | "right" |
| placement | label 和表单控件的放置方式 | "vertical" \| "horizontal" | "vertical" \| "horizontal" | "vertical" |
| contentPosition | 在 vertical 放置时，label 相对表单控件垂直对齐的方式 | "top" \| "center" \| "bottom" | "top" \| "center" \| "bottom" | "center" |
| showColon | 配置是否展示冒号 | boolean | true \| false | - |
| showRequiredOnValidateRequired | FormItem 开启 filed 的 required 校验时，展示红色星号 | boolean | true \| false | false |
| showValidateMessage | 是否显示校验提示 | boolean | true \| false | true |
| size | 设置表单尺寸 | HiBaseSizeEnum | "xs" \| "sm" \| "md" \| "lg" | - |
| initialValues *(required)* | 初始化表单值，只在初始化以及重置时生效；该值是不受控的，和表单中的 defaultValue 的作用类似 | Record\ | - | - |
| initialErrors | 初始化表单错误 | Record\ | - | - |
| rules | 校验规则，设置字段的校验逻辑 | Record\ | - | - |
| validateTrigger | 设置统一的表单校验时机 | string \| string\[] | string \| string\[] | - |
| onValuesChange | 字段值更新时触发回调事件：changedValues: 改变的表单对象，allValues: 所有表单项对象 | ((changedValue: Record\, allValues: Record\) => void) | - | - |
| onSubmit | 提交时回调 | ((values: Record\) => void) | - | - |
| onReset | 重置时回调 | ((values: Record\) => void \| Promise\) | (values: Record\) => void \| Promise\ | - |
| scrollToFirstError | 提交失败自动滚动到第一个错误字段，配置参考：https\://github.com/scroll-into-view/scroll-into-view-if-needed?tab=readme-ov-file#options | boolean \| StandardBehaviorOptions | false \| true \| StandardBehaviorOptions | - |
| classNames | | FormSemanticClassNames | - | - |
| styles | | FormSemanticStyles | - | - |
### FormItem Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| children | 表单控件或其渲染函数 | ((string \| number \| boolean \| {} \| ReactElement\> \| ReactNodeArray \| ReactPortal \| ((props: Record<...>) => ReactNode)) & (boolean \| ... 2 more ... \| ReactPortal)) \| null | null \| string \| number \| false \| true \| {} \| ReactElement\> \| ReactNodeArray \| ReactPortal \| string & {} \| (props: Record\) => ReactNode \| string & ReactElement\> \| string & ReactNodeArray \| string & ReactPortal \| number & {} \| number & ReactElement\> \| number & ReactNodeArray \| number & ReactPortal \| false & {} \| false & ReactElement\> \| false & ReactNodeArray \| false & ReactPortal \| true & {} \| true & ReactElement\> \| true & ReactNodeArray \| true & ReactPortal \| {} & string \| {} & number \| {} & false \| {} & true \| ReactElement\> & string \| ReactElement\> & number \| ReactElement\> & false \| ReactElement\> & true \| ReactElement\> & ReactNodeArray \| ReactElement\> & ReactPortal \| ReactNodeArray & string \| ReactNodeArray & number \| ReactNodeArray & false \| ReactNodeArray & true \| ReactNodeArray & ReactElement\> \| ReactNodeArray & ReactPortal \| ReactPortal & string \| ReactPortal & number \| ReactPortal & false \| ReactPortal & true \| ReactPortal & ReactElement\> \| ReactPortal & ReactNodeArray \| ((props: Record\) => ReactNode) & string \| ((props: Record\) => ReactNode) & number \| ((props: Record\) => ReactNode) & false \| ((props: Record\) => ReactNode) & true \| ((props: Record\) => ReactNode) & ReactElement\> \| ((props: Record\) => ReactNode) & ReactNodeArray \| ((props: Record\) => ReactNode) & ReactPortal | - |
| render | 支持表单控件 render 渲染 | ((props: Record\) => any) | - | - |
| field | 字段名，支持数组 | FormFieldPath | - | - |
| valueType | 指定控件值数据结构类型 | FormRuleType | - | - |
| rules | 设置字段的验证规则，会覆盖 Form 设置的 rules | FormRuleModel\[] | - | - |
| valuePropName | 自定义设置 Form 往表单控件注入值的属性，如 Switch Radio Checkbox 的是 'checked' | string | - | - |
| valueDispatchTransform | form 从控件个体采集数据的转换器，最终会把返回值转发给 Form | ((...args: any\[]) => any) | - | - |
| valueConnectTransform | 控件个体接收 form 下发数据的转换器，最终会把返回值转发给 FormField | ((value: any) => any) | - | - |
| valueChangeFuncPropName | 自定义设置 Form 从表单控件采集数据回调的属性 | string | - | - |
| validateTrigger | 设置触发该字段校验的时机（值必须是回调函数），会覆盖 Form 设置的 validateTrigger | string \| string\[] | string \| string\[] | - |
| itemClassNames | 由 Form.Item 传入的语义化 classNames（label / content），勿直接使用
@internal | FormLabelSemanticClassNames | - | - |
| itemStyles | 由 Form.Item 传入的语义化 styles（label / content），勿直接使用
@internal | FormLabelSemanticStyles | - | - |
| labelPlacement | label 放置的位置 | "left" \| "right" \| "top" | "left" \| "right" \| "top" | - |
| required | 是否显示必填信号。这里不做校验处理，若需校验请使用 rules 进行设置 | boolean | true \| false | - |
| showColon | 是否显示冒号 | boolean | true \| false | - |
| labelWidth | label 宽度，可使用任意 CSS 长度单位。优先级高于 Form 设置的 labelWidth | ReactText | - | - |
| label | label 文案 | ReactNode | - | - |
| contentPosition | 在 vertical 放置时，label 相对表单控件垂直对齐的方式，优先级低于 Form | "top" \| "center" \| "bottom" | "top" \| "center" \| "bottom" | - |
| formMessage | 提示信息 | ReactNode | - | - |
| showValidateMessage | 是否显示校验提示。优先级高于 Form 设置的 showValidateMessage | boolean | true \| false | - |
| classNames | | FormItemSemanticClassNames | - | - |
| styles | | FormItemSemanticStyles | - | - |
### FormList Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ------ |
| children | 表单控件渲染函数 | ((fields: FormListChildField\[], action: FormListChildrenAction) => ReactElement\>) | (fields: FormListChildField\[], action: FormListChildrenAction) => ReactElement\> | - |
| name *(required)* | 列表名称 | FormFieldPath | - | - |
| innerRef | 提供辅助方法的内部引用 | Ref\ | - | - |
### FormSubmit Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------- | --------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| onClick | 点击提交后触发 | ((result: any, error: any) => void) | - | - |
| type | 设置按钮类型 | "primary" \| "success" \| "danger" \| "default" \| "secondary" | "primary" \| "success" \| "danger" \| "default" \| "secondary" | "primary" |
| size | 设置按钮尺寸 | "xs" \| "sm" \| "md" \| "lg" | "xs" \| "sm" \| "md" \| "lg" | - |
| target | 同 a 标签的 target 属性，仅在设置 href 后有效 | "\_self" \| "\_blank" \| "\_parent" \| "\_top" | "\_self" \| "\_blank" \| "\_parent" \| "\_top" | - |
| classNames | | ButtonSemanticClassNames | - | - |
| styles | | ButtonSemanticStyles | - | - |
| href | 设置按钮链接，设置后将用 a 标签渲染按钮 | string | - | - |
| disabled | 设置按钮是否禁用 | boolean | true \| false | - |
| appearance | 设置按钮外观 | "link" \| "line" \| "text" \| "solid" \| "filled" | "link" \| "line" \| "text" \| "solid" \| "filled" | - |
| loading | 是否显示 loading | boolean | true \| false | - |
| icon | 设置按钮图标 | ReactNode \| ReactNode\[] | null \| string \| number \| false \| true \| {} \| ReactElement\> \| ReactNodeArray \| ReactPortal \| ReactNode\[] | - |
| shape | 设置按钮形状 | "square" \| "round" | "square" \| "round" | - |
### FormReset Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------- | --------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| onClick | 点击重置后触发 | (() => void) | - | - |
| type | 设置按钮类型 | "primary" \| "success" \| "danger" \| "default" \| "secondary" | "primary" \| "success" \| "danger" \| "default" \| "secondary" | - |
| size | 设置按钮尺寸 | "xs" \| "sm" \| "md" \| "lg" | "xs" \| "sm" \| "md" \| "lg" | - |
| appearance | 设置按钮外观 | "link" \| "line" \| "text" \| "solid" \| "filled" | "link" \| "line" \| "text" \| "solid" \| "filled" | - |
| disabled | 设置按钮是否禁用 | boolean | true \| false | - |
| loading | 是否显示 loading | boolean | true \| false | - |
| href | 设置按钮链接，设置后将用 a 标签渲染按钮 | string | - | - |
| target | 同 a 标签的 target 属性，仅在设置 href 后有效 | "\_self" \| "\_blank" \| "\_parent" \| "\_top" | "\_self" \| "\_blank" \| "\_parent" \| "\_top" | - |
| icon | 设置按钮图标 | ReactNode \| ReactNode\[] | null \| string \| number \| false \| true \| {} \| ReactElement\> \| ReactNodeArray \| ReactPortal \| ReactNode\[] | - |
| shape | 设置按钮形状 | "square" \| "round" | "square" \| "round" | - |
| classNames | | ButtonSemanticClassNames | - | - |
| styles | | ButtonSemanticStyles | - | - |
### FormLabel Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------- | --------------------------------------------------------------------------------- | ----------------------------- | ----------------------------- | ------ |
| itemClassNames | 由 Form.Item 传入的语义化 classNames（label / content），勿直接使用
@internal | FormLabelSemanticClassNames | - | - |
| itemStyles | 由 Form.Item 传入的语义化 styles（label / content），勿直接使用
@internal | FormLabelSemanticStyles | - | - |
| labelPlacement | label 放置的位置 | "left" \| "right" \| "top" | "left" \| "right" \| "top" | - |
| required | 是否显示必填信号。这里不做校验处理，若需校验请使用 rules 进行设置 | boolean | true \| false | - |
| showColon | 是否显示冒号 | boolean | true \| false | - |
| labelWidth | label 宽度，可使用任意 CSS 长度单位。优先级高于 Form 设置的 labelWidth | ReactText | - | - |
| label | label 文案 | ReactNode | - | - |
| contentPosition | 在 vertical 放置时，label 相对表单控件垂直对齐的方式，优先级低于 Form | "top" \| "center" \| "bottom" | "top" \| "center" \| "bottom" | - |
| formMessage | 提示信息 | ReactNode | - | - |
| showValidateMessage | 是否显示校验提示。优先级高于 Form 设置的 showValidateMessage | boolean | true \| false | - |
## Type
### FormFieldPath
> (string | number)[] | string | number
### FormHelpers
| 名称 | 说明 | 类型 |
| ------------------ | ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| reset | 重置整个表单的验证,对应 Form.Reset 中的 API，如果不指定 nextState，则重置为 initialValues | (nextState?: { values?: any, errors?: any }) => Promise |
| validate | 对整个表单进行校验, 对应 Form.Submit 中的 API | () => Promise> |
| validateField | 对指定表单字段进行校验 | (fields: FormFieldPath) => Promise |
| setFieldValue | 设置某个表单字段的值，在更新表单数据的的时候，使用该方法 | (field: FormFieldPath, value: any) => void |
| setFieldsValue | 设置多个表单的值，在异步获取的数据回显的时候，使用该方法 | (field: Record \| ((prevValues: Record) => Record)) => void |
| getFieldValue | 获取一个字段名对应的 Value，返回为对应 Field 值 | (field: FormFieldPath) => any |
| getFieldsValue | 获取所有字段名对应的 Values 返回为字典映射数据结构 | () => Record |
| getFieldError | 获取一组字段名对应的 errorMessage，返回为对应 field 错误信息 | (field: FormFieldPath) => any |
| getFieldsError | 获取所有字段名对应的错误信息，返回为字典映射数据结构 | () => Record |
| clearValidates | 移除所有表单项的校验结果 | () => void |
| clearFieldValidate | 移除表单项的校验结果，传入待移除的表单项的 field 属性组成的数组 | (fields: FormFieldPath) => void |
### FormRuleModel
> [更多规则](https://github.com/yiminghe/async-validator)
| 名称 | 说明 | 类型 |
| -------------- | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| enum | 是否匹配枚举中的值 | any[] |
| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number |
| max | 必须设置 `type`：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度 | number |
| message | 错误信息 | string |
| min | 必须设置 `type`：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度 | number |
| pattern | 正则表达式匹配 | RegExp |
| required | 是否为必选字段 | boolean |
| transform | 将字段值转换成目标值后进行校验 | (value) => any |
| type | 类型，常见有 `string` \|`number` \|`boolean` \| `email`。更多请参考[此处](https://github.com/yiminghe/async-validator#type) | string |
| validator | 自定义校验 | (rule,value,callback) => void |
| asyncValidator | 自定义异步校验 | (rule,value,callback) => void | Promise |
| whitespace | 如果字段仅包含空格则校验不通过 | boolean |
# GlobalContext 上下文
全局设置上下文。
## 使用示例
### 基础用法
```tsx
import React, { useContext } from 'react'
import { GlobalContext } from '@hi-ui/global-context'
export const Basic = () => {
useContext(GlobalContext)
return (
<>
)
}
```
## Props
### GlobalProvider Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------ | ---- | ---------------- | ------ | ------ |
| value *(required)* | | UseGlobalContext | - | - |
# Grid 栅格组件
24 栏栅格系统，用于实现内容区域的各种布局
## 使用示例
### 基础用法
无间隔水平排列
```tsx
import React from 'react'
import Grid from '@hi-ui/grid'
export const Basic = () => {
const { Row, Col } = Grid
const blockStyle: React.CSSProperties = {
width: '100%',
padding: '16px 0',
textAlign: 'center',
opacity: '1',
color: '#fff',
}
return (
<>
col-24
col-6
25%
col-6
25%
col-6
25%
col-6
25%
col-6
25%
col-6
25%
)
}
```
### 区块间隔
在 Row 设置 gutter = true 来使水平排列有间隔
```tsx
import React from 'react'
import Grid from '@hi-ui/grid'
export const Gutter = () => {
const { Row, Col } = Grid
const blockStyle: React.CSSProperties = {
width: '100%',
padding: '16px 0',
textAlign: 'center',
opacity: '1',
color: '#fff',
}
return (
<>
col-6
25%
col-6
25%
col-6
25%
col-6
25%
)
}
```
### 左右偏移
设置 offset 来指定左右的偏移量
```tsx
import React from 'react'
import Grid from '@hi-ui/grid'
export const Offset = () => {
const { Row, Col } = Grid
const blockStyle: React.CSSProperties = {
width: '100%',
padding: '16px 0',
textAlign: 'center',
opacity: '1',
color: '#fff',
}
return (
<>
col-8
col-6-offset-6
col-4
col-4
col-6-offset-4
col-4
col-6
)
}
```
### 嵌套
嵌套栅格来完成布局
```tsx
import React from 'react'
import Grid from '@hi-ui/grid'
export const Nested = () => {
const { Row, Col } = Grid
const blockStyle: React.CSSProperties = {
width: '100%',
padding: '16px 0',
textAlign: 'center',
opacity: '1',
color: '#fff',
}
return (
<>
)
}
```
### 对齐排列
设置 justify 来指定对齐方式
```tsx
import React from 'react'
import Grid from '@hi-ui/grid'
export const Justify = () => {
const { Row, Col } = Grid
const blockStyle: React.CSSProperties = {
width: '100%',
padding: '16px 0',
textAlign: 'center',
opacity: '1',
color: '#fff',
}
return (
<>
col-6
col-6
col-6
col-6
col-6
)
}
```
### 响应式
配置 span 在不同屏幕宽度下所包含的栅格数，支持 { xs, sm, md, lg, xl } 设置。请通过改变窗口宽度查看示例效果
```tsx
import React from 'react'
import Grid from '@hi-ui/grid'
export const Responsive = () => {
const { Row, Col } = Grid
const blockStyle: React.CSSProperties = {
width: '100%',
padding: '16px 0',
textAlign: 'center',
opacity: '1',
color: '#fff',
}
return (
<>
span
.xs-24 .md-12 .lg-6
.xs-24 .md-12 .lg-6
.xs-24 .md-12 .lg-6
.xs-24 .md-12 .lg-6
offset
.xs-12 .md-8
xs-12 .md-8
xs-12 .md-8
)
}
```
### 重排序
通过配置 order 优化 Grid 项的展示空间的排序位置
```tsx
import React from 'react'
import Grid from '@hi-ui/grid'
export const Order = () => {
const { Row, Col } = Grid
const blockStyle: React.CSSProperties = {
width: '100%',
padding: '16px 0',
textAlign: 'center',
opacity: '1',
color: '#fff',
}
return (
<>
)
}
```
### AutoGrid 基础
children / columnCount / data-span / gutter 用法
```tsx
import React from 'react'
import { AutoGrid } from '@hi-ui/grid'
export const AutoGridBasic = () => {
const blockStyle: React.CSSProperties = {
width: '100%',
padding: '16px 0',
textAlign: 'center',
opacity: '1',
color: '#fff',
}
return (
<>
children 默认 3 列
{[1, 2, 3, 4, 5, 6].map((i) => (
Item {i}
))}
子元素可通过 span / data-span 自定义占据栅格数
span 12
span 12
span 8
span 8
span 8
)
}
```
### AutoGrid Nodes API
使用 nodes 替代 children，支持 props 对象或函数
```tsx
import React from 'react'
import { AutoGrid } from '@hi-ui/grid'
export const AutoGridNodes = () => {
const blockStyle: React.CSSProperties = {
width: '100%',
padding: '16px 0',
textAlign: 'center',
opacity: '1',
color: '#fff',
}
const nodes = [
{ key: '1', elem: 1
},
{
key: '2',
elem: 2
,
props: { span: 16 },
},
{
key: '3',
elem: 3
,
props: ({ columnCount }: { columns: number; columnCount: number }) => ({
span: 24,
}),
},
]
return (
<>
)
}
```
### DynamicGrid 基础
可拖拽容器调整宽度，根据 breakpoints 自动调整列数，onColumnCountChange 回调当前列数
```tsx
import React, { useState } from 'react'
import { DynamicGrid } from '@hi-ui/grid'
export const DynamicGridBasic = () => {
const [count, setCount] = useState(0)
const blockStyle: React.CSSProperties = {
width: '100%',
padding: '16px 0',
textAlign: 'center',
opacity: '1',
color: '#fff',
}
const resizeStyle: React.CSSProperties = {
resize: 'horizontal',
overflow: 'auto',
width: 500,
minWidth: 300,
maxWidth: 860,
border: '2px dashed #e5e7eb',
borderRadius: 8,
padding: 16,
}
const breakpoints: [number, number][] = [
[400, 1],
[600, 2],
[Infinity, 3],
]
console.log('count', count)
return (
<>
{
console.log('onColumnCountChange', count)
setCount(count)
}}
gutter
rowGap={16}
>
{[1, 2, 3, 4, 5, 6].map((i) => (
Item {i}
))}
可拖拽容器右侧边缘调整宽度，观察列数自动变化，当前列数: {count || '-'}
)
}
```
## Props
### Row Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------- | ------------------------------------------ | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------ |
| align | 垂直对齐方式 | GridAlignEnum \| GridResponsiveSize\ | "flex-start" \| "flex-end" \| "center" \| "stretch" \| GridResponsiveSize\ | - |
| justify | 水平对齐方式 | GridJustifyEnum \| GridResponsiveSize\ | "flex-start" \| "flex-end" \| "center" \| "space-around" \| "space-between" \| GridResponsiveSize\ | - |
| gutter | Row 里面元素之间是否有外边距，建议使用偶数 | number \| boolean | number \| false \| true | - |
| columns | 设置栅格列总数，一般是 12 或者 24 或者 48 | number | - | 24 |
| rowGap | Row 与 Row 之间的距离 | number | - | 16 |
### Col Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------- | ----------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------ |
| span | Col 元素占多少个栅格 | number \| GridResponsiveSize\ | number \| GridResponsiveSize\ | - |
| offset | Col 元素偏移多少个栅格 | number \| GridResponsiveSize\ | number \| GridResponsiveSize\ | - |
| justify | 里面的元素排布方式 | GridJustifyEnum \| GridResponsiveSize\ | "flex-start" \| "flex-end" \| "center" \| "space-around" \| "space-between" \| GridResponsiveSize\ | - |
| order | Col项重排序，数值越大，越在后面展示 | number \| GridResponsiveSize\ | number \| GridResponsiveSize\ | - |
### AutoGrid Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| align | 垂直对齐方式 | GridAlignEnum \| GridResponsiveSize\ | "flex-start" \| "flex-end" \| "center" \| "stretch" \| GridResponsiveSize\ | - |
| justify | 水平对齐方式 | GridJustifyEnum \| GridResponsiveSize\ | "flex-start" \| "flex-end" \| "center" \| "space-around" \| "space-between" \| GridResponsiveSize\ | - |
| gutter | Row 里面元素之间是否有外边距，建议使用偶数 | number \| boolean | number \| false \| true | true |
| columns | 设置栅格列总数，一般是 12 或者 24 或者 48 | number | - | 24 |
| rowGap | Row 与 Row 之间的距离 | number | - | 0 |
| children | 子元素清单
- 存在子元素时，会自动按照默认的配置增加网格包裹
- 如需控制子元素占据的网格数，请在元素上增加 span 或者 data-span 属性 | ((boolean \| ReactChild \| ReactFragment \| ReactPortal \| null) & ReactNode\[]) | ReactNode\[] \| string & ReactNode\[] \| number & ReactNode\[] \| false & ReactNode\[] \| true & ReactNode\[] \| ReactElement\> & ReactNode\[] \| ReactNodeArray & ReactNode\[] \| ReactPortal & ReactNode\[] | - |
| nodes | 列元素清单 | AutoGridNodeType\[] | - | - |
| columnCount | 列数 | number | - | - |
### DynamicGrid Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| align | 垂直对齐方式 | GridAlignEnum \| GridResponsiveSize\ | "flex-start" \| "flex-end" \| "center" \| "stretch" \| GridResponsiveSize\ | - |
| justify | 水平对齐方式 | GridJustifyEnum \| GridResponsiveSize\ | "flex-start" \| "flex-end" \| "center" \| "space-around" \| "space-between" \| GridResponsiveSize\ | - |
| gutter | Row 里面元素之间是否有外边距，建议使用偶数 | number \| boolean | number \| false \| true | - |
| columns | 设置栅格列总数，一般是 12 或者 24 或者 48 | number | - | - |
| rowGap | Row 与 Row 之间的距离 | number | - | - |
| children | 子元素清单
- 存在子元素时，会自动按照默认的配置增加网格包裹
- 如需控制子元素占据的网格数，请在元素上增加 span 或者 data-span 属性 | ((boolean \| ReactChild \| ReactFragment \| ReactPortal \| null) & ReactNode\[]) | ReactNode\[] \| string & ReactNode\[] \| number & ReactNode\[] \| false & ReactNode\[] \| true & ReactNode\[] \| ReactElement\> & ReactNode\[] \| ReactNodeArray & ReactNode\[] \| ReactPortal & ReactNode\[] | - |
| nodes | 列元素清单 | AutoGridNodeType\[] | - | - |
| columnCount | 列数
列数，表示一行包含元素的数量
@desc 传入此值时，列数固定，不因容器宽度变化而变化
@desc 不传时，但额外传入 wrapperElRef 时，列数会根据容器宽度变化而变化 | number | - | "3" |
| defaultColumnCount | 默认列数
@desc 与 columnCount 的区别是，仅会在初始化时使用
@desc 传入后，列数仍会根据容器宽度变化而变化 | number | - | - |
| wrapperElRef | 组件的外部包裹元素
@desc 传入此值，同时不传 columnCount 时，列数会根据容器宽度变化而变化 | RefObject\ | - | - |
| onColumnCountChange | 实际可视列数变化回调 | ((columnCount: number) => void) | - | - |
| breakpoints | 列数变化断点
@desc 默认使用 GRID\_VIEWPORT\_BREAKPOINTS: \[576, 1], \[768, 2], \[992, 3], \[1200, 4], \[Infinity, 4] | BreakpointType\[] | - | - |
| sensitive | 是否对初始布局变化敏感
@desc 当设置为 true 时，会等待布局稳定后再渲染内容，避免视觉跳动 | boolean | true \| false | - |
## Type
### GridResponsiveSize
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ---------------- | --------- | ------------- | ------ |
| xs | 设置屏幕 < 576px 时响应式栅格数 | T | - | - |
| sm | 设置屏幕 >= 576px 时响应式栅格数 | T | - | - |
| md | 设置屏幕 >= 768px 时响应式栅格数 | T | - | - |
| lg | 设置屏幕 >= 992px 时响应式栅格数 | T | - | - |
| xl | 设置屏幕 >= 1200px 时响应式栅格数 | T | - | - |
# Highlighter 文本高亮
用于文本关键字高亮展示，实现快速结果匹配。
## 使用示例
### 基础用法
```tsx
import React from 'react'
import Highlighter from '@hi-ui/highlighter'
export const Basic = () => {
return (
<>
我想要高亮的文案是：高亮
)
}
```
### 自定义匹配规则
```tsx
import React from 'react'
import Highlighter from '@hi-ui/highlighter'
export const Rule = () => {
return (
<>
关键字 hiui，可以匹配上 hiui，也可匹配上 HiUI
)
}
```
### 设置高亮样式
```tsx
import React from 'react'
import Highlighter from '@hi-ui/highlighter'
export const Style = () => {
return (
<>
请注意，这是一段高危操作！！
)
}
```
## Props
### Highlighter Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------ | -------------- | ---------------- | ---------------- | ------ |
| keyword | 匹配高亮关键词 | string \| RegExp | string \| RegExp | - |
| highlightClassName | 高亮类名 | string | - | - |
| highlightStyle | 高亮样式 | CSSProperties | - | - |
# IconButton 图标按钮
带有图标的按钮。
## 使用示例
### 基础用法
```tsx
import React from 'react'
import IconButton from '@hi-ui/icon-button'
import { CloseOutlined } from '@hi-ui/icons'
export const Basic = () => {
return (
<>
} />
} active />
} effect />
} effect active />
测试
} effect />
文档流空间是否占用
)
}
```
## Props
### IconButton Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | ----------------------------------------- | --------- | ------------- | ------ |
| icon *(required)* | icon 图标 | ReactNode | - | - |
| active | 是否被激活 | boolean | true \| false | false |
| virtualArea | 扩大点击区域 | boolean | true \| false | true |
| effect | 是否开启 hover 和 focus 展示底色变化效果 | boolean | true \| false | false |
| disabled | 是否禁用 | boolean | true \| false | false |
| effectColor | 鼠标悬浮时的颜色 | string | - | - |
# Input 输入框
用来接收文本型内容的组件
## 使用示例
### 基础用法
可获取有限长度的字符串，不折行显示
```tsx
import React from 'react'
import Input from '@hi-ui/input'
export const Basic = () => {
return (
<>
console.log(e.target.value, t)} />
)
}
```
### 受控
```tsx
import React from 'react'
import Input from '@hi-ui/input'
export const Controlled = () => {
const [value, setValue] = React.useState('我是输入文本')
return (
<>
)
}
```
### 不同UI风格
UI风格包括线性、面性、无UI三种
```tsx
import React from 'react'
import Input from '@hi-ui/input'
import { ExpressionOutlined, AudioOutlined, MessageOutlined } from '@hi-ui/icons'
export const Appearance = () => {
return (
<>
)
}
```
### 不同尺寸
```tsx
import React from 'react'
import Input from '@hi-ui/input'
import { ExpressionOutlined, AudioOutlined } from '@hi-ui/icons'
export const Size = () => {
return (
<>
)
}
```
### 前后外置元素
将输入框与外置的其他元素组合使用
```tsx
import React from 'react'
import Input from '@hi-ui/input'
import { ExpressionOutlined, AudioOutlined, SearchOutlined, MessageOutlined } from '@hi-ui/icons'
export const Addon = () => {
return (
<>
mixin addon
}
suffix={
}
append={
Send
}
>
)
}
```
### 组合
```tsx
import React from 'react'
import Input from '@hi-ui/input'
import { SearchOutlined } from '@hi-ui/icons'
import { Select } from '@hi-ui/select'
import { message } from '@hi-ui/message'
import Button from '@hi-ui/button'
export const Group = () => {
return (
<>
}
/>
}
onClick={() => {
message.open({ type: 'success', title: '查询成功', duration: 2000 })
}}
/>
}
/>
)
}
```
### 可清除
```tsx
import React from 'react'
import Input from '@hi-ui/input'
export const Clearable = () => {
return (
<>
console.log('change', e.target.value)}
onBlur={(e) => console.log('onBlur', e.target.value)}
>
)
}
```
### 无效状态
```tsx
import React from 'react'
import Input from '@hi-ui/input'
export const Invalid = () => {
return (
<>
)
}
```
### 禁用状态
```tsx
import React from 'react'
import Input from '@hi-ui/input'
export const Disabled = () => {
return (
<>
)
}
```
### 手动聚焦
通过 ref 获取 input 引用手动调用 focus 方法
```tsx
import React from 'react'
import Input from '@hi-ui/input'
import Button from '@hi-ui/button'
export const Focus = () => {
const inputRef = React.useRef(null)
return (
<>
)
}
```
### 自动 Trim
```tsx
import React from 'react'
import Input from '@hi-ui/input'
export const Trim = () => {
return (
<>
console.log('change', e.target.value)}
trimValueOnBlur
>
)
}
```
### 特殊格式
满足不同业务场景的特殊格式
```tsx
import React from 'react'
import Input from '@hi-ui/input'
export const Type = () => {
return (
<>
身份证
{
console.log(event.target.value, value)
}}
/>
手机号
{
console.log(event.target.value, value)
}}
/>
金额
{
console.log(event.target.value, value)
}}
/>
银行卡
{
console.log(event.target.value, value)
}}
/>
)
}
```
### 带Tooltip
```tsx
import React from 'react'
import Input from '@hi-ui/input'
import Tooltip from '@hi-ui/tooltip'
export const WithTooltip = () => {
const [value, setValue] = React.useState('Tooltip')
return (
<>
setValue(e.target.value)}
>
)
}
```
### 自定义样式
通过 classNames 和 styles 属性，可以对组件进行更细粒度的样式控制
```tsx
import React, { useState } from 'react'
import { Row, Col } from '@hi-ui/grid'
import List from '@hi-ui/list'
import Input, { InputSemanticName } from '@hi-ui/input'
export const Semantic = () => {
const [selected, setSelected] = useState()
return (
<>
)
}
```
## Props
### Input Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------ | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------- |
| readOnly | 开启输入框只读 | boolean | true \| false | - |
| disabled | 是否禁用 | boolean | true \| false | - |
| autoFocus | 开启输入框自动聚焦 | boolean | true \| false | - |
| value | 设置输入框的值 | string | - | - |
| defaultValue | 设置输入框的默认值 | string | - | - |
| type | 设置输入框类型 | InputTypeEnum | "number" \| "text" \| "id" \| "tel" \| "card" \| "amount" \| "email" \| "password" | - |
| maxLength | 输入最大长度 | number | - | - |
| prepend | 输入框前置外部内容 | ReactNode | - | - |
| append | 输入框后置外部内容 | ReactNode | - | - |
| prefix | 输入框前置内容 | ReactNode | - | - |
| suffix | 输入框后置内容 | ReactNode | - | - |
| clearable | 是否可清空，通过点击右侧清除按钮 | boolean | true \| false | false |
| trimValueOnBlur | 开启失焦时触发对值的 trim，将触发 onChange 给用户 | boolean | true \| false | - |
| clearableTrigger | 清除按钮展示的触发形态 | "always" \| "hover" | "always" \| "hover" | "hover" |
| placeholder | 输入框占位符 | string | - | - |
| appearance | 设置展现形式
其中 \`underline\` 内部使用，不对外提供支持（风格去线型化：由线性过渡到面性） | InputAppearanceEnum | "line" \| "filled" \| "unset" \| "borderless" \| "underline" | "line" |
| size | 设置尺寸 | HiBaseSizeEnum | "xs" \| "sm" \| "md" \| "lg" | - |
| onChange | 值改变时的回调 | ((evt: ChangeEvent\, value: string) => void) | - | - |
| waitCompositionEnd | 是否等待文本段落组成完成 | boolean | true \| false | - |
| invalid | 开启表单控件组件输入无效态 | boolean | true \| false | false |
| classNames | | InputSemanticClassNames | - | - |
| styles | | InputSemanticStyles | - | - |
# InputGroup 输入框组合器
将表单控件或按钮进行组合，轻松扩展表单控件。
## 使用示例
### 基础用法
通过包裹多个表单控件，将它们进行组合展示
```tsx
import React from 'react'
import Input from '@hi-ui/input'
import Select from '@hi-ui/select'
import InputGroup from '@hi-ui/input-group'
export const Basic = () => {
return (
<>
)
}
```
### 不同组合形式
根据不同场景组合不同类型的表单控件
```tsx
import React from 'react'
import Input from '@hi-ui/input'
import Select from '@hi-ui/select'
import CheckSelect from '@hi-ui/check-select'
import Cascader from '@hi-ui/cascader'
import DatePicker from '@hi-ui/date-picker'
import Button from '@hi-ui/button'
import InputGroup from '@hi-ui/input-group'
export const Group = () => {
return (
<>
{/* Input + button */}
)
}
```
## Props
### InputGroup Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | -------------------------------- | ------- | ------------- | ------ |
| disabled | 统一设置被包裹表单控件的禁用状态 | boolean | true \| false | - |
# Layout 布局组件
提供了布局框架
## 使用示例
### 基础布局
```tsx
import React from 'react'
import Layout, { Header, Sider, Content, Footer } from '@hi-ui/layout'
export const Basic = () => {
// 侧边栏导航是否折叠
const [collapsed, setCollapsed] = React.useState(false)
return (
<>
)
}
```
### 侧边栏带普通菜单
默认情况下，侧边栏是展开的，可拖拽收起
```tsx
import React from 'react'
import {
AppStoreFilled,
QuestionCircleFilled,
MonitorFilled,
MobileFilled,
PadFilled,
EllipsisOutlined,
PlusOutlined,
} from '@hi-ui/icons'
import {
Button,
Avatar,
PageHeader,
Space,
Dropdown,
Menu,
Scrollbar,
EllipsisTooltip,
} from '@hi-ui/hiui'
import Layout, { Sider, Content, SearchTrigger, ProfilePopover, ActionItem } from '@hi-ui/layout'
export const WithMenu = () => {
// 侧边栏导航是否折叠
const [collapsed, setCollapsed] = React.useState(true)
const [activeMenuId, setActiveMenuId] = React.useState(1)
const [profileVisible, setProfileVisible] = React.useState(false)
const [settingsValue, setSettingsValue] = React.useState({})
const data = [
{
title: '首页',
id: 1,
icon: ,
},
{
title: '电视',
id: 2,
icon: ,
},
{
title: '手机',
id: 3,
icon: ,
children: [
{
title: '小米',
id: 'xiaomi',
},
{
title: '红米',
id: 'redmi',
},
],
},
{
title: '平板',
id: 4,
icon: ,
},
]
return (
<>
{collapsed ? null : (
系统名称
)}
} mini={collapsed}>
使用手册
用户名
admin@example.com
}
footer={ setProfileVisible(false)}>退出登录
}
settings={{
value: settingsValue,
data: [
{
id: 'timezone',
title: '时区',
subtitle: 'UTC+08:00',
children: [
{ id: 'timezone-1', title: '时区1' },
{ id: 'timezone-2', title: '时区2' },
{ id: 'timezone-3', title: '时区3' },
],
},
{
id: 'language',
title: '语言',
subtitle: '中文',
children: [
{ id: 'language-1', title: '语言1' },
{ id: 'language-2', title: '语言2' },
{ id: 'language-3', title: '语言3' },
],
},
],
onItemClick: (evt, item) => {
// evt.preventDefault()
},
onChange: (value) => {
setSettingsValue(value)
setProfileVisible(false)
},
}}
onClose={() => setProfileVisible(false)}
>
setProfileVisible(!profileVisible)}
>
{collapsed ? null :
用户名}
} />
}>
主操作
}
/>
)
}
```
### 侧边栏带浮动菜单
菜单部分联动交互可根据需求自行实现，以下示例实现了一套默认联动交互
```tsx
import React from 'react'
import {
AppStoreFilled,
MonitorFilled,
MobileFilled,
PadFilled,
MenuOutlined,
EllipsisOutlined,
PlusOutlined,
QuestionCircleFilled,
} from '@hi-ui/icons'
import {
MenuDataItem,
GroupMenu,
SideMenu,
useSideMenuCascade,
Button,
IconButton,
Avatar,
PageHeader,
EllipsisTooltip,
Space,
Dropdown,
} from '@hi-ui/hiui'
import Layout, {
Sider,
Content,
SearchTrigger,
FloatMenuContainer,
AppListPopover,
ProfilePopover,
ActionItem,
} from '@hi-ui/layout'
export const FloatMenu = () => {
const [data] = React.useState([
{
title: '首页',
id: 1,
icon: ,
},
{
title: 'Hello World',
id: 2,
icon: ,
children: [
{
title: '小米电视',
id: 21,
children: [
{
title: '小米电视5',
id: 211,
},
{
title: '小米电视4',
id: 212,
},
{
title: '小米电视3',
id: 213,
},
{
title: '小米电视2',
id: 214,
},
{
title: '小米电视1',
id: 215,
},
],
},
],
},
{
title: 'Hello World Hello World',
id: 3,
icon: ,
children: [
{
title: '小米',
id: 'xiaomi',
children: [
{
title: '小米10',
id: 'xiaomi10',
},
{
title: '小米9',
id: 'xiaomi9',
},
{
title: '小米8',
id: 'xiaomi8',
},
{
title: '小米7',
id: 'xiaomi7',
},
{
title: '小米6',
id: 'xiaomi6',
},
{
title: '小米5',
id: 'xiaomi5',
},
{
title: '小米4',
id: 'xiaomi4',
},
{
title: '小米3',
id: 'xiaomi3',
},
{
title: '小米2',
id: 'xiaomi2',
},
{
title: '小米1',
id: 'xiaomi1',
},
],
},
{
title: '小米note',
id: 'xiaominote',
children: [
{
title: '小米 note5',
id: 'xiaomi note5',
},
{
title: '小米 note4',
id: 'xiaomi note4',
},
{
title: '小米 note3',
id: 'xiaomi note3',
},
{
title: '小米 note2',
id: 'xiaomi note2',
},
{
title: '小米 note1',
id: 'xiaomi note1',
},
],
},
],
},
{
title: '超长超长超长字符超长超长超长字符',
id: 4,
icon: ,
},
])
// 侧边栏导航是否折叠
const [collapsed, setCollapsed] = React.useState(true)
// 鼠标悬浮到侧边栏菜单项的 id
const [selectMenuId, setSelectMenuId] = React.useState('')
// 当前激活的菜单项的 id
const [activeMenuId, setActiveMenuId] = React.useState('xiaomi3')
// 定时器，用于优化浮动菜单的隐藏时体验
const timerRef = React.useRef | null>(null)
const timerRef2 = React.useRef | null>(null)
const sideMenuRef = React.useRef(null)
const floatContainerRef = React.useRef(null)
const siderRef = React.useRef(null)
const { submenuData, activeParentId } = useSideMenuCascade({
data,
selectId: selectMenuId,
activeId: activeMenuId,
})
console.log('submenuData', submenuData)
// 浮动菜单是否显示
const [floatContainerVisible, setFloatContainerVisible] = React.useState(false)
// 浮动菜单是否折叠
const [floatContainerCollapsed, setFloatContainerCollapsed] = React.useState(true)
// 应用列表是否显示
const [appListPopoverVisible, setAppListPopoverVisible] = React.useState(false)
// 激活的应用 id
const [activeAppId, setActiveAppId] = React.useState('')
const [profileVisible, setProfileVisible] = React.useState(false)
const [settingsValue, setSettingsValue] = React.useState({})
return (
<>
{collapsed ? null : (
系统名称
)}
,
iconBgColor: 'BLUE',
id: 1,
title: '应用1',
},
{
icon: 'Y',
iconBgColor: 'SKYBLUE',
id: 2,
title: '应用2',
},
{
icon: '',
iconBgColor: 'CYAN',
id: 3,
title: '应用3',
},
{
iconBgColor: 'GREEN',
id: 4,
title: '很长很长很长很长很长的应用名称',
},
{
iconBgColor: 'PURPLE',
id: 5,
title: '应用5',
},
{
iconBgColor: 'YELLOW',
id: 6,
title: '应用6',
},
{
iconBgColor: 'ORANGE',
id: 7,
title: '应用7',
},
{
iconBgColor: 'BLUE',
id: 8,
title: '应用8',
},
]}
titleRender={(item) => {
return
{item.title as string}
}}
onItemClick={(item) => {
setActiveAppId(item.id)
setAppListPopoverVisible(false)
}}
onOutsideClick={() => setAppListPopoverVisible(false)}
>
}
effectColor="rgba(124, 135, 166, 0.15)"
effect
onClick={() => {
setAppListPopoverVisible(!appListPopoverVisible)
}}
/>
{
// 阻止默认行为，设置后不会触发默认的搜索行为
// evt.preventDefault()
}}
/>
{
if (!item.children || item.children.length === 0) {
setActiveMenuId(id)
setFloatContainerVisible(false)
setFloatContainerCollapsed(true)
setSelectMenuId(id)
} else {
const submenuFirstItem = submenuData[0]?.children?.[0]
if (submenuFirstItem) {
setActiveMenuId(submenuFirstItem.id)
setFloatContainerVisible(true)
setFloatContainerCollapsed(false)
}
}
}}
onMouseEnter={(event, id, item) => {
timerRef2.current = setTimeout(() => {
// hover 到一级菜单时，如果有二级菜单，则显示浮动菜单，并且更新选中的菜单项
if (item.children && item.children.length > 0) {
setSelectMenuId(id)
setFloatContainerVisible(true)
}
// 如果没有二级菜单，并且激活的一级菜单有二级菜单，则将选中的菜单项设置为激活的一级菜单
else if (
(data.find((item) => item.id === activeParentId)?.children?.length || 0) > 0
) {
setSelectMenuId(activeParentId)
if (floatContainerCollapsed) {
setFloatContainerVisible(false)
}
}
}, 200)
if (timerRef.current) {
clearTimeout(timerRef.current)
}
}}
onMouseLeave={(event, id, item) => {
if (timerRef2.current) {
clearTimeout(timerRef2.current)
}
// 当鼠标离开菜单时，将当前选中的菜单项设置为父级菜单项
if (
!sideMenuRef.current?.contains(event.relatedTarget as Node) &&
!floatContainerRef.current?.contains(event.relatedTarget as Node) &&
!siderRef.current?.contains(event.relatedTarget as Node)
) {
// 如果选中的菜单项不是激活的一级菜单，并且激活的一级菜单有二级菜单，或者浮动菜单折叠，则将选中的菜单项设置为激活的一级菜单
if (
(id !== activeParentId &&
(data.find((item) => item.id === activeParentId)?.children?.length || 0) >
0) ||
floatContainerCollapsed
) {
setSelectMenuId(activeParentId)
}
}
timerRef.current = setTimeout(() => {
setFloatContainerVisible(false)
}, 200)
}}
data={data}
/>
} mini={collapsed}>
使用手册
用户名
admin@example.com
}
footer={ setProfileVisible(false)}>退出登录
}
settings={{
value: settingsValue,
data: [
{
id: 'timezone',
title: '时区',
subtitle: 'UTC+08:00',
children: [
{ id: 'timezone-1', title: '时区1' },
{ id: 'timezone-2', title: '时区2' },
{ id: 'timezone-3', title: '时区3' },
],
},
{
id: 'language',
title: '语言',
subtitle: '中文',
children: [
{ id: 'language-1', title: '语言1' },
{ id: 'language-2', title: '语言2' },
{ id: 'language-3', title: '语言3' },
],
},
],
onItemClick: (evt, item) => {
// evt.preventDefault()
},
onChange: (value) => {
setSettingsValue(value)
setProfileVisible(false)
},
}}
onClose={() => setProfileVisible(false)}
>
setProfileVisible(!profileVisible)}
>
{collapsed ? null :
用户名}
{
setFloatContainerCollapsed(collapsed)
if (collapsed) {
setFloatContainerVisible(false)
} else {
setFloatContainerVisible(true)
}
}}
onMouseEnter={() => {
setFloatContainerVisible(true)
if (timerRef.current) {
clearTimeout(timerRef.current)
}
}}
onMouseLeave={(event) => {
timerRef.current = setTimeout(() => {
setFloatContainerVisible(false)
}, 200)
// 当鼠标离开菜单时，将当前选中的菜单项设置为父级菜单项
if (
!sideMenuRef.current?.contains(event.relatedTarget as Node) &&
!floatContainerRef.current?.contains(event.relatedTarget as Node) &&
!siderRef.current?.contains(event.relatedTarget as Node)
) {
// 如果激活的一级菜单有二级菜单，或者浮动菜单折叠，则将选中的菜单项设置为激活的一级菜单
if (
(data.find((item) => item.id === activeParentId)?.children?.length || 0) > 0 ||
floatContainerCollapsed
) {
setSelectMenuId(activeParentId)
}
}
}}
>
{
setActiveMenuId(id)
}}
/>
} />
}>
主操作
}
/>
)
}
```
### 顶部导航栏
```tsx
import React from 'react'
import { SearchOutlined, BellOutlined, AppStoreFilled, MenuOutlined } from '@hi-ui/icons'
import { Button, Avatar, EllipsisTooltip, TabList } from '@hi-ui/hiui'
import Layout, { Header, Content, AppListPopover, ProfilePopover } from '@hi-ui/layout'
export const WithHeader = () => {
const [appListPopoverVisible, setAppListPopoverVisible] = React.useState(false)
const [activeAppId, setActiveAppId] = React.useState(undefined)
const [profileVisible, setProfileVisible] = React.useState(false)
const [settingsValue, setSettingsValue] = React.useState({})
return (
<>
} appearance="text" size="sm" />
} appearance="text" size="sm" />
,
iconBgColor: 'BLUE',
id: 1,
title: '应用1',
},
{
icon: 'Y',
iconBgColor: 'SKYBLUE',
id: 2,
title: '应用2',
},
{
icon: '',
iconBgColor: 'CYAN',
id: 3,
title: '应用3',
},
{
iconBgColor: 'GREEN',
id: 4,
title: '很长很长很长很长很长的应用名称',
},
{
iconBgColor: 'PURPLE',
id: 5,
title: '应用5',
},
{
iconBgColor: 'YELLOW',
id: 6,
title: '应用6',
},
{
iconBgColor: 'ORANGE',
id: 7,
title: '应用7',
},
{
iconBgColor: 'BLUE',
id: 8,
title: '应用8',
},
]}
titleRender={(item) => {
return
{item.title as string}
}}
onItemClick={(item) => {
setActiveAppId(item.id)
setAppListPopoverVisible(false)
}}
onOutsideClick={() => setAppListPopoverVisible(false)}
>
}
appearance="text"
size="sm"
onClick={() => {
setAppListPopoverVisible(!appListPopoverVisible)
}}
/>
用户名
admin@example.com
}
footer={ setProfileVisible(false)}>退出登录
}
settings={{
value: settingsValue,
data: [
{
id: 'timezone',
title: '时区',
subtitle: 'UTC+08:00',
children: [
{ id: 'timezone-1', title: '时区1' },
{ id: 'timezone-2', title: '时区2' },
{ id: 'timezone-3', title: '时区3' },
],
},
{
id: 'language',
title: '语言',
subtitle: '中文',
children: [
{ id: 'language-1', title: '语言1' },
{ id: 'language-2', title: '语言2' },
{ id: 'language-3', title: '语言3' },
],
},
],
onItemClick: (evt, item) => {
// evt.preventDefault()
},
onChange: (value) => {
setSettingsValue(value)
setProfileVisible(false)
},
}}
onClose={() => setProfileVisible(false)}
>
setProfileVisible(!profileVisible)}
/>
)
}
```
## Props
### Layout Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | -------- | ----------------- | ----------------- | ------ |
| direction | 布局方向 | "row" \| "column" | "row" \| "column" | "row" |
### Sider Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------- | -------------- | ------------------------------ | ------------- | ------ |
| width | 宽度 | number | - | - |
| maxWidth | 最大宽度 | number | - | - |
| resizable | 是否可调整宽度 | boolean | true \| false | true |
| collapsed | 是否折叠 | boolean | true \| false | - |
| onCollapse | 折叠回调 | ((collapsed: boolean) => void) | - | - |
### SearchTrigger Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------------- | -------- | --------------------------------------------- | ------------------------------- | ------ |
| mini | 迷你模式 | boolean | true \| false | - |
| innerRef | | RefObject\ | - | - |
| clearText | | ReactNode | - | - |
| notFoundContent | | ReactNode | - | - |
| width | | Width\ | string \| number \| string & {} | - |
| visible | | boolean | true \| false | - |
| data | | MenuDataItem\[] | - | - |
| defaultValue | | string | - | "" |
| value | | string | - | - |
| onChange | | ((value: string) => void) | - | - |
| onSearch | | ((value: string) => void) | - | - |
| onSelect | | ((id: ReactText, item: MenuDataItem) => void) | - | - |
| onClear | | (() => void) | - | - |
| onClose | | (() => void) | - | - |
| onEsc | | (() => void) | - | - |
| classNames | | MenuSearchSemanticClassNames | - | - |
| styles | | MenuSearchSemanticStyles | - | - |
### FloatMenuContainer Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------- | -------- | ------------------------------ | ------------- | ------ |
| width | 浮动宽度 | number | - | - |
| zIndex | 层级 | number | - | - |
| visible | 是否显示 | boolean | true \| false | - |
| collapsed | 是否折叠 | boolean | true \| false | - |
| onCollapse | 折叠回调 | ((collapsed: boolean) => void) | - | - |
### AppList Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------------- | ----------------- | ----------------------------------------------------------------------------- | ------ | ------ |
| data | 应用列表数据 | AppListItem\[] | - | - |
| defaultActiveId | 默认激活的应用 id | ReactText | - | - |
| activeId | 激活的应用 id | ReactText | - | - |
| titleRender | 应用标题渲染 | ((item: AppListItem) => ReactNode) | - | - |
| onItemClick | 应用列表点击回调 | ((item: AppListItem, event: MouseEvent\) => void) | - | - |
### AppListPopover Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| visible | 应用列表是否可见 | boolean | true \| false | - |
| onOpen | 应用列表打开回调 | (() => void) | - | - |
| onClose | 应用列表关闭回调 | (() => void) | - | - |
| data | 应用列表数据 | AppListItem\[] | - | - |
| defaultActiveId | 默认激活的应用 id | ReactText | - | - |
| activeId | 激活的应用 id | ReactText | - | - |
| titleRender | 应用标题渲染 | ((item: AppListItem) => ReactNode) | - | - |
| onItemClick | 应用列表点击回调 | ((item: AppListItem, event: MouseEvent\) => void) | - | - |
| title | 气泡卡片标题 | ReactNode | - | - |
| innerRef | | Ref\ | - | - |
| classNames | | PopoverSemanticClassNames | - | - |
| styles | | PopoverSemanticStyles | - | - |
| zIndex | 手动指定 css 展示层级 | number | - | - |
| matchWidth | 自动计算匹配吸附元素的宽度与其一致 | boolean | true \| false | - |
| placement | 相对吸附元素的位置 | PopperPlacementEnum | "auto" \| "auto-start" \| "auto-end" \| "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end" | - |
| container | 指定 portal 的容器 | HTMLElement \| (() => HTMLElement \| null) \| null | null \| HTMLElement \| () => HTMLElement \| null | - |
| disabledPortal | 禁用 portal | boolean | true \| false | - |
| arrow | 是否展示箭头 | boolean | true \| false | - |
| onOutsideClick | 外界元素点击数触发 | ((evt: SyntheticEvent\) => void) | - | - |
| closeOnOutsideClick | 开启点击外部时触发 onClose 回调
TODO: 移除，使用失焦控制 | boolean | true \| false | - |
| onEnter | 开始动画弹出时回调 | (() => void) | - | - |
| onEntered | 结束动画弹出时回调 | (() => void) | - | - |
| onExit | 开始动画隐藏时回调 | (() => void) | - | - |
| onExited | 结束动画隐藏时回调 | (() => void) | - | - |
| crossGap | 设置基于 reference 元素的正交偏移量 | number | - | - |
| modifiers | 自定义 popper.js 的装饰器 | readonly Partial\>\[] | - | - |
| shouldWrapChildren | 使用标签强制包裹 children，使触发器支持 trigger 的事件 | boolean | true \| false | - |
| autoWrapChildren | 使用标签自动包裹 children，使触发器支持 trigger 的事件 | boolean | true \| false | - |
| wrapTagName | 指定包裹 children 的标签 | ElementType\ | - | - |
| attachEl | 吸附的元素 | HTMLElement | - | - |
| showTitleDivider | 显示标题分割线 | boolean | true \| false | - |
| trigger | 气泡卡片触发方式 | PopoverTriggerActionEnum \| PopoverTriggerActionEnum\[] | "click" \| "contextmenu" \| "hover" \| "focus" \| PopoverTriggerActionEnum\[] | - |
| mouseEnterDelay | 鼠标移入展示延时，单位：毫秒 | number | - | - |
| mouseLeaveDelay | 鼠标移出后隐藏延时，单位：毫秒 | number | - | - |
| gutterGap | 设置基于 reference 元素的间隙偏移量 | number | - | - |
| popperClassName | 自定义 Popper 的 className | string | - | - |
### Profile Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ---- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| header | | ReactNode | - | - |
| footer | | ReactNode | - | - |
| settings | | { value?: Record\; data: ProfileSettingsItem\[]; placement?: PopperPlacementEnum; onItemClick?: ((evt: MouseEvent<...>, item: ProfileSettingsItem) => void) \| undefined; onChange?: ((value: Record<...>, targetItem: ProfileSettingsItem) => void) \| undefined; } \| undefined | { value?: Record\ \| undefined; data: ProfileSettingsItem\[]; placement?: PopperPlacementEnum; onItemClick?: ((evt: MouseEvent<...>, item: ProfileSettingsItem) => void) \| undefined; onChange?: ((value: Record<...>, targetItem: ProfileSettingsItem) => void) \| undefined; } | - |
### ProfilePopover Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| header | | ReactNode | - | - |
| footer | | ReactNode | - | - |
| settings | | { value?: Record\; data: ProfileSettingsItem\[]; placement?: PopperPlacementEnum; onItemClick?: ((evt: MouseEvent<...>, item: ProfileSettingsItem) => void) \| undefined; onChange?: ((value: Record<...>, targetItem: ProfileSettingsItem) => void) \| undefined; } \| undefined | { value?: Record\ \| undefined; data: ProfileSettingsItem\[]; placement?: PopperPlacementEnum; onItemClick?: ((evt: MouseEvent<...>, item: ProfileSettingsItem) => void) \| undefined; onChange?: ((value: Record<...>, targetItem: ProfileSettingsItem) => void) \| undefined; } | - |
| title | 气泡卡片标题 | ReactNode | - | - |
| onClose | 关闭时回调 | (() => void) | - | - |
| innerRef | | Ref\ | - | - |
| visible | 控制气泡卡片的显示和隐藏（受控） | boolean | true \| false | - |
| classNames | | PopoverSemanticClassNames | - | - |
| styles | | PopoverSemanticStyles | - | - |
| zIndex | 手动指定 css 展示层级 | number | - | - |
| onOpen | 打开时回调 | (() => void) | - | - |
| matchWidth | 自动计算匹配吸附元素的宽度与其一致 | boolean | true \| false | - |
| placement | 相对吸附元素的位置 | PopperPlacementEnum | "auto" \| "auto-start" \| "auto-end" \| "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end" | "right-end" |
| container | 指定 portal 的容器 | HTMLElement \| (() => HTMLElement \| null) \| null | null \| HTMLElement \| () => HTMLElement \| null | - |
| disabledPortal | 禁用 portal | boolean | true \| false | - |
| arrow | 是否展示箭头 | boolean | true \| false | - |
| onOutsideClick | 外界元素点击数触发 | ((evt: SyntheticEvent\) => void) | - | - |
| closeOnOutsideClick | 开启点击外部时触发 onClose 回调
TODO: 移除，使用失焦控制 | boolean | true \| false | - |
| onEnter | 开始动画弹出时回调 | (() => void) | - | - |
| onEntered | 结束动画弹出时回调 | (() => void) | - | - |
| onExit | 开始动画隐藏时回调 | (() => void) | - | - |
| onExited | 结束动画隐藏时回调 | (() => void) | - | - |
| crossGap | 设置基于 reference 元素的正交偏移量 | number | - | - |
| modifiers | 自定义 popper.js 的装饰器 | readonly Partial\>\[] | - | - |
| shouldWrapChildren | 使用标签强制包裹 children，使触发器支持 trigger 的事件 | boolean | true \| false | - |
| autoWrapChildren | 使用标签自动包裹 children，使触发器支持 trigger 的事件 | boolean | true \| false | - |
| wrapTagName | 指定包裹 children 的标签 | ElementType\ | - | - |
| attachEl | 吸附的元素 | HTMLElement | - | - |
| showTitleDivider | 显示标题分割线 | boolean | true \| false | - |
| trigger | 气泡卡片触发方式 | PopoverTriggerActionEnum \| PopoverTriggerActionEnum\[] | "click" \| "contextmenu" \| "hover" \| "focus" \| PopoverTriggerActionEnum\[] | "click" |
| mouseEnterDelay | 鼠标移入展示延时，单位：毫秒 | number | - | - |
| mouseLeaveDelay | 鼠标移出后隐藏延时，单位：毫秒 | number | - | - |
| gutterGap | 设置基于 reference 元素的间隙偏移量 | number | - | - |
| popperClassName | 自定义 Popper 的 className | string | - | - |
### ActionItem Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---- | ---- | --------- | ------------- | ------ |
| icon | | ReactNode | - | - |
| mini | | boolean | true \| false | - |
# List 列表
通用列表。
## 使用示例
### 基础用法
常用在数据管理、信息展示等领域
```tsx
import React from 'react'
import List from '@hi-ui/list'
export const Basic = () => {
return (
<>
{
return
}}
/>
{
return
}}
/>
)
}
```
### 不带分割线
```tsx
import React from 'react'
import List from '@hi-ui/list'
export const NoSplit = () => {
return (
<>
{
return
}}
/>
{
return
}}
/>
)
}
```
### 列表头部
```tsx
import React from 'react'
import List from '@hi-ui/list'
export const Header = () => {
return (
<>
列表头部
}
data={[
{
title: '1、当前这里是标题信息',
},
{
title: '2、当前这里是标题信息',
},
{
title: '3、当前这里是标题信息',
},
]}
render={(dataItem) => {
return
}}
/>
列表头部
}
data={[
{
title: '1、当前这里是标题信息',
},
{
title: '2、当前这里是标题信息',
},
{
title: '3、当前这里是标题信息',
},
]}
render={(dataItem) => {
return
}}
/>
)
}
```
### 带操作
可通过 actionPlacement 配置操作项的垂直对齐位置
```tsx
import React from 'react'
import Button from '@hi-ui/button'
import List from '@hi-ui/list'
export const Action = () => {
return (
<>
操作
),
},
{
title: '当前这里是标题信息',
description:
'这里是一段比较长的描述信息这里是一段比较长的描述信息这里是一段比较长的描述信息',
avatar: 'https://xiaomi.github.io/hiui/logo.png',
action: (
),
},
{
title: '当前这里是标题信息',
description:
'这里是一段比较长的描述信息这里是一段比较长的描述信息这里是一段比较长的描述信息',
avatar: 'https://xiaomi.github.io/hiui/logo.png',
action: (
),
},
]}
render={(dataItem) => {
return
}}
/>
)
}
```
### 带分页
```tsx
import React from 'react'
import Button from '@hi-ui/button'
import List from '@hi-ui/list'
export const Pagination = () => {
return (
<>
操作
),
},
{
title: '当前这里是标题信息',
description:
'这里是一段比较长的描述信息这里是一段比较长的描述信息这里是一段比较长的描述信息',
avatar: 'https://xiaomi.github.io/hiui/logo.png',
action: (
),
},
{
title: '当前这里是标题信息',
description:
'这里是一段比较长的描述信息这里是一段比较长的描述信息这里是一段比较长的描述信息',
avatar: 'https://xiaomi.github.io/hiui/logo.png',
action: (
),
},
]}
pagination={{
total: 200,
pageSize: 10,
placement: 'right',
}}
render={(dataItem) => {
return
}}
/>
)
}
```
### 数据为空
```tsx
import React from 'react'
import List from '@hi-ui/list'
import EmptyState from '@hi-ui/empty-state'
export const Empty = () => {
return (
<>
{
return
}}
emptyContent={() => }
/>
)
}
```
### 自定义头像
```tsx
import React from 'react'
import Button from '@hi-ui/button'
import List from '@hi-ui/list'
import Avatar from '@hi-ui/avatar'
export const CustomAvatar = () => {
return (
<>
操作
),
},
{
title: '当前这里是标题信息',
description:
'这里是一段比较长的描述信息这里是一段比较长的描述信息这里是一段比较长的描述信息',
avatar: 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png',
action: (
),
},
{
title: '当前这里是标题信息',
description:
'这里是一段比较长的描述信息这里是一段比较长的描述信息这里是一段比较长的描述信息',
avatar: 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png',
action: (
),
},
]}
render={(dataItem) => (
}
extra={
}
/>
)}
/>
)
}
```
### 自定义样式
通过 classNames 和 styles 属性，可以对组件进行更细粒度的样式控制
```tsx
import React, { useState } from 'react'
import { Row, Col } from '@hi-ui/grid'
import List, { ListSemanticName } from '@hi-ui/list'
export const Semantic = () => {
const [selected, setSelected] = useState()
return (
<>
{
return
}}
classNames={{
root: 'my-list__root',
header: 'my-list__header',
wrapper: 'my-list__wrapper',
item: 'my-list__item',
pagination: 'my-list__pagination',
}}
styles={{
[selected as string]: {
outline: '1px solid #ffbe0a',
},
}}
pagination={{
total: 200,
pageSize: 10,
placement: 'right',
}}
/>
{
return (
{
setSelected(dataItem.title as ListSemanticName)
}}
onMouseLeave={() => {
setSelected(undefined)
}}
>
)
}}
/>
)
}
```
## Props
### List Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | --------------------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| data *(required)* | 列表展示的数据 | ListDataItem\[] | - | - |
| fieldNames | 设置data中的每一项对应的key | HiBaseFieldNames | - | - |
| render | 自定义渲染列表项 | ((item: ListDataItem) => ReactNode) | - | - |
| split | 是否展示分割线 | boolean | true \| false | true |
| pagination | 对应的 pagination 配置, 设置 undefined 不显示 | (PaginationProps & { placement: ListPaginationPlacementEnum; }) | PaginationProps & { placement: ListPaginationPlacementEnum; } | - |
| bordered | 是否展示边框 | boolean | true \| false | - |
| emptyContent | 数据为空时的展示内容 | ReactNode \| (() => ReactNode) | null \| string \| number \| false \| true \| {} \| ReactElement\> \| ReactNodeArray \| ReactPortal \| () => ReactNode | - |
| header | 列表头部 | ReactNode | - | - |
| classNames | | ListSemanticClassNames | - | - |
| styles | | ListSemanticStyles | - | - |
### ListItem Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------------- | ---------------------- | ----------------------- | ----------------------------- | ------ |
| title | 列表元素的标题 | ReactNode | - | - |
| description | 列表元素的描述内容 | ReactNode | - | - |
| extra | 额外内容 | ReactNode | - | - |
| avatar | 左侧图片 | ReactNode | - | - |
| action | 右侧操作项 | ReactNode | - | - |
| actionPlacement | 右侧操作项垂直对齐位置 | ListActionPlacementEnum | "top" \| "center" \| "bottom" | "top" |
## Type
### ListDataItem
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------------- | ---------------------- | ----------------------- | ----------------------------- | -------- |
| title | 列表元素的标题 | ReactNode | - | - |
| description | 列表元素的描述内容 | ReactNode | - | - |
| extra | 额外内容 | ReactNode | - | - |
| avatar | 左侧图片资源地址 | string | - | - |
| action | 右侧操作项 | ReactNode | - | - |
| actionPlacement | 右侧操作项垂直对齐位置 | ListActionPlacementEnum | "top" \| "center" \| "bottom" | "center" |
### PaginationProps
> 继承 Pagination 组件的 Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ------------------ | --------------------------- | ---------------------------- | ------- |
| placement | 指定分页显示的位置 | ListPaginationPlacementEnum | 'left' \| 'middle' \|'right' | 'right' |
# Loading 动效加载
用于请求和数据加载成功的中间状态，缓冲用户的等待焦虑。
## 使用示例
### 基础用法
耐心等待，正拼力加载…
```tsx
import React from 'react'
import Loading from '@hi-ui/loading'
export const Basic = () => {
const loadingIdRef = React.useRef(null)
React.useEffect(() => {
return () => {
Loading.close(loadingIdRef.current)
}
}, [])
return (
<>
)
}
```
### 文案位置
```tsx
import React from 'react'
import Loading from '@hi-ui/loading'
export const ContentPosition = () => {
const loadingIdRef = React.useRef(null)
React.useEffect(() => {
return () => {
Loading.close(loadingIdRef.current)
}
}, [])
return (
<>
)
}
```
### API调用
```tsx
import React from 'react'
import Loading from '@hi-ui/loading'
import Button from '@hi-ui/button'
export const Duration = () => {
const loadingIdRef = React.useRef(null)
React.useEffect(() => {
return () => {
Loading.close(loadingIdRef.current)
}
}, [])
return (
<>
)
}
```
### 局部容器加载
```tsx
import React from 'react'
import Loading from '@hi-ui/loading'
export const Visible = () => {
const [visible, setVisible] = React.useState(false)
return (
<>
{
setVisible((prev) => !prev)
}}
style={{
width: 500,
height: 300,
boxSizing: 'border-box',
background: '#f5f7fa',
padding: 20,
border: '20px solid #5f6a7a',
}}
/>
)
}
```
### 无蒙层
```tsx
import React from 'react'
import Loading from '@hi-ui/loading'
export const Mask = () => {
const loadingIdRef = React.useRef(null)
React.useEffect(() => {
return () => {
Loading.close(loadingIdRef.current)
}
}, [])
return (
<>
)
}
```
### 设置加载类型
```tsx
import React from 'react'
import Loading from '@hi-ui/loading'
export const Type = () => {
return (
<>
)
}
```
### 加载提示
与 Message 结合使用
```tsx
import React from 'react'
import Button from '@hi-ui/button'
import message from '@hi-ui/message'
import Spinner from '@hi-ui/spinner'
export const WithToast = () => {
const [loading, setLoading] = React.useState(false)
const handleSubmit = () => {
setLoading(true)
setTimeout(() => {
setLoading(false)
}, 5000)
}
return (
<>
)
}
```
### 自定义样式
通过 classNames 和 styles 属性，可以对组件进行更细粒度的样式控制
```tsx
import React, { useState } from 'react'
import { Row, Col } from '@hi-ui/grid'
import List from '@hi-ui/list'
import Loading from '@hi-ui/loading'
export const Semantic = () => {
const [selected, setSelected] = useState<
'root' | 'mask' | 'content-wrapper' | 'icon' | 'content' | 'wrapper'
>()
return (
<>
{
return (
{
setSelected(dataItem.title as any)
}}
onMouseLeave={() => {
setSelected(undefined)
}}
>
)
}}
/>
)
}
```
## Props
### Loading Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------------- | ---------------------------------------- | ------------------------- | --------------------------- | ------ |
| content | 自定义加载中状态的文案 | ReactNode | - | - |
| contentPosition | 设置加载中状态的文案位置 | "right" \| "bottom" | "right" \| "bottom" | - |
| visible | 是否开启显示 | boolean | true \| false | - |
| full | 是否全屏展示，开启节点将挂载到 body | boolean | true \| false | - |
| delay | 延迟显示加载效果的时长（可用于防止闪烁） | number | - | - |
| size | 设置尺寸 | LoadingSizeEnum | Omit\ | - |
| color | 设置颜色，仅在 type 为 spin 时有效 | Color | - | - |
| type | loading 效果类型 | "dot" \| "spin" | "dot" \| "spin" | - |
| showMask | 设置蒙层 | boolean | true \| false | - |
| wrapperClassName | 设置包裹器类名 | string | - | - |
| wrapperStyle | 设置包裹器样式 | CSSProperties | - | - |
| classNames | | LoadingSemanticClassNames | - | - |
| styles | | LoadingSemanticStyles | - | - |
## Methods
### Loading.open(target, { content, size, duration, autoClose })
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | --------------------------------------------- | ------------------- | -------------------- | ------ |
| target | 需要 `Loading` 遮罩的元素, 当不传时为全屏遮罩 | HTMLElement \| null | - | - |
| content | 自定义加载中状态的文案 | ReactNode | - | - |
| duration | loading 自动关闭的时间，单位为毫秒 | number | - | - |
| size | loading 的尺寸 | LoadingSizeEnum | 'lg' \| 'md' \| 'sm' | 'md' |
| autoClose | 是否开启 loading 自动关闭 | boolean | true \| false | - |
### Loading.close(key)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---- | ------------------------------------ | ------ | ------ | ------ |
| key | open 方法返回的 Loading 实例唯一标识 | string | - | - |
# LocaleContext 语言上下文
语言设置上下文。
## 使用示例
### 基础用法
```tsx
import React, { useContext } from 'react'
import { LocaleContext } from '@hi-ui/locale-context'
export const Basic = () => {
const i18n = useContext(LocaleContext)
return (
<>
{i18n.get('datePicker.ok')}
)
}
```
## Props
### getLanguage Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------------------------- | ---- | -------------------- | ------ | ------ |
| timePicker *(required)* | | Record\ | - | - |
| datePicker *(required)* | | Record\ | - | - |
| pagination *(required)* | | Record\ | - | - |
| cascader *(required)* | | Record\ | - | - |
| checkCascader *(required)* | | Record\ | - | - |
| select *(required)* | | Record\ | - | - |
| selectTree *(required)* | | Record\ | - | - |
| search *(required)* | | Record\ | - | - |
| transfer *(required)* | | Record\ | - | - |
| upload *(required)* | | Record\ | - | - |
| modal *(required)* | | Record\ | - | - |
| tabs *(required)* | | Record\ | - | - |
| timeline *(required)* | | Record\ | - | - |
| form *(required)* | | Record\ | - | - |
| tree *(required)* | | Record\ | - | - |
| table *(required)* | | Record\ | - | - |
| watermark *(required)* | | Record\ | - | - |
| emptyState *(required)* | | Record\ | - | - |
| checkSelect *(required)* | | Record\ | - | - |
| treeSelect *(required)* | | Record\ | - | - |
| checkTreeSelect *(required)* | | Record\ | - | - |
| picker *(required)* | | Record\ | - | - |
| zenMode *(required)* | | Record\ | - | - |
| popConfirm *(required)* | | Record\ | - | - |
| tag *(required)* | | Record\ | - | - |
| backTop *(required)* | | Record\ | - | - |
| menuSearch *(required)* | | Record\ | - | - |
| queryFilter *(required)* | | Record\
