bees-web-ui v0.0.25
小蜜蜂Web-UI套件
运行环境
- 支持
Hooks
请确保React
版本16.8.x
及以上 - 未引入主题包 与 国际化,未来考虑引入
- 需在全局引入样式文件
import 'bees-web-ui/dist/index.css'
1. Model 数据模型 | beta 0.1
用法:
// models.js
import { Model } from './bees-web-ui'
export default class Index extends Model {
// 初始 State
initialState = {
count: 1,
list: [],
}
// 接口请求
async get() {
const res = await axios()
this.dispath({
list: res.data,
count: res.count,
})
}
}
// view.js
import React, { useReducer, useEffect } from 'react'
import Models from './models'
const $models = new Models()
export default () => {
const [state, dispatch] = useReducer($models.reducer, $models.initialState)
$models.assign(dispatch)
const { count, list } = state
useEffect(() => { $models.get() }, [])
return (
<Table
datasource={list}
total={count}
/>
)
}
2. Icon 图标
用法:
import { Icon } from './bees-web-ui'
export default () => (
<Icon
type="icon-browse"
color="#1890ff"
className="myIcon"
style={{ fontSize: 30 }}
/>
)
API: | 字段 | 说明 | 类型 | 默认值 | | ---- | ------------ | ---- | ---- | | type | 类型 | string | icon-check | | color | 颜色 | string | #1890ff |
3. Block 区域块
用法:
import { Block } from './bees-web-ui'
export default () => (
<Block
loading
className="myBlock"
style={{}}
onClick={() => {}}
>
内容加载中...
</Block>
)
API: | 字段 | 说明 | 类型 | 默认值 | | ---- | ------------ | ---- | ---- | | loading | 是否为加载中状态 | boolean | false |
4. Align 布局
用法:
import { Align } from './bees-web-ui'
export default () => (
<Align
gutter={20}
align="jm"
flex={[1, 1, 1]}
className="myAlign"
style={{}}
onClick={() => {}}
>
<p>水平方向:l(左)、c(中)、r(右)、s(均分)、j(两端)</p>
<p>垂直方向:t(上)、m(中)、b(下)</p>
<p>flex:[1, 1, 1]、['30%', '60%', '10%']、['300px', '600px']</p>
</Align>
)
API: | 字段 | 说明 | 类型 | 默认值 | | ---- | ------------ | ---- | ---- | | gutter | 栅格间的间距 | number | 8 | | align | 排列方式="水平垂直" | lcrj + tmb | lm | | flex | 栅格占位 | array | [] |
5. ColorPicker 选色器
用法:
import { ColorPicker } from './bees-web-ui'
export default () => (
<ColorPicker
width={60}
height={60}
defaultColor="red"
onChange={(color) => {
console.log(color)
}}
/>
)
API: | 字段 | 说明 | 类型 | 默认值 | | ---- | ------------ | ---- | ---- | | width | 宽度 | number、auto(自适应) | 32 | | height | 高度 | number | 32 | | defaultColor | (非受控)颜色 | string | rgb(24, 144, 255) | | color | (受控)颜色 | string | null | | onChange | 回调,返回色值 | function | (color = null) => {} | | style | 样式 | object | {} |
6. Product 产品卡片
用法:
import { Product } from './bees-web-ui'
const Designer = Product.Designer
export default () => (
<Product
loading={false} // 加载状态 => 默认 false ,为 true 时装载骨架屏
edit={false} // 编辑模式 => 默认 false ,为 true 时 onCover 、onTitle 事件失效, extra 元素不渲染
border // 边框 => 默认 false ,为 true 时显示边框
id="产品ID" // ID => 必填,所有产品事件返回此项
cover="https://img.zcool.cn/community/01761459c36700a8012053f8048bb7.png" // 缩略图 => 必填,只接收 url 连接,暂不支持元素
coverHeight={180} // 缩略图高度 => 默认 168px
// 卡片 hover 状态,展示元素 => 长度大于 2 自动合并为下拉模式,下拉模式下不支持 props 设置
extra={[{
label: '查看', // 文字
onClick: id => console.log(id), // 事件 => 返回 id
props: {}, // 元素 props => { className, style, disabled, size, type }
}, {
label: '收藏', // 文字
onClick: id => console.log(id), // 事件 => 返回 id
props: {}, // 元素 props => { className, style, disabled, size, type }
}]}
title="小蜜蜂自家用豆腐" // 标题 => 必填 (未来考虑适用性改造)
extensionName="PSD" // 补充属性 => Tag 标 (未来考虑适用性改造)
category="电商 - 海报" // 补充属性 => 文字内容 (未来考虑适用性改造)
viewsNum={999} // 查看 (未来考虑适用性改造)
favoritesNum={999} // 收藏 (未来考虑适用性改造)
downloadsNum={999} // 下载 (未来考虑适用性改造)
onCover={id => console.log(id)} // 点击缩略图触发事件 => 返回 id
onTitle={id => console.log(id)} // 点击标题触发事件 => 返回 id
onEdit={id => console.log(id)} // 编辑模式 => 勾选事件,返回 id
>
{/* 不加载 Designer 组件,则不展示作者相关信息 */}
<Designer
loading={false} // 加载状态 => 默认 false ,为 true 时装载骨架屏
id="设计师ID" // ID => 必填,所有设计师事件返回此项
avatar="" // 头像 => 只接收 url 连接,暂不支持元素,为空时取昵称用做头像
name="我是小蜜蜂呀" // 昵称
onClick={id => console.log(id)} // 点击用户头像昵称触发事件 => 返回设计师 id
/>
</Product>
)
API: ...
作者 白告 2020 年 07月 15日
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago