按钮不可用状态。
<Buttons>
<Button>Default</Button>
<Button Color="Color.Primary">Primary</Button>
<Button Color="Color.Success">Success</Button>
<Button Color="Color.Info">Info</Button>
<Button Color="Color.Warning">Warning</Button>
<Button Color="Color.Danger">Danger</Button>
<Button Color="Color.Ghost">Ghost</Button>
<Button Color="Color.Dark">Dark</Button>
<Button Color="Color.Link">Link</Button>
<Button Color="Color.Light">Light</Button>
</Buttons>
<Buttons>
<Button IsLight>Default</Button>
<Button IsLight Color="Color.Primary">Primary</Button>
<Button IsLight Color="Color.Success">Success</Button>
<Button IsLight Color="Color.Info">Info</Button>
<Button IsLight Color="Color.Warning">Warning</Button>
<Button IsLight Color="Color.Danger">Danger</Button>
<Button IsLight Color="Color.Ghost">Ghost</Button>
<Button IsLight Color="Color.Dark">Dark</Button>
<Button IsLight Color="Color.Link">Link</Button>
<Button IsLight Color="Color.Light">Light</Button>
</Buttons>
<Buttons>
<Button IsOutlined>Default</Button>
<Button IsOutlined Color="Color.Primary">Primary</Button>
<Button IsOutlined Color="Color.Success">Success</Button>
<Button IsOutlined Color="Color.Info">Info</Button>
<Button IsOutlined Color="Color.Warning">Warning</Button>
<Button IsOutlined Color="Color.Danger">Danger</Button>
<Button IsOutlined Color="Color.Ghost">Ghost</Button>
<Button IsOutlined Color="Color.Dark">Dark</Button>
<Button IsOutlined Color="Color.Link">Link</Button>
<Button IsOutlined Color="Color.Light">Light</Button>
</Buttons>
<Buttons>
<Button IsRounded>Default</Button>
<Button IsRounded Color="Color.Primary">Primary</Button>
<Button IsRounded Color="Color.Success">Success</Button>
<Button IsRounded Color="Color.Info">Info</Button>
<Button IsRounded Color="Color.Warning">Warning</Button>
<Button IsRounded Color="Color.Danger">Danger</Button>
<Button IsRounded Color="Color.Ghost">Ghost</Button>
<Button IsRounded Color="Color.Dark">Dark</Button>
<Button IsRounded Color="Color.Link">Link</Button>
<Button IsRounded Color="Color.Light">Light</Button>
</Buttons>
<Buttons>
<Button IsStatic>IsStatic</Button>
<Button IsLoading Color="Color.Primary">IsLoading</Button>
</Buttons>
按钮不可用状态。
<Buttons>
<Button disabled>Default</Button>
<Button disabled Color="Color.Primary">Primary</Button>
<Button disabled Color="Color.Success">Success</Button>
<Button disabled Color="Color.Info">Info</Button>
<Button disabled Color="Color.Warning">Warning</Button>
<Button disabled Color="Color.Danger">Danger</Button>
<Button disabled Color="Color.Ghost">Ghost</Button>
<Button disabled Color="Color.Dark">Dark</Button>
<Button disabled Color="Color.Link">Link</Button>
<Button disabled Color="Color.Light">Light</Button>
</Buttons>
<Buttons>
<Button disabled IsLight>Default</Button>
<Button disabled IsLight Color="Color.Primary">Primary</Button>
<Button disabled IsLight Color="Color.Success">Success</Button>
<Button disabled IsLight Color="Color.Info">Info</Button>
<Button disabled IsLight Color="Color.Warning">Warning</Button>
<Button disabled IsLight Color="Color.Danger">Danger</Button>
<Button disabled IsLight Color="Color.Ghost">Ghost</Button>
<Button disabled IsLight Color="Color.Dark">Dark</Button>
<Button disabled IsLight Color="Color.Link">Link</Button>
<Button disabled IsLight Color="Color.Light">Light</Button>
</Buttons>
带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
<Buttons>
<Button Color="Color.Primary">
<Icon IconClass="fa fa-edit"></Icon>
</Button>
<Button Color="Color.Primary">
<Icon IconClass="fa fa-share"></Icon>
</Button>
<Button Color="Color.Primary">
<Icon IconClass="fa fa-remove"></Icon>
</Button>
<Button Color="Color.Primary">
<Icon IconClass="fa fa-github"></Icon>
<span>GitHub</span>
</Button>
<Button Color="Color.Primary">
<Icon IconClass="fa fa-search"></Icon>
<span>Search</span>
</Button>
<Button Color="Color.Primary">
<span>Upload</span>
<Icon IconClass="fa fa-upload"></Icon>
</Button>
</Buttons>
以按钮组的方式出现,常用于多项类似操作。
<Buttons HasAddons>
<Button Color="Color.Info" IsSelected>Yes</Button>
<Button>Maybe</Button>
<Button>No</Button>
</Buttons>
<Buttons HasAddons IsCentered>
<Button>Yes</Button>
<Button Color="Color.Info" IsSelected>Maybe</Button>
<Button>No</Button>
</Buttons>
<Buttons HasAddons IsRight>
<Button>Yes</Button>
<Button>Maybe</Button>
<Button Color="Color.Info" IsSelected>No</Button>
</Buttons>
Button 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。
<Buttons>
<Button IsLarge>大尺寸</Button>
<Button IsMedium>中尺寸</Button>
<Button>默认大小</Button>
<Button IsSmall>小尺寸</Button>
</Buttons>
<Buttons>
<Button IsRounded IsLarge>大尺寸</Button>
<Button IsRounded IsMedium>中尺寸</Button>
<Button IsRounded>默认大小</Button>
<Button IsRounded IsSmall>小尺寸</Button>
</Buttons>
文档