Button 按钮

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/base@latest -S

按钮用于开始一个即时操作。

Guide

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

API

按钮

参数说明类型默认值
prefix组件样式的品牌前缀String'next-'
type按钮的类型可选值:'primary', 'secondary', 'normal', 'dark', 'light'Enum'normal'
size按钮的尺寸可选值:'small', 'medium', 'large'Enum'medium'
shape按钮的形态可选值:'ghost', 'text', 'warning'Enum-
htmlType设置 button 标签的原生 type 值String'button'
component设置标签类型可选值:'button', 'span', 'a', 'div'Enum'button'
loading设置按钮的载入状态Booleanfalse
disabled是否禁用Boolean-
onClick点击按钮的回调签名:Function(e: Object) => void参数:e: {Object} Event ObjectFunction() => {}
className自定义样式String-

Button.Group

参数说明类型默认值
size统一设置 Button 组件的按钮大小String'medium'

Button.Split

参数说明类型默认值
prefix样式品牌前缀String'next-'
alignDropdown 的对齐方式，参考 DropdownString'tr br'
offsetDropdown 的位置偏移，参考 DropdownArray0, 4
type类型，同 Button可选值:'primary', 'secondary', 'normal', 'dark', 'light'Enum'normal'
shape外观，同 Button可选值:'ghost', 'text', 'warning'Enum-
size尺寸，同 Button可选值:'small', 'medium', 'large'Enum'medium'
triggerDropdown 触发方式，参考 Dropdown可选值:'click', 'hover'Enum'click'
menu弹出的内容，参考 DropdownReactNode-
onClick点击按钮的回调签名:Function(e: Object) => void参数:e: {Object} Event ObjectFunction() => {}

代码示例

按钮类型

值得注意的是，对于幽灵按钮而言，通常用在有色背景下。针对浅色背景和深色背景的使用场景，幽灵按钮提供了两个特殊的类型，分别是 light, dark。正常情况下通过设置 type 为 primary secondary 可分别创建主按钮、次按钮，若不设置 type 值则为普通按钮。不同的样式可以用来区别其重要程度。通过 shape 属性可以更改按钮的默认形态，包括幽灵按钮、文本按钮、警告按钮。按钮有三种视觉层次：主按钮、次按钮、普通按钮。

Button 按钮 - 图1

查看源码在线预览

  1. import { Button } from "@icedesign/base";
  3. ReactDOM.render(
  4.   <div>
  5.     <Button type="normal">普通按钮</Button> &nbsp;&nbsp;
  6.     <Button type="primary">主要按钮</Button> &nbsp;&nbsp;
  7.     <Button type="secondary">次要按钮</Button>
  8.     <br />
  9.     <br />
  10.     <Button type="normal" shape="text">
  11.       普通文本按钮
  12.     </Button>{" "}
  13.     &nbsp;&nbsp;
  14.     <Button type="primary" shape="text">
  15.       主要文本按钮
  16.     </Button>{" "}
  17.     &nbsp;&nbsp;
  18.     <Button type="secondary" shape="text">
  19.       次要文本按钮
  20.     </Button>
  21.     <br />
  22.     <br />
  23.     <Button type="normal" shape="warning">
  24.       普通警告按钮
  25.     </Button>{" "}
  26.     &nbsp;&nbsp;
  27.     <Button type="primary" shape="warning">
  28.       主要警告按钮
  29.     </Button>{" "}
  30.     &nbsp;&nbsp;
  31.     <Button type="secondary" shape="warning">
  32.       次要警告按钮
  33.     </Button>
  34.     <br />
  35.     <br />
  36.     <div style={{ clear: "both" }}>
  37.       <div className="ghost-light-background">
  38.         <Button type="light" shape="ghost">
  39.           幽灵按钮（浅色）
  40.         </Button>
  41.       </div>
  42.       <div className="ghost-dark-background">
  43.         <Button type="dark" shape="ghost">
  44.           幽灵按钮（深色）
  45.         </Button>
  46.       </div>
  47.     </div>
  48.   </div>,
  49.   mountNode
  50. );
  1. .ghost-light-background {
  2.     display: inline-block;
  3.     height: 100px;
  4.     line-height: 100px;
  5.     width: 50%;
  6.     background: #EBECF0;
  7.     margin-bottom: 20px;
  8.     padding-left:10px;
  9.     box-sizing: border-box;
  10. }
  11. .ghost-dark-background {
  12.     display: inline-block;
  13.     height: 100px;
  14.     line-height: 100px;
  15.     width: 50%;
  16.     background: #333;
  17.     margin-bottom: 20px;
  18.     padding-left:10px;
  19.     box-sizing: border-box;
  20. }

