UNPKG

@insaic/neon

Version:

A Mobile UI Components built on Vue

github.com/insaic/neon

insaic/neon

65 lines (54 loc) • 2.45 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
### Accordion - 折叠面板 --- #### 按需引入 ```js import { Accordion, AccordionItem } from '@insaic/neon' Vue.use(Accordion).use(AccordionItem) ``` #### 例子 [demo源码](https://github.com/insaic/neon/blob/dev/examples/routers/accordion.vue) - 普通形式 ```html <sq-accordion v-model="active"> <sq-accordion-item title="选项一" name="1"> <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div> </sq-accordion-item> <sq-accordion-item title="选项二" name="2"> <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div> </sq-accordion-item> <sq-accordion-item title="选项三" name="3"> <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div> </sq-accordion-item> </sq-accordion> ``` - 手风琴形式 ```html <sq-accordion v-model="active" accordion> <sq-accordion-item title="选项一" name="1"> <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div> </sq-accordion-item> <sq-accordion-item title="选项二" name="2"> <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div> </sq-accordion-item> <sq-accordion-item title="选项三" name="3"> <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div> </sq-accordion-item> </sq-accordion> ``` --- #### Props - accordion 名称 | 类型 | 说明 | 默认值 | 可选值 :-------- |:--------------------------- |:----------------------------------- |:------- |:------- value | `Array`， `String`， `Number` | 展开项，对应accordion-item里的name | -- | -- accordion | `Boolean` | 是否为手风琴模式 | false | true - accordion-item 名称 | 类型 | 说明 | 默认值 | 可选值 :-------- |:--------------------------- |:----------------------------------- |:------- |:------- title | `String` | 标题 | -- | -- name | `String`， `Number` | 标识名称 | -- | -- --- #### Slot - accordion-item 名称 | 描述 :---- | :------- -- | 自定义内容