kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
55 wiersze
1.5 KiB
Markdown
55 wiersze
1.5 KiB
Markdown
|
<script setup lang="ts">
|
||
|
|
import Header from '~/components/ui/Header.vue'
|
||
|
|
import Layout from '~/components/ui/Layout.vue'
|
||
|
|
import Spacer from '~/components/ui/Spacer.vue'
|
||
|
|
import Button from '~/components/ui/Button.vue'
|
||
|
|
</script>
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import Header from "~/components/ui/Header.vue";
|
||
|
|
```
|
||
|
|
|
||
|
|
# Page header
|
||
|
|
|
||
|
|
Place the `Header` at the beginning of a page. Choose an appropriate heading level: `h1` or `h2` or `h3`. Choose `h1` unless the header is part of a page subsection or a modal.
|
||
|
|
|
||
|
|
```vue-html
|
||
|
|
<Header h1="My title" />
|
||
|
|
```
|
||
|
|
|
||
|
|
<Header h1="My title" />
|
||
|
|
|
||
|
|
## Add an image
|
||
|
|
|
||
|
|
Use the `<template #image>` slot to place a picture to the left of the header.
|
||
|
|
|
||
|
|
```vue-html
|
||
|
|
<Header h1="My title">
|
||
|
|
<template #image>
|
||
|
|
<img
|
||
|
|
src="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb" />
|
||
|
|
</template>
|
||
|
|
</Header>
|
||
|
|
```
|
||
|
|
|
||
|
|
<Header h1="My title">
|
||
|
|
<template #image>
|
||
|
|
<img
|
||
|
|
style="width: 196px;"
|
||
|
|
src="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb" />
|
||
|
|
</template>
|
||
|
|
<div style="height: 48px;">
|
||
|
|
My subtitle
|
||
|
|
</div>
|
||
|
|
<Layout flex gap-8>
|
||
|
|
<Button outline square>A</Button>
|
||
|
|
<Button outline square>B</Button>
|
||
|
|
<Spacer h grow />
|
||
|
|
<Button outline square>C</Button>
|
||
|
|
</Layout>
|
||
|
|
</Header>
|
||
|
|
|
||
|
|
## Add an action to the right of the heading
|
||
|
|
|
||
|
|
-> Use the `action` prop [which is the same as in the `Section` component](/components/ui/layout/section).
|