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。

相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
3月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
3天前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
27 13
|
12天前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
31 3
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
124 1
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
46 3
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
110 6
|
24天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
36 4
|
2月前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
84 1