@huxy/components
v2.1.17
Published
simple components
Downloads
173
Readme
components
Anico
几个动效 icon
,默认三条短横线。
type: close、right、bottom、play
default:''
<Anico type="{type}" />
Base64Image
将图片 src 地址 改为 base64。
<Base64Image {...props} />
loadError/ErrorBoundary/HandleError
错误边界处理。
<ErrorBoundary fallback="{loadError}">
<ErrorComp state="{demoError}" name="eb" />
</ErrorBoundary>
<HandleError>
<ErrorComp state="{demoError}" name="eb" />
</HandleError>
fixEle/fixIcon
对传入的元素兼容处理。如传入函数、react 对象、原生 dom、className、注入元素、默认元素、null等。
const Ele = fixEle(iconList)(iconValue); const Icon = fixIcon(icons);
<Icon icon="home" />
FullPage
全屏面板。
- panel:面板元素
- fullIcon:最大化 icon,默认'...'
- exitIcon:最小化 icon,默认'...'
<FullPage panel="{panel}" fullIcon="..." exitIcon="---" />
Row/Col
栅格布局,默认分为 12 列。
- gutter:间隔大小,默认 10px
- span:栅格等分,默认 12
- offset:栅格左侧的间隔格数,默认 0
- xs:<768px,可为栅格数或一个包含其他属性的对象
- sm:768px<x<992px,可为栅格数或一个包含其他属性的对象
- md:992px<x<1200px,可为栅格数或一个包含其他属性的对象
- lg:1200px<x<1600px,可为栅格数或一个包含其他属性的对象
- xl:>1600px,可为栅格数或一个包含其他属性的对象
- width:自定义栅格宽度
- auto:响应式栅格宽度
- offsetWidth:左侧或右侧宽度
<Row gutter={12}>
<Col span={6} offset={3} xs={{span: 12, offset: 0}} sm={{span: 12, offset: 0}} md={12} lg={6} xl={{span: 3, offset: 2}}}></Col>
</Row>
<Row>
<Col width="240px"></Col>
<Col auto offsetWidth="240px"></Col>
</Row>
Grid
基于 Row/Col
的栅格布局。
<Grid rowProps="{{gutter:" 12}} colProps="{{span:" 6}} Row="{}" Col="{}">
<p>list 1</p>
<p>list 2</p>
<p>list 3</p>
</Grid>
MaxSize
最大化面板。
- panel:最大化面板挂载元素,默认 body
- target:最大化元素或类名
- fullIcon:最大化 icon,默认'...'
- exitIcon:最小化 icon,默认'...'
<MaxSize target="{target}" panel="{panel}" fullIcon="..." exitIcon="---" />
Portal
- mountNode:挂载点,默认
document.body
<Portal mountNode="{}"> portal </Portal>
Mask
遮罩层
- mountNode:挂载点,默认
document.body
- open:展示隐藏状态
- close:关闭事件
- delay:延迟关闭时间,默认 300ms
<Mask open="{open}" close="{()" =""> setOpen(false)} /></Mask>
Modal
模态框
- open:展示隐藏状态
- cancel:关闭事件
- cancelText:关闭文本
- submit:确定事件
- submitText:确定文本
- title:标题
<Modal open="{open}" cancel="{()" =""> setOpen(false)} cancelText="取消" submit={() => setOpen(false)} submitText="确定" title="Modal 弹窗"> ... </Modal>
Panel
面板
- title:标题
- plugins:标题右侧事件区域,如最大化、刷新等
- loading:加载状态
<Panel title="panelTitle" plugins="{[]}"> ... </Panel>
Spinner
加载动画
- global:是否为全局加载动画
- absolute:是否相对容器绝对定位
<Spinner global /> <Spinner absolute />
TabHeader
tab 切换
- activekey:选中 tab 项,默认选中第一个
- tabs:tabs 列表,[{key: '', value: '', renderTabs: null}],key 为 tab 的 key 值,value 为展示名,renderTabs 是自定义渲染内容
- switchTab:切换 tab 事件
- flex:tabs 是否撑满容器
- trackColor:tabs 与 content 间边框颜色
<TabHeader
tabs={[
{key: 1, value: 'tab1'},
{key: 2, value: 'tab2'},
]}
switchTab={() => {}}
flex
/>
Drawer
抽屉柜
- open:是否展示
- close:关闭事件
- footer:脚部内容
- header:头部内容
- width:宽度,默认
300px
<Drawer
close={() => setOpen(false)}
open={open}
className="configs-drawer"
width="300px"
header={
<div>
<Button onClick={() => saveConfig()}>{i18nCfg.saveConfig}</Button>
<Button type="primary" onClick={() => copyConfig()} style={{marginLeft: 12}}>
{i18nCfg.copyConfig}
</Button>
</div>
}
>
<TabHeader flex tabs={tabs(i18nCfg)} switchTab={key => setActive(key)} />
<div className="layout-setting" style={{padding: '15px 0'}}>
{comps[active]}
</div>
</Drawer>
Drop
元素触发位置展示弹出层信息。可根据元素所在位置自动优化展示层的位置。
- trigger:触发动作,默认
click
- dropList:弹出层内容 DOM。
<Drop trigger="contextMenu" dropList="{fileDrop(filename)}">
<div>{filename}</div>
</Drop>
renderTree/Tree
渲染树。如菜单展示,支持横纵切换。
renderTree:
- data:树对象 []。
- events:节点事件表。如点击、鼠标移动等。
{onClick: () => {}, onMouseEnter: () => {}, ...}
- Link:链接跳转,默认
a
标签跳转。 - List: 节点列表容器,默认
const DefList = props => <ul {...props} />;
。
Tree:
- data:树对象 []。
- type:展示类型,默认 'vertical' 。
- collapsed:是否为收缩状态,默认 'false' 。
- Link:链接跳转,默认
a
标签跳转。 - width:菜单宽度。
- bgColor:背景颜色。
- itemHeight:菜单节点高度。
<ul className="huxy-tree-root">
{render(data, events, Link, List)}
</ul>
<Tree data="{navMenu}" type="horizontal" Link="{Link}" style="{navMenuStyle}" />
Carousel
轮播图。
<Carousel>
<div style={{height: '200px', background: 'var(--blue1)'}}>item1</div>
<div style={{height: '200px', background: 'var(--orange1)'}}>item2</div>
<div style={{height: '200px', background: 'var(--green1)'}}>item3</div>
<div style={{height: '200px', background: 'var(--yellow1)'}}>item4</div>
<div style={{height: '200px', background: 'var(--red1)'}}>item5</div>
</Carousel>
Tooltip
<Tooltip placement="topRight"> hello worldhello worldhello worldhello worldhello world </Tooltip>
- placement:tooltip 位置,有 topRight | topLeft | bottomRight | bottomLeft | rightTop ,默认 topRight 。
Ellipsis
超出容器宽度展示省略号并且鼠标移上去有 tooltip 。
<Ellipsis> hello worldhello worldhello worldhello worldhello world </Ellipsis>
<Ellipsis>
<Tooltip placement="topLeft" title="hhhhhhhhh">
<span>hhhhhhhhh</span>
</Tooltip>
</Ellipsis>