docs(ui): lint layout pages

This commit is contained in:
jon r 2025-03-19 12:55:52 +01:00
parent f9f53c32db
commit 02dbb7990d
5 changed files with 13 additions and 13 deletions

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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