Skip to content

Commit e1cbf88

Browse files
nklaymanrstoenescu
nklayman
authored and
rstoenescu
committed
feat/docs/separator: add separator component docs (quasarframework#2991)
1 parent 84a8903 commit e1cbf88

File tree

4 files changed

+87
-74
lines changed

4 files changed

+87
-74
lines changed

‎docs/src/examples/QSeparator/Inset.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="row q-gutter-md q-pa-md justify-around">
3+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md">Inset=true:
4+
<q-separator inset class="q-mt-sm" />
5+
</q-card>
6+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md">Inset=true:
7+
<q-separator inset color="primary" class="q-mt-sm" />
8+
</q-card>
9+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md">Inset=item:
10+
<q-separator inset="item" color="secondary" class="q-mt-sm" />
11+
</q-card>
12+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md">Inset=item:
13+
<q-separator inset="item" color="deep-orange" class="q-mt-sm" />
14+
</q-card>
15+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md">Inset=item-thumbnail:
16+
<q-separator inset="item-thumbnail" dark color="black" class="q-mt-sm" />
17+
</q-card>
18+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md text-white bg-grey-10">
19+
Inset=item-thumbnail:
20+
<q-separator inset="item-thumbnail" dark class="q-mt-sm" />
21+
</q-card>
22+
</div>
23+
</template>

‎docs/src/examples/QSeparator/Standard.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="row q-gutter-md q-pa-md justify-around">
3+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md">Standard:
4+
<q-separator class="q-mt-sm" />
5+
</q-card>
6+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md">Primary:
7+
<q-separator color="primary" class="q-mt-sm" />
8+
</q-card>
9+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md">Secondary:
10+
<q-separator color="secondary" class="q-mt-sm" />
11+
</q-card>
12+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md">Deep Orange:
13+
<q-separator color="deep-orange" class="q-mt-sm" />
14+
</q-card>
15+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md">Black:
16+
<q-separator dark color="black" class="q-mt-sm" />
17+
</q-card>
18+
<q-card class="col-xs-12 col-sm-5 col-lg-3 col-xl-2 q-pa-md text-white bg-grey-10">
19+
Dark:
20+
<q-separator dark class="q-mt-sm" />
21+
</q-card>
22+
</div>
23+
</template>

‎docs/src/examples/QSeparator/Vertical.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="row q-gutter-md q-pa-md justify-around">
3+
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md">
4+
<div class="q-gutter-sm col">Standard:
5+
<q-separator style="height: 150px" vertical class="q-mt-sm" />
6+
</div>
7+
</q-card>
8+
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md">
9+
<div class="q-gutter-sm col">Primary:
10+
<q-separator style="height: 150px" vertical color="primary" class="q-mt-sm" />
11+
</div>
12+
</q-card>
13+
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md">
14+
<div class="q-gutter-sm col">Secondary:
15+
<q-separator style="height: 150px" vertical color="secondary" class="q-mt-sm" />
16+
</div>
17+
</q-card>
18+
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md">
19+
<div class="q-gutter-sm col">Deep Orange:
20+
<q-separator style="height: 150px" vertical color="deep-orange" class="q-mt-sm" />
21+
</div>
22+
</q-card>
23+
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md">
24+
<div class="q-gutter-sm col">Black:
25+
<q-separator style="height: 150px" vertical dark color="black" class="q-mt-sm" />
26+
</div>
27+
</q-card>
28+
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md text-white bg-grey-10">
29+
<div class="q-gutter-sm col">Dark:
30+
<q-separator style="height: 150px" vertical dark class="q-mt-sm" />
31+
</div>
32+
</q-card>
33+
</div>
34+
</template>

‎docs/src/pages/vue-components/separator.md‎

Lines changed: 7 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,16 @@
11
---
2-
title: Docs
2+
title: Separator
33
---
44

5-
[Internal Link](/docs), [External Link](https://vuejs.org)
6-
7-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non laoreet eros. `token` Morbi non ipsum ac purus dignissim rutrum. Nulla nec ante congue, rutrum tortor facilisis, aliquet ligula. Fusce vitae odio elit. `/quasar.conf.js`
8-
9-
## Heading 2
10-
### Heading 3
11-
#### Heading 4
12-
##### Heading 5
13-
###### Heading 6
14-
15-
```
16-
const m = 'lala'
17-
```
18-
19-
```html
20-
<div>
21-
<q-btn @click="doSomething">Do something</q-btn>
22-
<q-icon name="alarm" />
23-
</div>
24-
```
25-
26-
```vue
27-
<template>
28-
<!-- you define your Vue template here -->
29-
</template>
30-
31-
<script>
32-
// This is where your Javascript goes
33-
// to define your Vue component, which
34-
// can be a Layout, a Page or your own
35-
// component used throughout the app.
36-
37-
export default {
38-
//
39-
}
40-
</script>
41-
42-
<style>
43-
/* This is where your CSS goes */
44-
</style>
45-
```
46-
47-
| Table Example | Type | Description |
48-
| --- | --- | --- |
49-
| infinite | Boolean | Infinite slides scrolling |
50-
| size | String | Thickness of loading bar. |
51-
52-
> Something...
53-
54-
::: tip
55-
Some tip
56-
:::
57-
58-
::: warning
59-
Some tip
60-
:::
61-
62-
::: danger
63-
Some tip
64-
:::
65-
66-
::: warning CUSTOM TITLE
67-
Some tip
68-
:::
69-
70-
* Something
71-
* something
72-
* else
73-
* Back
74-
* wee
5+
The QSeparator Component is used to separate sections of text, other components, etc... It creates a colored line across the width of the parent. It can be horizontal or vertical.
756

767
## Installation
77-
<doc-installation components="QBtn" :plugins="['Meta', 'Cookies']" directives="Ripple" :config="{ notify: 'Notify' }" />
8+
<doc-installation components="QSeparator" />
789

7910
## Usage
80-
<doc-example title="Standard" file="QBtn/Standard" />
11+
<doc-example title="Standard" file="QSeparator/Standard" />
12+
<doc-example title="Vertical" file="QSeparator/Vertical" />
13+
<doc-example title="Inset" file="QSeparator/Inset" />
8114

8215
## API
83-
<doc-api file="QTh" />
16+
<doc-api file="QSeparator" />

0 commit comments

Comments
 (0)