QCollapse 🪗
Collapse groups a collection of contents in tabs.
When to use
- Can be used to show or hide content to keep the page clean.
Example
Default view:
Using in template:
<q-collapse v-model="activeNames">
<q-collapse-item title="Consistency" name="consistency">
<div>
Consistent with real life: in line with the process and logic of real
life, and comply with languages and habits that the users are used to;
</div>
<div>
Consistent within interface: all elements should be consistent, such as:
design style, icons and texts, position of elements, etc.
</div>
</q-collapse-item>
<q-collapse-item title="Efficiency">
<div>
Simplify the process: keep operating process simple and intuitive;
</div>
<div>
Definite and clear: enunciate your intentions clearly so that the users
can quickly understand and make decisions;
</div>
<div>
Easy to identify: the interface should be straightforward, which helps
the users to identify and frees them from memorizing and recalling.
</div>
</q-collapse-item>
<q-collapse-item title="Controllability">
<div>
Decision making: giving advices about operations is acceptable, but do
not make decisions for the users;
</div>
<div>
Controlled consequences: users should be granted the freedom to operate,
including canceling, aborting or terminating current operation.
</div>
</q-collapse-item>
</q-collapse>
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
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
Using in component instance:
setup() {
const activeNames = ['consistency'];
return { activeNames };
}
1
2
3
4
2
3
4
Props
modelValue
- Type:
String,Number,Array - Default:
null
Binding value.
// import type from lib
import type { QCollapsePropModelValue } from '@qvant';
// TS type
export type QCollapsePropModelValue = Nullable<
string | number | (string | number)[]
>;
1
2
3
4
5
6
7
2
3
4
5
6
7
accordion
- Type:
Boolean - Default:
false
Shrink all panels, except the last selected.
Using in template:
<q-collapse
v-model="activeNames"
accordion
>
...
</q-collapse>
1
2
3
4
5
6
2
3
4
5
6
closeIcon
- Type:
String | Component - Default:
null
Allows you to control what icon will be displayed near opened QCollapseItem.
IMPORTANT
For proper use you need to provide both openIcon and closeIcon
Using in template:
<q-collapse close-icon="your-icon-component-name">
...
</q-collapse>
<!-- or -->
<q-collapse :close-icon="YourIconComponent">
...
</q-collapse>
1
2
3
4
5
6
7
2
3
4
5
6
7
openIcon
- Type:
String | Component - Default:
null
Allows you to control what icon will be displayed near closed QCollapseItem.
IMPORTANT
For proper use you need to provide both openIcon and closeIcon
Using in template:
<q-collapse open-icon="your-icon-component-name">
...
</q-collapse>
<!-- or -->
<q-collapse :open-icon="YourIconComponent">
...
</q-collapse>
1
2
3
4
5
6
7
2
3
4
5
6
7
Events
update:modelValue
Triggers when model updates.
change
Alias for update:modelValue
<q-collapse
v-model="activeNames"
@update:modelValue="handleValueUpdate"
@change="handleValueUpdate"
>
...
</q-collapse>
1
2
3
4
5
6
7
2
3
4
5
6
7
setup() {
const handleValueUpdate = () => {
...
}
return { handleValueUpdate }
}
1
2
3
4
5
6
7
2
3
4
5
6
7
Slots
default
See example above. Using default slot recommended by default.