Viog UI

按钮 button

按钮是项目中最常用的组件之一

使用说明

简单引入

使用此方法引入最基础的按钮样式

展开代码
<vi-button>按钮</vi-button>

颜色

共有八种颜色的按钮，使用属性color进行调控

展开代码
<vi-button>按钮</vi-button>
<vi-button color="purple">按钮</vi-button>
<vi-button color="red">按钮</vi-button>
<vi-button color="pink">按钮</vi-button>
<vi-button color="yellow">按钮</vi-button>
<vi-button color="blue">按钮</vi-button>
<vi-button color="green">按钮</vi-button>
<vi-button color="dark">按钮</vi-button>

可以通过添加mutate属性，将按钮颜色变异，使按钮更加炫酷

展开代码
<vi-button>按钮</vi-button>
<vi-button mutate color="purple">按钮</vi-button>
<vi-button mutate color="red">按钮</vi-button>
<vi-button mutate color="pink">按钮</vi-button>
<vi-button mutate color="yellow">按钮</vi-button>
<vi-button mutate color="blue">按钮</vi-button>
<vi-button mutate color="green">按钮</vi-button>
<vi-button color="dark">按钮</vi-button>

需要注意的是，default/dark颜色按钮，mutate属性对其无效

样式

通过修改type属性、配合mutate属性，可以定义不同的按钮样式

展开代码
<vi-button type="plain">按钮</vi-button>
<vi-button type="plain" color="purple">按钮</vi-button>
<vi-button type="plain" color="red">按钮</vi-button>
<vi-button type="plain" color="pink">按钮</vi-button>
<vi-button type="plain" color="yellow">按钮</vi-button>
<vi-button type="plain" color="blue">按钮</vi-button>
<vi-button type="plain" color="green">按钮</vi-button>
<vi-button type="plain" color="dark">按钮</vi-button>
展开代码
<vi-button mutate type="plain">按钮</vi-button>
<vi-button mutate type="plain" color="purple">按钮</vi-button>
<vi-button mutate type="plain" color="red">按钮</vi-button>
<vi-button mutate type="plain" color="pink">按钮</vi-button>
<vi-button mutate type="plain" color="yellow">按钮</vi-button>
<vi-button mutate type="plain" color="blue">按钮</vi-button>
<vi-button mutate type="plain" color="green">按钮</vi-button>
<vi-button mutate type="plain" color="dark">按钮</vi-button>
展开代码
<vi-button type="transparent">按钮</vi-button>
<vi-button type="transparent" color="purple">按钮</vi-button>
<vi-button type="transparent" color="red">按钮</vi-button>
<vi-button type="transparent" color="pink">按钮</vi-button>
<vi-button type="transparent" color="yellow">按钮</vi-button>
<vi-button type="transparent" color="blue">按钮</vi-button>
<vi-button type="transparent" color="green">按钮</vi-button>
<vi-button type="transparent" color="dark">按钮</vi-button>
展开代码
<vi-button mutate type="transparent">按钮</vi-button>
<vi-button mutate type="transparent" color="purple">按钮</vi-button>
<vi-button mutate type="transparent" color="red">按钮</vi-button>
<vi-button mutate type="transparent" color="pink">按钮</vi-button>
<vi-button mutate type="transparent" color="yellow">按钮</vi-button>
<vi-button mutate type="transparent" color="blue">按钮</vi-button>
<vi-button mutate type="transparent" color="green">按钮</vi-button>
<vi-button mutate type="transparent" color="dark">按钮</vi-button>

按钮弧度

通过修改radius属性，可以定义不同的按钮边框弧度

展开代码
<vi-button radius="round">按钮</vi-button>
<vi-button radius="round" color="purple">欢迎使用viog-ui</vi-button>

<vi-button radius="circle">按钮</vi-button>
<vi-button radius="circle" type="transparent" mutate color="yellow">
  <vi-icon size="big" type="renzheng"/>
</vi-button>

禁用

为按钮添加disabled属性开启禁用

展开代码
<vi-button disabled >按钮</vi-button>
<vi-button disabled type="plain">按钮</vi-button>
<vi-button disabled type="transparent">按钮</vi-button>

尺寸

通过size属性定义大中小按钮

展开代码
<vi-button size="big">按钮</vi-button>
<vi-button>按钮</vi-button>
<vi-button size="small">按钮</vi-button>

Props

属性名描述类型默认值

插槽

插槽名描述有无默认内容