Button 按钮

定义／Definition

按钮用于标记一个（或封装一组）操作命令，触发相应的业务逻辑命令。

规则 / Rule

  • 在移动端中，同个页面只有一个主按钮；

  • 当页面中有两个及以上按钮时，需要区分主次关系，将主按钮放置于次按钮的右侧；

  • 按钮内容为两个字的时候，中间加空格；

  • 当按钮有组合出现，以文字的居中对齐

代码演示

类型/type

主按钮和次按钮可独立使用，需要强引导用主按钮。 在有多个操作同时出现时，需要区分主次优先级，主按钮在同一个操作区域建议最多出现一次。 

  1. // 此处用作demo展示，不要用在生产环境
  2. this.customNavFlag = true;
  5. import { Button, NavBar } from 'antd-mobile';
  7. const ButtonExample = React.createClass({
  8.   getInitialState() {
  9.     return {
  10.       dark: false,
  11.     };
  12.   },
  13.   switchDark() {
  14.     this.setState({ dark: !this.state.dark });
  15.   },
  16.   render() {
  17.     return (
  18.       <div className="button-container"
  19.         style={{ backgroundColor: this.state.dark ? 'black' : 'white', height: '100%' }}
  20.       >
  21.         <NavBar iconName={false} rightContent={(
  22.           <span
  23.             style={{ cursor: 'pointer' }}
  24.             onClick={this.switchDark}
  25.           >
  26.             {this.state.dark ? '白天' : '夜间'}
  27.           </span>
  28.           )}>
  29.           类型/type
  30.         </NavBar>
  32.         <div style={{ margin: '0 8px' }}>
  33.           <div style={{ margin: '32px 0' }}>
  34.             <p className="demo-p">type="primary" - 用于主要操作或必须点击才能完成流程的操作</p>
  35.             <div style={{ height: 8 }} />
  36.             <Button type="primary" onClick={e => console.log(e)}>primary按钮</Button>
  37.           </div>
  39.           <div style={{ margin: '32px 0' }}>
  40.             <p className="demo-p">默认type - 用于较轻或不希望引导用户使用的操作</p>
  41.             <div style={{ height: 8 }} />
  42.             <Button>default 按钮</Button>
  43.           </div>
  45.           <div style={{ margin: '32px 0' }}>
  46.             <p className="demo-p">提醒按钮</p>
  47.             <div style={{ height: 8 }} />
  48.             <Button type="warning">warning 按钮</Button>
  49.           </div>
  51.           <div style={{ margin: '32px 0' }}>
  52.             <p className="demo-p">添加 loading 属性即可让按钮处于加载状态</p>
  53.             <div style={{ height: 8 }} />
  54.             <Button loading>loading 按钮</Button>
  55.           </div>
  56.         </div>
  57.       </div>
  58.     );
  59.   },
  60. });
  62. ReactDOM.render(<ButtonExample />, mountNode);

幽灵模式/ghost

当操作并不需要太过强调/明显时，可以启动幽灵变量。 该变量是在原有按钮类型上的变形，主次等级遵循原有按钮的规则。 

  1. // 此处用作demo展示，不要用在生产环境
  2. this.customNavFlag = true;
  5. import { Button, NavBar } from 'antd-mobile';
  7. const ButtonExample = React.createClass({
  8.   getInitialState() {
  9.     return {
  10.       dark: false,
  11.     };
  12.   },
  13.   switchDark() {
  14.     this.setState({ dark: !this.state.dark });
  15.   },
  16.   render() {
  17.     return (
  18.       <div className="button-container"
  19.         style={{ backgroundColor: this.state.dark ? 'black' : 'white', height: '100%' }}
  20.       >
  21.         <NavBar iconName={false} rightContent={<span
  22.           style={{ cursor: 'pointer' }}
  23.           onClick={this.switchDark}
  24.         >{this.state.dark ? '白天' : '夜间'}</span>}>
  25.           幽灵模式/ghost
  26.         </NavBar>
  28.         <div style={{ margin: '0 8px' }}>
  29.           <div style={{ margin: '32px 0' }}>
  30.             <p className="demo-p">主按钮的幽灵模式，用于较轻量级或希望引导用户使用的操作</p>
  31.             <div style={{ height: 8 }} />
  32.             <Button type="primary" ghost>primary ghost 按钮</Button>
  33.           </div>
  35.           <div style={{ margin: '32px 0' }}>
  36.             <p className="demo-p">次按钮的幽灵模式，用于较轻量级或不希望引导用户使用的操作</p>
  37.             <div style={{ height: 8 }} />
  38.             <Button ghost>default ghost 按钮</Button>
  39.           </div>
  40.         </div>
  41.       </div>
  42.     );
  43.   },
  44. });
  46. ReactDOM.render(<ButtonExample />, mountNode);

