Layout 🧱
Qui Max supports 12-column flex based layout. To define your layout start with <q-row> component, and then add <q-col> with cols property. You can try it out in a sandbox story.
Default view:
Examples
Default view code example below:
<div class="block">
<q-row class="block__row">
<q-col class="block__col" cols="2">
<div class="block__content">2</div>
</q-col>
<q-col class="block__col" cols="4">
<div class="block__content">Lorem ipsum dolor</div>
</q-col>
<q-col class="block__col" cols="2">
<div class="block__content">2</div>
</q-col>
<q-col class="block__col" cols="5">
<div class="block__content">5</div>
</q-col>
<q-col class="block__col" cols="7">
<div class="block__content">7</div>
</q-col>
</q-row>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
QCol Props
QCol uses these props
const args = {
tag: 'div',
cols: 4,
offset: 3
};
1
2
3
4
5
2
3
4
5
<q-row class="block__row">
<q-col
class="block__col"
:tag="args.tag"
:cols="args.cols"
:offset="args.offset"
>
<div class="block__content">Lorem ipsum dolor</div>
</q-col>
</q-row>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
tag
Custom HTML tag.
- Type:
String - Default:
div
cols
Columns count for the current element (affects the width).
auto || [1-12]
- Type:
StringorNumber - Default:
auto
offset
Columns count for the left margin of the current element.
[0-11]
- Type:
StringorNumber - Default:
null
QRow Props
QRow uses these props
<q-row
class="block__row"
:align-v="args.alignV"
:align-h="args.alignH"
:tag="args.tag"
>
<q-col class="block-col" cols="2">
<div class="block__content">2</div>
</q-col>
<q-col class="block__col" cols="4">
<div class="block__content">4</div>
</q-col>
<q-col class="block__col" cols="2">
<div class="block__content">2</div>
</q-col>
</q-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
tag
Custom HTML tag.
- Type:
String - Default:
div
alignV
Vertical alignment. Similar to align-content from flex layout.
- Type:
String - Default:
null
alignH
Horizontal alignment. Similar to flex-direction from flex layout
- Type:
String - Default:
null