自定义标签类型

可选值包括 button, span, a, div。默认情况下 Button 组件使用 <button> 标签来渲染按钮，通过 component 属性可以自定义 Button 的标签类型。

Button 按钮 - 图2

查看源码在线预览

  1. import { Button } from "@icedesign/base";
  3. ReactDOM.render(
  4.   <div>
  5.     <Button
  6.       type="primary"
  7.       component="a"
  8.       href="http://www.alibaba.com"
  9.       target="_blank"
  10.     >
  11.       <span>确定</span>
  12.     </Button>{" "}
  13.     &nbsp;&nbsp;
  14.     <Button
  15.       type="secondary"
  16.       component="a"
  17.       href="http://www.alibaba.com"
  18.       target="_blank"
  19.     >
  20.       次要按钮
  21.     </Button>{" "}
  22.     &nbsp;&nbsp;
  23.     <Button
  24.       type="normal"
  25.       component="a"
  26.       href="http://www.alibaba.com"
  27.       target="_blank"
  28.     >
  29.       普通按钮
  30.     </Button>
  31.   </div>,
  32.   mountNode
  33. );

不可用状态

添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

Button 按钮 - 图3

查看源码在线预览

  1. import { Button } from "@icedesign/base";
  3. ReactDOM.render(
  4.   <div>
  5.     <Button type="primary">主按钮</Button>&nbsp;&nbsp;
  6.     <Button type="primary" disabled>
  7.       主按钮(失效)
  8.     </Button>
  9.     <br />
  10.     <br />
  11.     <Button type="secondary">次按钮</Button>&nbsp;&nbsp;
  12.     <Button type="secondary" disabled>
  13.       次按钮(失效)
  14.     </Button>
  15.     <br />
  16.     <br />
  17.     <Button type="normal">普通按钮</Button>&nbsp;&nbsp;
  18.     <Button type="normal" disabled>
  19.       普通按钮(失效)
  20.     </Button>
  21.     <br />
  22.     <br />
  23.     <div>
  24.       <div className="ghost-light-background">
  25.         <Button type="light" shape="ghost" disabled>
  26.           幽灵按钮（浅色）
  27.         </Button>
  28.       </div>
  29.       <div className="ghost-dark-background">
  30.         <Button type="dark" shape="ghost" disabled>
  31.           幽灵按钮（深色）
  32.         </Button>
  33.       </div>
  34.     </div>
  35.   </div>,
  36.   mountNode
  37. );
  1. .ghost-light-background {
  2.     display: inline-block;
  3.     height: 100px;
  4.     line-height: 100px;
  5.     width: 50%;
  6.     background: #EBECF0;
  7.     margin-bottom: 20px;
  8.     padding-left:10px;
  9.     box-sizing: border-box;
  10. }
  11. .ghost-dark-background {
  12.     display: inline-block;
  13.     height: 100px;
  14.     line-height: 100px;
  15.     width: 50%;
  16.     background: #333;
  17.     margin-bottom: 20px;
  18.     padding-left:10px;
  19.     box-sizing: border-box;
  20. }

按钮组

可以将多个 Button 放入 Button.Group 的容器中形成一个按钮组。

Button 按钮 - 图4