失效状态/disabled

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

  1. // 此处用作demo展示，不要用在生产环境
  2. this.customNavFlag = true;
  5. import { Button, NavBar } from 'antd-mobile';
  7. const ButtonExample = React.createClass({
  8.   getInitialState() {
  9.     return {
  10.       dark: false,
  11.     };
  12.   },
  13.   switchDark() {
  14.     this.setState({ dark: !this.state.dark });
  15.   },
  16.   render() {
  17.     return (
  18.       <div className="button-container"
  19.         style={{ backgroundColor: this.state.dark ? 'black' : 'white', height: '100%' }}
  20.       >
  21.         <NavBar iconName={false} rightContent={<span
  22.           style={{ cursor: 'pointer' }}
  23.           onClick={this.switchDark}
  24.         >{this.state.dark ? '白天' : '夜间'}</span>}>
  25.           失效状态
  26.         </NavBar>
  28.         <div style={{ margin: '0 8px' }}>
  29.           <div style={{ margin: '32px 0' }}>
  30.             <p className="demo-p">主按钮失效</p>
  31.             <div style={{ height: 8 }} />
  32.             <Button type="primary" disabled>primary 按钮</Button>
  33.             <div style={{ height: 8 }} />
  34.             <Button type="primary" ghost disabled>primary ghost 按钮</Button>
  35.           </div>
  37.           <div style={{ margin: '32px 0' }}>
  38.             <p className="demo-p">次按钮失效</p>
  39.             <div style={{ height: 8 }} />
  40.             <Button disabled>default disabled 按钮</Button>
  41.             <div style={{ height: 8 }} />
  42.             <Button ghost disabled>default ghost disabled 按钮</Button>
  43.           </div>
  44.         </div>
  45.       </div>
  46.     );
  47.   },
  48. });
  50. ReactDOM.render(<ButtonExample />, mountNode);

尺寸/size、行内按钮/inline

支持大小两种尺寸。 支持是否是行内按钮。 

  1. // 此处用作demo展示，不要用在生产环境
  2. this.customNavFlag = true;
  5. import { Button, NavBar } from 'antd-mobile';
  7. const ButtonExample = React.createClass({
  8.   getInitialState() {
  9.     return {
  10.       dark: false,
  11.     };
  12.   },
  13.   switchDark() {
  14.     this.setState({ dark: !this.state.dark });
  15.   },
  16.   render() {
  17.     return (
  18.       <div className="button-container"
  19.         style={{ backgroundColor: this.state.dark ? 'black' : 'white', height: '100%' }}
  20.       >
  21.         <NavBar iconName={false} rightContent={<span
  22.           style={{ cursor: 'pointer' }}
  23.           onClick={this.switchDark}
  24.         >{this.state.dark ? '白天' : '夜间'}</span>}>
  25.           尺寸/行内
  26.         </NavBar>
  27.         <div style={{ margin: '0 8px' }}>
  28.           <div style={{ margin: '32px 0' }}>
  29.             <p className="demo-p">主按钮</p>
  30.             <div style={{ height: 8 }} />
  31.             <Button type="primary">primary 按钮</Button>
  32.             <div style={{ height: 8 }} />
  33.             <Button type="primary" inline>inline</Button>&nbsp;
  34.             <Button type="primary" size="small" inline>inline</Button>
  35.           </div>
  37.           <div style={{ margin: '32px 0' }}>
  38.             <p className="demo-p">次按钮</p>
  39.             <div style={{ height: 8 }} />
  40.             <Button>default 按钮</Button>
  41.             <div style={{ height: 8 }} />
  42.             <Button inline>inline</Button>&nbsp;
  43.             <Button size="small" inline>inline</Button>
  44.           </div>
  45.         </div>
  46.       </div>
  47.     );
  48.   },
  49. });
  51. ReactDOM.render(<ButtonExample />, mountNode);

应用场景示例

和 List / Flex 结合使用示例 

  1. import { Button, Flex, List } from 'antd-mobile';
  2. ReactDOM.render(
  3.   <div className="button-container">
  4.     <div style={{ margin: '32px 8px 8px' }}>
  5.       <Flex>
  6.         <Flex.Item>
  7.           <Button type="primary" size="small">primary按钮</Button>
  8.         </Flex.Item>
  9.         <Flex.Item>
  10.           <Button type="primary" ghost size="small">primary ghost 按钮</Button>
  11.         </Flex.Item>
  12.       </Flex>
  14.       <div style={{ height: 8 }} />
  16.       <Flex>
  17.         <Flex.Item>
  18.           <Button size="small" inline>small</Button>
  19.         </Flex.Item>
  20.       </Flex>
  21.     </div>
  23.     <List >
  24.       <List.Body>
  25.         <List.Item line={2}
  26.           extra={<Button type="primary" size="small" inline>small</Button>}
  27.         >
  28.           <div className="am-list-title">区域经理</div>
  29.           <div className="am-list-brief">可进行收款、退款、折扣管理、查看数据等操作</div>
  30.         </List.Item>
  31.         <List.Item line={2}
  32.           extra={<Button size="small" inline>small</Button>}
  33.         >
  34.           <div className="am-list-title">区域经理</div>
  35.           <div className="am-list-brief">可进行收款、退款、折扣管理、查看数据等操作</div>
  36.         </List.Item>
  37.       </List.Body>
  38.     </List>
  39.   </div>
  40. , mountNode);

Button按钮 - 图1

API

成员说明类型默认值
type按钮类型，可选值为primary/warning或者不设string-
htmlType(web)设置button原生的type值，可选值请参考 HTML标准stringbutton
ghost是否是幽灵按钮booleanfalse
size设置按钮大小，可选值为large、smallstringlarge
loading(web)设置按钮载入状态booleanfalse
inline(web)是否是行内按钮booleanfalse
disabled是否不可用booleanfalse
onClick点击按钮的回调函数Function无