Button

按钮相关组件。

组件

Button

<Button> 按钮组件。

Props

component

PropType: node

组件使用的元素，默认为 button。

href

PropType: string

如果设置 href，则渲染为 <a>。

target

PropType: string

设置为 href 以后可以设置链接打开方式。

amStyle

PropType: string

颜色样式。可选值：

• 'primary'
• 'secondary'
• 'success'
• 'warning'
• 'alert'
• 'dark'

amSize

PropType: string

按钮尺寸。可选值：

• 'xs'
• 'sm'
• 'lg'
• 'xl'
  不设置则显示默认尺寸。

hollow

PropType: bool

是否应用「镂空」样式。

block

PropType: bool

是否应用块级样式。

active

PropType: bool

是否应用「激活」样式。

disabled

PropType: bool

是否应用「禁止」样式。

ButtonGroup

<ButtonGroup> 按钮组组件，用于放置 <Button>。

Props

amStyle

PropType: string

颜色样式。可选值：

• 'primary'
• 'secondary'
• 'success'
• 'warning'
• 'alert'
• 'dark'
  该属性会传递到子 <Button> 组件上，子 <Button> 组件不用再设置。

amSize

PropType: string

按钮尺寸。可选值：

• 'xs'
• 'sm'
• 'lg'
• 'xl'
  不设置则显示默认尺寸。

该属性会传递到子 <Button> 组件上，子 <Button> 组件不用再设置。

hollow

PropType: bool

是否应用「镂空」样式。

该属性会传递到子 <Button> 组件上，子 <Button> 组件不用再设置。

justify

PropType: bool

按钮组宽度是否适应容器宽度。

stacked

PropType: bool

按钮是否垂直堆叠排列。

ButtonToolbar

<ButtonToolbar> 组件用于放置 <Button>，创建按钮工具拦效果。

示例

import React from 'react';
import {
  Container,
  Group,
  Button,
  ButtonGroup,
  Icon,
  Badge,
} from 'amazeui-touch';
const ButtonExample = React.createClass({
  render() {
    return (
      <Container {...this.props}>
        <h2>基本样式</h2>
        <Group
          header="默认样式"
        >
          <Button>Default</Button>
        </Group>
        <Group
          header="颜色样式"
        >
          <Button amStyle="primary">Primary</Button>
          <Button amStyle="secondary">Secondary</Button>
          <Button amStyle="success">Success</Button>
          <Button amStyle="warning">Warning</Button>
          <Button amStyle="alert">Alert</Button>
          <Button amStyle="dark">Dark</Button>
        </Group>
        <Group
          header="块级显示"
        >
          <Button block>Default Block</Button>
          <Button amStyle="primary" block>Primary Block</Button>
        </Group>
        <Group
          header="按钮大小"
        >
          <Button amSize="xs">Default xs</Button>
          <Button amSize="sm">Default sm</Button>
          <Button>Default</Button>
          <Button amSize="lg">Default lg</Button>
          <Button amSize="xl">Default xl</Button>
        </Group>
        <Group
          header="按钮状态"
        >
          <h4>disabled</h4>
          <Button amStyle="primary" disabled>Primary</Button>
          <h4>active</h4>
          <Button amStyle="primary" active>Primary</Button>
        </Group>
        <Group
          header="形状镂空"
        >
          <Button hollow>Default</Button>
          <Button hollow amStyle="primary">Primary</Button>
          <Button hollow amStyle="secondary">Secondary</Button>
          <Button hollow amStyle="success">Success</Button>
          <Button hollow amStyle="warning">Warning</Button>
          <Button hollow amStyle="alert">Alert</Button>
          <Button hollow amStyle="dark">Dark</Button>
        </Group>
        <h2>Button Group</h2>
        <Group
          header="默认形状"
        >
          <ButtonGroup>
            <Button>Left</Button>
            <Button>Center</Button>
            <Button>Right</Button>
          </ButtonGroup>
          <ButtonGroup amStyle="primary">
            <Button>Left</Button>
            <Button>Center</Button>
            <Button>Right</Button>
          </ButtonGroup>
          <ButtonGroup amStyle="alert">
            <Button>Left</Button>
            <Button>Center</Button>
            <Button>Right</Button>
          </ButtonGroup>
        </Group>
        <Group
          header="镂空按钮组"
        >
          <ButtonGroup amStyle="primary" hollow>
            <Button>Left</Button>
            <Button>Center</Button>
            <Button>Right</Button>
          </ButtonGroup>
        </Group>
        <Group
          header="按钮组大小"
        >
          <ButtonGroup amSize="xs">
            <Button>Left</Button>
            <Button>Center</Button>
            <Button>Right</Button>
          </ButtonGroup>
        </Group>
        <Group
          header="宽度自适应"
        >
          <ButtonGroup amStyle="primary" justify>
            <Button>Left</Button>
            <Button>Center</Button>
            <Button>Right</Button>
          </ButtonGroup>
        </Group>
        <Group
          header="垂直堆叠"
        >
          <ButtonGroup amStyle="primary" stacked>
            <Button>Left</Button>
            <Button>Center</Button>
            <Button>Right</Button>
          </ButtonGroup>
        </Group>
        <Group
          header="工具栏"
        >
          <div className="btn-toolbar">
            <Button>Left</Button>
            <Button>Center</Button>
            <Button>Right</Button>
          </div>
        </Group>
        <h2>组合使用</h2>
        <Group
          header="与 Icon 组合"
        >
          <Button>
            <Icon name="left-nav" />
            Default
          </Button>
          <Button
            amStyle="primary"
          >
            Primary
            <Icon name="right-nav" />
          </Button>
          <Button
            amStyle="secondary"
          >
            Search
            <Icon name="search" />
          </Button>
        </Group>
      </Container>
    );
  }
});
export default ButtonExample;

DemoCopy

原文: http://t.amazeui.org/#/docs/button