docs(ui): lint layout pages
This commit is contained in:
parent
f9f53c32db
commit
02dbb7990d
|
@ -46,7 +46,7 @@ _Note that we set the width to match 2 columns plus one gap._
|
|||
|
||||
</Layout>
|
||||
|
||||
### Let elements span multiple rows, columns, or areas:
|
||||
### Let elements span multiple rows, columns, or areas
|
||||
|
||||
```vue-html{1,2}
|
||||
<Alert purple style="grid-column: span 5;" />
|
||||
|
@ -94,7 +94,7 @@ You can also span an element to a rectangle of multiple columns and rows, in the
|
|||
|
||||
You can pass any valid CSS `grid` value to the `grid` prop.
|
||||
|
||||
#### Minimal width, fit as many as possible on one row:
|
||||
#### Minimal width, fit as many as possible on one row
|
||||
|
||||
```vue-html
|
||||
<Layout grid="auto / repeat(auto-fit, minmax(max-content, 200px))">
|
||||
|
@ -114,7 +114,7 @@ You can pass any valid CSS `grid` value to the `grid` prop.
|
|||
<Alert purple />
|
||||
</Layout>
|
||||
|
||||
#### Up to 2 in a row, between 230-x and 300px:
|
||||
#### Up to 2 in a row, between 230-x and 300px
|
||||
|
||||
```vue-html
|
||||
<Layout no-gap
|
||||
|
@ -127,7 +127,7 @@ You can pass any valid CSS `grid` value to the `grid` prop.
|
|||
<Alert blue />
|
||||
</Layout>
|
||||
|
||||
#### Up to 5 in a row, between 230-x and 300px:
|
||||
#### Up to 5 in a row, between 230-x and 300px
|
||||
|
||||
```vue-html
|
||||
<Layout no-gap
|
||||
|
@ -144,7 +144,7 @@ You can pass any valid CSS `grid` value to the `grid` prop.
|
|||
<Alert blue />
|
||||
</Layout>
|
||||
|
||||
#### As many as fit, at least 100px, stretch them if necessary:
|
||||
#### As many as fit, at least 100px, stretch them if necessary
|
||||
|
||||
```vue-html
|
||||
<Layout
|
||||
|
@ -160,7 +160,7 @@ You can pass any valid CSS `grid` value to the `grid` prop.
|
|||
<Alert blue />
|
||||
</Layout>
|
||||
|
||||
#### Three columns of different widths, stretch gaps if necessary:
|
||||
#### Three columns of different widths, stretch gaps if necessary
|
||||
|
||||
```vue-html
|
||||
<Layout
|
||||
|
|
|
@ -6,7 +6,7 @@ import Button from '~/components/ui/Button.vue'
|
|||
</script>
|
||||
|
||||
```ts
|
||||
import Header from "~/components/ui/Header.vue";
|
||||
import Header from '~/components/ui/Header.vue'
|
||||
```
|
||||
|
||||
# Page header
|
||||
|
|
|
@ -102,7 +102,7 @@ const user: User = {
|
|||
</script>
|
||||
|
||||
```ts
|
||||
import Section from "~/components/ui/Section.vue";
|
||||
import Section from '~/components/ui/Section.vue'
|
||||
```
|
||||
|
||||
# Layout section
|
||||
|
|
|
@ -18,14 +18,14 @@ const size = ref(32)
|
|||
</style>
|
||||
|
||||
```ts
|
||||
import Spacer from "~/components/ui/Spacer.vue";
|
||||
import Spacer from '~/components/ui/Spacer.vue'
|
||||
```
|
||||
|
||||
# Spacer
|
||||
|
||||
Add a 16px gap between adjacent items.
|
||||
|
||||
##### Without spacer:
|
||||
##### Without spacer
|
||||
|
||||
<Layout flex>
|
||||
|
||||
|
@ -43,7 +43,7 @@ Add a 16px gap between adjacent items.
|
|||
|
||||
</Layout>
|
||||
|
||||
##### With spacer:
|
||||
##### With spacer
|
||||
|
||||
<Layout flex>
|
||||
|
||||
|
@ -61,7 +61,7 @@ Add a 16px gap between adjacent items.
|
|||
|
||||
</Layout>
|
||||
|
||||
##### Spacers can also be added for horizontal space:
|
||||
##### Spacers can also be added for horizontal space
|
||||
|
||||
<Layout flex>
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@ import Button from "~/components/ui/Button.vue"; // Need to import this, else vi
|
|||
</script>
|
||||
|
||||
```ts
|
||||
import Table from "~/components/ui/Table.vue";
|
||||
import Table from '~/components/ui/Table.vue'
|
||||
```
|
||||
|
||||
# Table
|
||||
|
|
Loading…
Reference in New Issue