Check

UI renderless check group component

Import

import { Check, CheckBox, CheckGroup, CheckList } from  'mand-mobile-next'

Vue.createApp().component(Check.name, Check)
Vue.createApp().component(CheckBox.name, CheckBox)
Vue.createApp().component(CheckGroup.name, CheckGroup)
Vue.createApp().component(CheckList.name, CheckList)

Code Examples

API

Check Props

Props	Description	Type	Default	Note
name	unique name	any	`true`	-
v-model	selected name	any	`false`	-
label	option text	String	-	-
disabled	whether disable selection or not	Boolean	`false`	-
icon	icon name of checked options	String	`checked`	-
icon-inverse	icon name of unchecked options	String	`checke`	-
icon-disabled	icon name of disabled options	String	`check-disabled`	-
icon-svg	use svg icon	Boolean	`false`	-
size	size of icon	String	`md`	-
icon-position	icon position	String	`right`	-

CheckBox Props

Props	Description	Type	Default	Note
name	unique name	any	`true`	-
v-model	selected name	any	`false`	-
disabled	whether disable selection or not	Boolean	`false`	-

CheckGroup Props

Check multiple checks. Combine with Check or CheckBox.

Props	Description	Type	Default	Note
v-model	selected names	Array	-	-
max	max selected name length	Number	`0`	`0`: no limit

CheckGroup Methods

check(name)

Arg	Description	Type	Default
name	name will be selected	String	-

uncheck(name)

Arg	Description	Type	Default
name	name will be unselected	String	-

toggle(name)

Arg	Description	Type	Default
name	name will be toggle	String	-

toggleAll(checked?: Boolean)

Select All or Deselect (disabled options will not be changed)

Arg	Description	Type	Default
checked	select all or none	Boolean	reverse election if empty

CheckList Props

Arg	Description	Type	Default	Note
v-model	selected names	Array	-	-
options	data otpions	Array<{text, value, disabled, ...}>	`[]`	-
icon	icon of selected option	String	`checked`	-
icon-inverse	icon of unselected options	String	`check`	-
icon-disabled	icon of disabled options	String	`check-disabled`	-
icon-size	the size of icon	String	`md`	-
icon-svg	use svg icon	Boolean	`false`	-
icon-position	the position of icon	String	`right`	`left`, `right`
is-slot-scope	if it is mandatory to use `slot-scope`	Boolean	-	it depends on exact cases to determine whether to use it or not, and avoids adding `if/else` to component

CheckList Slots

CheckGroup default slot will be used as template, and it will receive {option} from slot-scope.

<template>
  <md-check-list :options="data">
    <template slot-scope="{ option, index, selected }">
      <div class="custom-title" v-text="option.text"></div>
      <div class="custom-brief">{{ option.text }} custom description</div>
    </template>
  </md-check-list>
</template>

Agree

Codebox

# Check

# Import

# Code Examples

# API

# Check Props

# CheckBox Props

# CheckGroup Props

# CheckGroup Methods

# check(name)

# uncheck(name)

# toggle(name)

# toggleAll(checked?: Boolean)

# CheckList Props

# CheckList Slots