vue-ant design示例大全——按钮本地css/js资源

简介: vue-ant design示例大全——按钮本地css/js资源

示例资源来自官网:https://www.antdv.com/components/button-cn


在 Ant Design Vue 中我们提供了五种按钮。


主按钮:用于主行动点,一个操作区域只能有一个主按钮。

默认按钮:用于没有主次之分的一组行动点。

虚线按钮:常用于添加操作。

文本按钮:用于最次级的行动点。

链接按钮:一般用于链接,即导航至某位置。

以及四种状态属性与上面配合使用。


危险:删除/移动/修改权限等危险操作,一般需要二次确认。

幽灵:用于背景色比较复杂的地方,常用在首页/产品页等展示场景。

禁用:行动点不可用的时候,一般需要文案解释。

加载中:用于异步操作等待反馈的时候,也可以避免多次提交。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
  <title></title>
  </head>
  <link rel="stylesheet" type="text/css" href="css/antd.min.css" />
  <body>
  <div id="app">
    <h1>基础按钮</h1>
    <a-button type="primary">Primary Button</a-button>
    <a-button>Default Button</a-button>
    <a-button type="dashed">Dashed Button</a-button>
    <a-button type="text">Text Button</a-button>
    <a-button type="link">Link Button</a-button>
    <hr/>
    <h1>禁用-警告-图标按钮</h1>
    <a-button type="primary" disabled>Primary(disabled)</a-button>
    <a-button type="primary" danger>Primary</a-button>
    <a-button type="primary">
    <a-icon type="wifi"></a-icon>
    </a-button>
    <a-button type="primary" shape="circle">
    <a-icon type="wifi"></a-icon>
    </a-button>
    <hr/>
    <h1>按钮组</h1>
    <a-radio-group>
    <a-radio-button value="large">Large</a-radio-button>
    <a-radio-button value="default">Default</a-radio-button>
    <a-radio-button value="small">Small</a-radio-button>
    </a-radio-group>
    <hr/>
    <h1>宽度按钮</h1>
    <a-button type="primary" block>Primary</a-button>
    <a-button block>Default</a-button>
    <a-button type="dashed" block>Dashed</a-button>
    <a-button danger block>Danger</a-button>
    <a-button type="link" block>Link</a-button>
  </div>
  <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/antd.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    new Vue({
    el: "#app"
    })
  </script>
  </body>
</html>

image.png



通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:type -> shape -> size -> loading -> disabled。


按钮的属性说明如下:

image.png


image.png

事件 #


image.png

image.png

支持原生 button 的其他所有属性。


FAQ #

如何移除 2 个汉字之间的空格 #

根据 Ant Design 设计规范要求,我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格,如果你不需要这个特性,可以设置 ConfigProvider的 autoInsertSpaceInButton 为 false。

相关文章
|
19天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
7天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
3天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
9 3
|
7天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
13天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
64 6
|
Web App开发 JavaScript 前端开发
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。