查看源码在线预览

  1. import { Button, Icon } from "@icedesign/base";
  3. const ButtonGroup = Button.Group;
  5. ReactDOM.render(
  6.   <div>
  7.     <h4>基本组合</h4>
  8.     <ButtonGroup>
  9.       <Button type="primary">确定</Button>
  10.       <Button type="primary">取消</Button>
  11.     </ButtonGroup>
  12.     <br />
  13.     <br />
  14.     <ButtonGroup>
  15.       <Button disabled>左</Button>
  16.       <Button disabled>中</Button>
  17.       <Button disabled>右</Button>
  18.     </ButtonGroup>
  19.     <br />
  20.     <br />
  21.     <ButtonGroup>
  22.       <Button type="secondary">左</Button>
  23.       <Button type="secondary">中</Button>
  24.       <Button type="secondary">右</Button>
  25.     </ButtonGroup>
  27.     <h4>带图标按钮组合</h4>
  28.     <ButtonGroup>
  29.       <Button type="primary">
  30.         <Icon type="arrow-left" />
  31.         <span>后退</span>
  32.       </Button>
  33.       <Button type="primary">
  34.         前进<Icon type="arrow-right" />
  35.       </Button>
  36.     </ButtonGroup>
  37.     <br />
  38.     <br />
  39.     <ButtonGroup>
  40.       <Button type="primary">
  41.         <Icon type="arrow-left" />
  42.       </Button>
  43.       <Button type="primary">
  44.         <Icon type="arrow-right" />
  45.       </Button>
  46.     </ButtonGroup>
  48.     <h4>多个组合</h4>
  49.     <ButtonGroup>
  50.       <Button>1</Button>
  51.       <Button>2</Button>
  52.       <Button>3</Button>
  53.       <Button>4</Button>
  54.       <Button>
  55.         <span>前进</span>
  56.         <Icon type="arrow-right" />
  57.       </Button>
  58.     </ButtonGroup>
  59.   </div>,
  60.   mountNode
  61. );

图标按钮

Button 可以嵌入 Icon，此时无需自定义 Icon 的大小，Icon 会跟随 Button 组件的大小。

Button 按钮 - 图5

查看源码在线预览

  1. import { Button, Icon } from "@icedesign/base";
  3. ReactDOM.render(
  4.   <div>
  5.     <Button>
  6.       <Icon type="atm" />按钮
  7.     </Button>{" "}
  8.     &nbsp;&nbsp;
  9.     <Button shape="text">
  10.       <Icon type="atm" />文字按钮
  11.     </Button>{" "}
  12.     &nbsp;&nbsp;
  13.     <Button shape="warning">
  14.       <Icon type="atm" />文字按钮
  15.     </Button>
  16.   </div>,
  17.   mountNode
  18. );

加载中

添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

Button 按钮 - 图6

查看源码在线预览

  1. import { Button } from "@icedesign/base";
  3. class Demo extends React.Component {
  4.   constructor(props, context) {
  5.     super(props, context);
  7.     this.state = {
  8.       loading: false,
  9.       iconLoading: false
  10.     };
  11.   }
  12.   enterLoading() {
  13.     this.setState({ loading: true });
  14.   }
  15.   enterIconLoading() {
  16.     this.setState({ iconLoading: true });
  17.   }
  18.   render() {
  19.     return (
  20.       <div>
  21.         <Button type="secondary" loading>
  22.           加载中
  23.         </Button>&nbsp;&nbsp;
  24.         <Button
  25.           type="primary"
  26.           loading={this.state.loading}
  27.           onClick={this.enterLoading.bind(this)}
  28.         >
  29.           点击变加载
  30.         </Button>
  31.       </div>
  32.     );
  33.   }
  34. }
  36. ReactDOM.render(<Demo />, mountNode);

按钮尺寸

对于按钮组而言，可以通过在 Button.Group 上统一设置整个组按钮的大小。通过设置 size 为 large medium small 分别把按钮设为大、中、小尺寸。若不设置 size，则尺寸为中。按钮有大、中、小三种尺寸。

Button 按钮 - 图7

