基础组件 您所在的位置:网站首页 icon组件的属性包括哪些内容和功能 基础组件

基础组件

2024-07-16 20:41| 来源: 网络整理| 查看: 265

Button 按钮介绍引入代码演示按钮类型朴素按钮细边框禁用状态加载状态按钮形状图标按钮按钮尺寸块级元素页面导航自定义颜色APIPropsEventsSlots类型定义主题定制样式变量Button 按钮介绍

按钮用于触发一个操作,如提交表单。

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册。

import { createApp } from 'vue';import { Button } from 'vant';const app = createApp();app.use(Button);代码演示按钮类型

按钮支持 default、primary、success、warning、danger 五种类型,默认为 default。

主要按钮成功按钮默认按钮警告按钮危险按钮朴素按钮

通过 plain 属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。

朴素按钮朴素按钮细边框

设置 hairline 属性可以展示 0.5px 的细边框。

细边框按钮细边框按钮禁用状态

通过 disabled 属性来禁用按钮,禁用状态下按钮不可点击。

禁用状态禁用状态加载状态

通过 loading 属性设置按钮为加载状态,加载状态下默认会隐藏按钮文字,可以通过 loading-text 设置加载状态下的文字。

按钮形状

通过 square 设置方形按钮,通过 round 设置圆形按钮。

方形按钮圆形按钮图标按钮

通过 icon 属性设置按钮图标,支持 Icon 组件里的所有图标,也可以传入图标 URL。

按钮 按钮按钮尺寸

支持 large、normal、small、mini 四种尺寸,默认为 normal。

大号按钮普通按钮小型按钮迷你按钮块级元素

按钮在默认情况下为行内块级元素,通过 block 属性可以将按钮的元素类型设置为块级元素。

块级元素页面导航

可以通过 url 属性进行 URL 跳转,或通过 to 属性进行路由跳转。

URL 跳转路由跳转自定义颜色

通过 color 属性可以自定义按钮的颜色。

单色按钮单色按钮 渐变色按钮APIProps参数说明类型默认值type类型,可选值为 primary success warning dangerstringdefaultsize尺寸,可选值为 large small ministringnormaltext按钮文字string-color按钮颜色,支持传入 linear-gradient 渐变色string-icon左侧图标名称或图片链接,等同于 Icon 组件的 name 属性string-icon-prefix图标类名前缀,等同于 Icon 组件的 class-prefix 属性stringvan-iconicon-position图标展示位置,可选值为 rightstringlefttag按钮根节点的 HTML 标签stringbuttonnative-type原生 button 标签的 type 属性stringbuttonblock是否为块级元素booleanfalseplain是否为朴素按钮booleanfalsesquare是否为方形按钮booleanfalseround是否为圆形按钮booleanfalsedisabled是否禁用按钮booleanfalsehairline是否使用 0.5px 边框booleanfalseloading是否显示为加载状态booleanfalseloading-text加载状态提示文字string-loading-type加载图标类型,可选值为 spinnerstringcircularloading-size加载图标大小,默认单位为 pxnumber | string20pxurl点击后跳转的链接地址string-to点击后跳转的目标路由对象,等同于 vue-router 的 to 属性string | object-replace是否在跳转时替换当前页面历史booleanfalse Events事件名说明回调参数click点击按钮,且按钮状态不为加载或禁用时触发event: MouseEventtouchstart开始触摸按钮时触发event: TouchEvent Slots名称说明default按钮内容icon v3.0.18自定义图标loading自定义加载图标 类型定义

组件导出以下类型定义:

import type { ButtonType, ButtonSize, ButtonProps, ButtonNativeType, ButtonIconPosition,} from 'vant';主题定制样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称默认值描述—van-button-mini-height24px-—van-button-mini-padding0 var(—van-padding-base)-—van-button-mini-font-sizevar(—van-font-size-xs)-—van-button-small-height32px-—van-button-small-padding0 var(—van-padding-xs)-—van-button-small-font-sizevar(—van-font-size-sm)-—van-button-normal-font-sizevar(—van-font-size-md)-—van-button-normal-padding0 15px-—van-button-large-height50px-—van-button-default-height44px-—van-button-default-line-height1.2-—van-button-default-font-sizevar(—van-font-size-lg)-—van-button-default-colorvar(—van-text-color)-—van-button-default-backgroundvar(—van-background-2)-—van-button-default-border-colorvar(—van-gray-4)-—van-button-primary-colorvar(—van-white)-—van-button-primary-backgroundvar(—van-primary-color)-—van-button-primary-border-colorvar(—van-primary-color)-—van-button-success-colorvar(—van-white)-—van-button-success-backgroundvar(—van-success-color)-—van-button-success-border-colorvar(—van-success-color)-—van-button-danger-colorvar(—van-white)-—van-button-danger-backgroundvar(—van-danger-color)-—van-button-danger-border-colorvar(—van-danger-color)-—van-button-warning-colorvar(—van-white)-—van-button-warning-backgroundvar(—van-orange)-—van-button-warning-border-colorvar(—van-orange)-—van-button-border-widthvar(—van-border-width)-—van-button-radiusvar(—van-radius-md)-—van-button-round-radiusvar(—van-radius-max)-—van-button-plain-backgroundvar(—van-white)-—van-button-disabled-opacityvar(—van-disabled-opacity)-—van-button-icon-size1.2em-—van-button-loading-icon-size20px-



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有