0.1.0 • Published 4 years ago
@featui/button v0.1.0
按钮组件
设计原则
- 按钮在不同的状态下有不同的显示状态,希望模拟出海绵被按压的感觉。当鼠标指针位于按钮上方的时候,按钮会稍稍向内收缩。当鼠标移开时,恢复到原来的状态。当鼠标按下时,按钮进一步向内收缩,此时释放鼠标按键,按钮回复到原始的状态。
- 响应区域扩大,按钮的响应区域应比按钮的图形显示区域稍大,这样用户在按钮附近点击时,按钮也可以捕获到用户的点击动作。
在线演示: Storybook -- Feat Button
安装与使用
安装
npm install @featui/button
调用
import { Button } from '@featui/button';
// import '@featui/button/dist/feat-button.min.css'; // 样式引入
// 也可以使用在原始的scss文件上进行定义
function Example() {
<Button size='sm' type='primary'>
Primary
</Button>
}
按钮类型
- Button
- SquareButton
Button PropTypes
Property | Type | Required? | Description |
---|---|---|---|
type | string | default , primary , danger , link , merge , 默认为: default | |
size | string | sm , md , lg , 默认值为:sm | |
hitSlop | number | 扩大按钮响应区域, 默认为:5 |
0.1.0
4 years ago