查看源码在线预览

  1. import { Button, Icon } from "@icedesign/base";
  3. const ButtonGroup = Button.Group;
  5. ReactDOM.render(
  6.   <div>
  7.     <Button type="primary" size="large">
  8.       <Icon type="atm" />大号按钮
  9.     </Button>&nbsp;&nbsp;
  10.     <Button type="primary">
  11.       <Icon type="atm" />中号按钮(默认)
  12.     </Button>&nbsp;&nbsp;
  13.     <Button type="primary" size="small">
  14.       <Icon type="atm" />小号按钮
  15.     </Button>
  16.     <br />
  17.     <br />
  18.     <ButtonGroup size="large">
  19.       <Button>大</Button>
  20.       <Button>大</Button>
  21.       <Button>大</Button>
  22.     </ButtonGroup>&nbsp;&nbsp;
  23.     <ButtonGroup>
  24.       <Button>默认</Button>
  25.       <Button>默认</Button>
  26.       <Button>默认</Button>
  27.     </ButtonGroup>&nbsp;&nbsp;
  28.     <ButtonGroup size="small">
  29.       <Button>小</Button>
  30.       <Button>小</Button>
  31.       <Button>小</Button>
  32.     </ButtonGroup>
  33.   </div>,
  34.   mountNode
  35. );

Split Button

SplitButton

Button 按钮 - 图8

查看源码在线预览

  1. import { Button, Menu } from "@icedesign/base";
  3. const SplitButton = Button.Split;
  4. const menu = (
  5.   <Menu>
  6.     <Menu.Item disabled>abc</Menu.Item>
  7.     <Menu.Item key="abc">abc</Menu.Item>
  8.     <Menu.Divider key="5" />
  9.     <Menu.Item key="1">abc</Menu.Item>
  10.     <Menu.Item key="2">abc</Menu.Item>
  11.   </Menu>
  12. );
  14. ReactDOM.render(
  15.   <div>
  16.     <h3>普通按钮</h3>
  17.     <SplitButton menu={menu} type="primary" onClick={e => console.log(e)}>
  18.       Upload
  19.     </SplitButton>&nbsp;&nbsp;
  20.     <SplitButton menu={menu} type="secondary">
  21.       Upload
  22.     </SplitButton>&nbsp;&nbsp;
  23.     <SplitButton menu={menu} type="normal" disabled>
  24.       Upload
  25.     </SplitButton>
  26.     <h3>文字按钮</h3>
  27.     <SplitButton menu={menu} type="primary" shape="text">
  28.       Upload
  29.     </SplitButton>&nbsp;&nbsp;
  30.     <SplitButton menu={menu} type="secondary" shape="text">
  31.       Upload
  32.     </SplitButton>&nbsp;&nbsp;
  33.     <SplitButton menu={menu} type="normal" shape="text" disabled>
  34.       Upload
  35.     </SplitButton>
  36.     <h3>幽灵按钮</h3>
  37.     <div>
  38.       <div className="ghost-light-background">
  39.         <SplitButton type="light" shape="ghost" menu={menu}>
  40.           Ghost Light
  41.         </SplitButton>
  42.       </div>
  43.       <div className="ghost-dark-background">
  44.         <SplitButton type="dark" shape="ghost" menu={menu}>
  45.           Ghost Dark
  46.         </SplitButton>
  47.       </div>
  48.     </div>
  49.   </div>,
  50.   mountNode
  51. );
  1. .ghost-light-background {
  2.     display: inline-block;
  3.     height: 100px;
  4.     line-height: 100px;
  5.     width: 50%;
  6.     background: #EBECF0;
  7.     margin-bottom: 20px;
  8.     padding-left:10px;
  9.     box-sizing: border-box;
  10. }
  11. .ghost-dark-background {
  12.     display: inline-block;
  13.     height: 100px;
  14.     line-height: 100px;
  15.     width: 50%;
  16.     background: #333;
  17.     margin-bottom: 20px;
  18.     padding-left:10px;
  19.     box-sizing: border-box;
  20. }

相关区块

Button 按钮 - 图9

暂无相关区块