vue复选框组件_Vue的轻量级材料设计复选框组件

vue复选框组件

Vue材料复选框 (Vue material checkbox)

Material design checkbox component for Vue.

Vue的材料设计复选框组件。

View demo 查看演示 Download Source 下载源

用 (Use)

与npm (With npm)

• install plugin

  安装插件

npm install vue-material-checkbox --save

• import to the app and add to the Vue

  导入到应用程序并添加到Vue

import checkbox from 'vue-material-checkbox'
Vue.use(checkbox)

• Use it as component:

  用作组件：

<checkbox id="mycheck1" v-model="someVar">My Checkbox</checkbox>

零件 (Component)

There is autogenerated id for label and checkbox, but you can specify it yourself.

标签和复选框有自动生成的ID，但您可以自己指定。

You can specify label for checkbox inside checkbox tag:

您可以在复选框标签内为复选框指定标签：

<checkbox id="mycheck1" v-model="someVar"> ThisIsLabel </checkbox>

You can set custom color for background of checkbox:

您可以为复选框的背景设置自定义颜色：

<checkbox id="mycheck1" v-model="someVar" color="#f50057"> ThisIsLabel </checkbox>

道具完整表 (Complete props table)

Prop	Type	Default	What For
id	String	undefined	Recommended. input id associated with label
value	String	undefined	Value for input, without it checkbox works as true/false
color	String	undefined	Pass the color string to change bg-color of checkbox
checked	Boolean	false	is checked by default?
name	String	undefined	Name for input
required	Boolean	false	HTML required attr
disabled	Boolean	false	HTML disabled attr

Struts	类型	默认	做什么的
id	String	undefined	推荐 。 与标签关联的输入ID
value	String	undefined	输入值(不带输入)复选框为true/false
color	String	undefined	传递颜色字符串以更改复选框的bg-color
checked	Boolean	false	默认情况下被选中？
name	String	undefined	输入名称
required	Boolean	false	HTML必需的属性
disabled	Boolean	false	禁用HTML的attr

去做 (todo)

• ripple effect

  连锁React

翻译自: https://vuejsexamples.com/lightweight-material-design-checkbox-component-for-vue/

vue复选框组件