N3-components/N3-components

View on GitHub
docs/example_en/n3CheckboxDocs.md

Summary

Maintainability
Test Coverage
<template>

### Checkbox

<div class="bs-docs-section" >
<div class="bs-example">
<h4>Checkbox</h4>
<n3-checkbox  label="single">single</n3-checkbox>

```html
<n3-checkbox label="single">single</n3-checkbox>
```
<hr>

<n3-checkbox-group v-model="checkboxValue">
  <n3-checkbox-btn label="left" disabled>Left</n3-checkbox-btn>
  <n3-checkbox-btn label="middle">Middle</n3-checkbox-btn>
  <n3-checkbox-btn label="right">Right</n3-checkbox-btn>
</n3-checkbox-group>

```html
<n3-checkbox-group v-model="checkboxValue">
  <n3-checkbox-btn label="left" disabled>Left</n3-checkbox-btn>
  <n3-checkbox-btn label="middle">Middle</n3-checkbox-btn>
  <n3-checkbox-btn label="right">Right</n3-checkbox-btn>
</n3-checkbox-group>
```

``` js
{
  checkboxValue: ['middle']
}
```

<n3-checkbox-group v-model="checkboxValue">
  <n3-checkbox label="left" disabled>Left</n3-checkbox>
  <n3-checkbox label="middle">Middle</n3-checkbox>
  <n3-checkbox label="right">Right</n3-checkbox>
</n3-checkbox-group>

```html
<n3-checkbox-group v-model="checkboxValue">
  <n3-checkbox label="left" disabled>Left</n3-checkbox>
  <n3-checkbox label="middle">Middle</n3-checkbox>
  <n3-checkbox label="right">Right</n3-checkbox>
</n3-checkbox-group>
```

``` js
{
  checkboxValue: ['middle']
}
```

### Group Params
| name | type | default | description 
|-------------  |---------------- |----------------  |-------- |
| options          | `Array`     |    -        |     options     |
| type          | `String`     |    `radio`       |     `radio`,`button` work with `options`     |

### Group Events

| name      | description    | params      |
|---------- |-------- |---------- |
| change | change | (currentValue) |

### Checkbox Params

| name | type | default | description 
|-------------  |---------------- |----------------  |-------- |
| disabled          | `Boolean`     |    false       |     disabled     |

### Checkbox Events

| name      | description    | params      |
|---------- |-------- |---------- |
| change | change | (currentValue) |

<p>PS: params of form components,look <a href="#n3FormDocs" >Form</a> </p>

</div>
</template>

<script>
export default {
  data () {
    return {
      single: false,
      checkboxValue: ['middle']
    }
  }
}
</script>