Button按钮 按钮用于开始一个即时操作。 何时使用# 标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。 代码演示 按钮类型 按钮有四种类型:主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。 danger在antd@2.7后支持。
Danger LinkDanger Link(disabled) GhostGhost(disabled) 不可用状态 添加disabled属性即可让按钮处于不可用状态,同时按钮样式也会改变。 primarysecondary Actions 多个按钮组合 按钮组合使用时,推荐使用 1 个主操作 + n 个次操作,3 个以上操作时把更多操作放到Dropdown.Button中组合使用。
危险按钮 Danger button 预览 预览 正确示范 用户的主要意图是删除,通过红色警示该操作存在风险。 预览 正确示范 当系统不推荐用户执行删除操作时,可将取消按钮设置为主按钮。 警示用户该操作存在风险。 幽灵按钮 Ghost button 置于复杂或较深的背景中,避免按钮突兀地破坏背景的整体性。该场景下可灵活定制样式。
</a-button> <a-button type="danger"> danger </a-button> <a-button type="link"> link </a-button> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 运行结果: 这个属性可以帮助我们丰富按钮的风格 block 将按钮宽度调整为其父宽度的选项,简单说就是让按钮的宽度撑满他的父容器 具体代码如下...
Danger:是否为危险按钮,默认为No. Ghost:是否为幽灵按钮,默认为No. Event Section OnClick Event:点击按钮事件。 与antdButton 的功能对比 这里列举了antd中Button的所有参数,并说明了该组件是否支持该属性,以及不支持的原因。如果想查看antd中原属性的含义,请移步这里。
import{Button}from'ant-design-vue';Vue.use(Button); 代码演示 PrimaryDefaultDashedDanger按钮按 钮Link 按钮类型# 按钮有五种类型:主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。 PrimaryPrimary(disabled) DefaultDefault(disabled) ...
Button 的danger现在作为一个属性而不是按钮类型。Input、Select 的value为undefined时改为非受控状态。Table 重写在没有columns时仍然会保留一列。嵌套dataIndex支持从'xxx.yyy'改成['xxx', 'yyy']。<Table columns={[ { title: 'Age',- dataIndex: 'user.age',+ dataIndex: ['user', 'age...
danger: used for actions of risk, like deletion or authorization. ghost: used in situations with complex background, home pages usually. disabled: when actions are not available. loading: add loading spinner in button, avoiding multiple submits too....
代码中我们可以看到这些函数都是调用button-color来设置按钮的边框,背景,文字颜色,和调用button-disabled来设置禁用样式。主要还是基础颜色样式不同,而且hover,active颜色样式不一样。而且在后面函数中btn-primary、btn-default、btn-ghost、btn-dashed、btn-danger调用上面的对应函数。代码如下: ...
<Button Danger Type="@ButtonType.Link"Style="padding:0px">Delete</Button> </Popconfirm> </SpaceItem> } </Space> </ActionColumn> </ChildContent> <PaginationTemplate> <div style="float:right;margin-top:10px"> <Pagination Total="Pagination.Total...