# Separator (divider)
# Description
Component used to separate different components and dialogs.
# Usage result
# How to use it
Importing a component in a .ux file:
<import name="q-divider" src="qaui/src/components/divider/index"></import>
1
# Example
<template>
<div class="qaui-wrap">
<q-divider loading="{{true}}" content="Loading"></q-divider>
<q-divider content="No data available"></q-divider>
<q-divider content="No more data"></q-divider>
<q-divider><text class="custom">Custom Style Content</text></q-divider>
</div>
</template>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.qaui-wrap {
background-color: #ffffff;
flex-direction: column;
padding: 20px 0;
.custom {
font-size: 20px;
color: #456fff;
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# API
# Component Properties
| Attribute | Type | Value by default | Description |
|---|---|---|---|
loading | Boolean | false | Display the loading status style |
content | String | '' | Separating text |
# slot
| Name | Description |
|---|---|
| - | Custom content |