chore(ui-docs): minor additions
This commit is contained in:
upsiflu
parent
fff04844f9
commit
372329c13d
|
|
@ -101,6 +101,10 @@ const user: User = {
|
|||
}
|
||||
</script>
|
||||
|
||||
```ts
|
||||
import Section from "~/components/ui/Section.vue"
|
||||
```
|
||||
|
||||
# Layout section
|
||||
|
||||
Sections divide the page vertically. Choose an appropriate heading level for each section: `h1` or `h2` or `h3`.
|
||||
|
|
@ -112,7 +116,7 @@ Sections divide the page vertically. Choose an appropriate heading level for eac
|
|||
### Align the section to the page
|
||||
|
||||
```vue-html
|
||||
<Section alignLeft />
|
||||
<Section h3="My title" alignLeft />
|
||||
```
|
||||
|
||||
### Make the section header align with the section contents
|
||||
|
|
@ -132,14 +136,16 @@ The link or button will be shown on the right side of the header.
|
|||
```vue-html
|
||||
<Layout stack gap-64>
|
||||
<Spacer />
|
||||
<Section h3="With a link" :action="{ text:'My library', to:'/' }" />
|
||||
<Section h3="With a link"
|
||||
:action="{ text:'My library', to:'/' }" />
|
||||
|
||||
<Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
|
||||
<Section h3="With a button"
|
||||
:action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
|
||||
</Layout>
|
||||
```
|
||||
|
||||
<Spacer />
|
||||
<Layout stack gap-64>
|
||||
<Spacer />
|
||||
<Section h3="With a link" :action="{ text:'My library', to:'/' }" />
|
||||
<Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
|
||||
</Layout>
|
||||
|
|
@ -148,33 +154,35 @@ You can add props to the Link or Button, for example to make them `primary` or a
|
|||
|
||||
```vue-html{1}
|
||||
<Section solid primary icon="bi-star"
|
||||
h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
|
||||
h3="Example" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
|
||||
```
|
||||
|
||||
<Spacer :size="40"/>
|
||||
|
||||
<Section solid primary icon="bi-star"
|
||||
h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
|
||||
h3="Example" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
|
||||
|
||||
::: tip Gaps between consecutive sections
|
||||
|
||||
Place consecutive sections into a `<Layout stack gap-64></Layout>` to space them out.
|
||||
You can add spacers (negatice or positive) if you want to manually make one distance smaller or larger.
|
||||
Place consecutive sections into a [Layout stack](../layout) width a size of 64px give them a regular vertical rhythm. Use different sizes for very small or very large headings.
|
||||
You can add spacers with negative or positive size if you want to manually make a specific distance smaller or larger than the others.
|
||||
|
||||
```vue-html
|
||||
<Layout stack gap-64>
|
||||
<Spacer />
|
||||
<Section h3="Section 1"></Section>
|
||||
<Section h3="Section 2"></Section>
|
||||
<Section h3="Section 1" />
|
||||
<Section h3="Section 2" />
|
||||
</Layout>
|
||||
```
|
||||
|
||||
<Layout stack gap-64>
|
||||
<Spacer />
|
||||
<Section h3="Section 1"></Section>
|
||||
<Section h3="Section 2"></Section>
|
||||
<Spacer no-size />
|
||||
<Section h3="Section 1" />
|
||||
<Section h3="Section 2" />
|
||||
</Layout>
|
||||
|
||||
<Spacer />
|
||||
|
||||
:::
|
||||
|
||||
::: tip Let items cover the whole grid width
|
||||
|
|
@ -223,13 +231,13 @@ To prevent items from being put on a grid, add `style="grid-column: 1 / -1"` whi
|
|||
<Toggle v-model="alignLeft" label="Left-align the layout"/>
|
||||
</Layout>
|
||||
|
||||
<Spacer />
|
||||
|
||||
---
|
||||
|
||||
<Spacer />
|
||||
|
||||
<Layout stack gap-64 class="preview" style="margin: 0 -40px; padding: 0 25px;">
|
||||
|
||||
<Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'Go to library', to:'/' }">
|
||||
<Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'Documentation on Cards', to:'../card' }">
|
||||
<Card small title="Relatively Long Album Name">
|
||||
Artist Name
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const size = ref(32)
|
|||
</style>
|
||||
|
||||
```ts
|
||||
import Spacer from "~/components/ui/Spacer.vue"
|
||||
import Spacer from "~/components/ui/Spacer.vue";
|
||||
```
|
||||
|
||||
# Spacer
|
||||
|
|
@ -97,7 +97,7 @@ const size = ref(1);
|
|||
<Input v-model="size" type="range" />
|
||||
|
||||
<Alert yellow>A</Alert>
|
||||
<Spacer :size="size" />
|
||||
<Spacer :size="+size" />
|
||||
<Alert purple>B</Alert>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -108,51 +108,50 @@ const size = ref(1);
|
|||
</div>
|
||||
<div class="preview">
|
||||
<Alert yellow>A</Alert>
|
||||
<Spacer :size="size" />
|
||||
<Spacer :size="+size" />
|
||||
<Alert purple>B</Alert>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
Note the `+` before `size`. Some browsers will output a string for the `Input` value, and the JavaScript `+` prefix parses it into a number. Spacers need numeric `size` values because positive size values affect the dimensions of the element while negative sizes cause negative margins.
|
||||
|
||||
## Make the Spacer elastic (responsive)
|
||||
|
||||
<Layout flex>
|
||||
|
||||
```vue-html
|
||||
<Layout flex style="height:30em;">
|
||||
<Input v-model="size"
|
||||
type="range"
|
||||
style="writing-mode: vertical-lr; height:100%"
|
||||
/>
|
||||
<div style="width: min-content;">
|
||||
|
||||
<Layout stack no-gap
|
||||
:style="{ height: size + '%' }"
|
||||
>
|
||||
<Alert blue>A</Alert>
|
||||
<Spacer grow title="grow" />
|
||||
<Alert red>B</Alert>
|
||||
<Alert green>C</Alert>
|
||||
<Spacer shrink title="shrink" />
|
||||
<Alert purple>D</Alert>
|
||||
<Spacer grow shrink title="grow shrink" />
|
||||
<Alert yellow>E</Alert>
|
||||
</Layout>
|
||||
```vue-html
|
||||
<Layout stack no-gap
|
||||
:style="{ height: size + '%' }"
|
||||
>
|
||||
<Button min-content outline>A</Button>
|
||||
<Spacer grow title="grow" />
|
||||
<Button min-content outline>B</Button>
|
||||
<Button min-content outline>C</Button>
|
||||
<Spacer shrink title="shrink" />
|
||||
<Button min-content outline>D</Button>
|
||||
<Spacer grow shrink title="grow shrink" />
|
||||
<Button min-content outline>E</Button>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div class="preview" style="flex-wrap:nowrap">
|
||||
<Layout flex style="height:30em">
|
||||
|
||||
<Input v-model="size" type="range" style="writing-mode: vertical-lr; height:100%"><template #input-right>{{ size }}%</template></Input>
|
||||
|
||||
<Layout stack no-gap :style="{ height: size + '%'}">
|
||||
<Alert blue>A</Alert>
|
||||
<Button min-content outline>A</Button>
|
||||
<Spacer grow title="grow" />
|
||||
<Alert red>B</Alert>
|
||||
<Alert green>C</Alert>
|
||||
<Button min-content outline>B</Button>
|
||||
<Button min-content outline>C</Button>
|
||||
<Spacer shrink title="shrink" />
|
||||
<Alert purple>D</Alert>
|
||||
<Button min-content outline>D</Button>
|
||||
<Spacer grow shrink title="grow shrink" />
|
||||
<Alert yellow>E</Alert>
|
||||
<Button min-content outline>E</Button>
|
||||
</Layout>
|
||||
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import Alert from '~/components/ui/Alert.vue'
|
|||
```ts
|
||||
import Link from "~/components/ui/Link.vue"
|
||||
```
|
||||
|
||||
# Link
|
||||
|
||||
Users can navigate by following Links. They expect that in contrast to clicking a [button](button), following a link does not manipulate items or trigger any action.
|
||||
|
|
@ -122,26 +123,26 @@ _Only use on top of solid surfaces, else the text may be unreadable!_
|
|||
|
||||
## Set width and alignment
|
||||
|
||||
See [Using width](/using-width) and [Using alignment](/using-alignment)
|
||||
See [Using width](/using-width) and [Using alignment](/using-alignment).
|
||||
|
||||
<Layout flex>
|
||||
|
||||
```vue-html
|
||||
<Link solid primary min-content to="/">min-content</Link>
|
||||
<Link solid primary tiny to="/">tiny</Link>
|
||||
<Link solid primary buttonWidth to="/">buttonWidth</Link>
|
||||
<Link solid primary small to="/">small</Link>
|
||||
<Link solid primary medium to="/">medium</Link>
|
||||
<Link solid primary full to="/">full</Link>
|
||||
<Link solid primary auto to="/">auto</Link>
|
||||
<hr />
|
||||
<Link solid primary alignSelf="start" to="/">🐌</Link>
|
||||
<Link solid primary alignSelf="center" to="/">🐌</Link>
|
||||
<Link solid primary alignSelf="end" to="/">🐌</Link>
|
||||
<hr />
|
||||
<Link solid primary alignText="left" to="/">🐌</Link>
|
||||
<Link solid primary alignText="center" to="/">🐌</Link>
|
||||
<Link solid primary alignText="right" to="/">🐌</Link>
|
||||
<Link solid primary min-content to="/">min-content</Link>
|
||||
<Link solid primary tiny to="/">tiny</Link>
|
||||
<Link solid primary buttonWidth to="/">buttonWidth</Link>
|
||||
<Link solid primary small to="/">small</Link>
|
||||
<Link solid primary medium to="/">medium</Link>
|
||||
<Link solid primary full to="/">full</Link>
|
||||
<Link solid primary auto to="/">auto</Link>
|
||||
<hr />
|
||||
<Link solid primary alignSelf="start" to="/">🐌</Link>
|
||||
<Link solid primary alignSelf="center" to="/">🐌</Link>
|
||||
<Link solid primary alignSelf="end" to="/">🐌</Link>
|
||||
<hr />
|
||||
<Link solid primary alignText="left" to="/">🐌</Link>
|
||||
<Link solid primary alignText="center" to="/">🐌</Link>
|
||||
<Link solid primary alignText="right" to="/">🐌</Link>
|
||||
```
|
||||
|
||||
<Layout class="preview" stack style="--gap:4px;">
|
||||
|
|
|
|||
Loading…
Reference in New Issue