Button 按钮

点击后会触发一个操作。

规则

  • 同个页面只有一个主按钮。

代码演示

类型、尺寸

主按钮和次按钮可独立使用，需要强引导用主按钮。 在有多个操作同时出现时，需要区分主次优先级，主按钮在同一个操作区域建议最多出现一次。 其他按钮类型有：ghost/warning；有单独的loading/disabled属性设置 

  1. import { Button } from 'antd-mobile';
  3. const ButtonExample = React.createClass({
  4.   render() {
  5.     return (
  6.       <div style={{ margin: '0 8px' }}>
  8.         <div style={{ margin: '32px 0' }}>
  9.           <Button>default 按钮</Button>
  10.           <div style={{ height: 8 }} />
  11.           <Button disabled>default disabled 按钮</Button>
  12.         </div>
  14.         <div style={{ margin: '32px 0' }}>
  15.           <Button type="primary" onClick={e => console.log(e)}>primary 按钮</Button>
  16.           <div style={{ height: 8 }} />
  17.           <Button type="primary" disabled>primary disabled 按钮</Button>
  18.         </div>
  20.         <div style={{ margin: '32px 0' }}>
  21.           <Button type="ghost" onClick={e => console.log(e)}>ghost 按钮</Button>
  22.           <div style={{ height: 8 }} />
  23.           <Button type="ghost" disabled>ghost disabled 按钮</Button>
  24.         </div>
  26.         <div style={{ margin: '32px 0' }}>
  27.           <Button type="warning">warning 按钮</Button>
  28.         </div>
  30.         <div style={{ margin: '32px 0' }}>
  31.           <Button loading>loading 按钮</Button>
  32.         </div>
  34.         <div style={{ margin: '32px 0' }}>
  35.           <p className="demo-p">inline / small</p>
  36.           <div style={{ height: 8 }} />
  37.           <Button inline>default inline</Button>&nbsp;
  38.           <Button inline size="small">default inline small</Button>
  39.           <div style={{ height: 8 }} />
  40.           <Button type="primary" inline>primary inline</Button>&nbsp;
  41.           <Button type="primary" inline size="small">primary inline small</Button>
  42.         </div>
  43.       </div>
  44.     );
  45.   },
  46. });
  48. ReactDOM.render(<ButtonExample />, mountNode);

应用场景示例

和 List / Flex 结合使用示例 

  1. import { Button, List } from 'antd-mobile';
  3. ReactDOM.render(
  4.   <List style={{ margin: '10px 0', backgroundColor: 'white' }}>
  5.     <List.Body>
  6.       <List.Item
  7.         extra={<Button type="ghost" size="small" inline>small</Button>}
  8.         multipleLine
  9.       >
  10.         区域经理
  11.         <List.Item.Brief>可进行收款、退款、折扣管理、查看数据等操作</List.Item.Brief>
  12.       </List.Item>
  13.       <List.Item
  14.         extra={<Button size="small" inline>small</Button>}
  15.         multipleLine
  16.       >
  17.         区域经理
  18.         <List.Item.Brief>可进行收款、退款、折扣管理、查看数据等操作</List.Item.Brief>
  19.       </List.Item>
  20.     </List.Body>
  21.   </List>
  22. , mountNode);

Button按钮 - 图1

API

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