Funkwhale UI

Appearance

ts
import Header from '@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. You can use all props for Heading, including the stylistic variants such as radio or page-heading.

ts
const props = defineProps<{
  columnsPerItem?: 1 | 2 | 3 | 4
  alignLeft?: boolean
  action?: { text: string } & (ComponentProps<typeof Link> | ComponentProps<typeof Button>)
  icon?: string
  noGap?: false
} & {
  [H in `h${ '1' | '2' | '3' | '4' | '5' | '6' }`]? : string
} & {
  [S in 'page-heading' | 'section-heading' | 'large-section-heading' | 'subsection-heading' | 'caption' | 'title' | 'radio' | 'secondary' ]? : true
} & {
  [Operation in 'expand' | 'collapse']?: () => void
}>()

For a detailed explanation of the props, read the entry on Section

template
<Header
  page-heading
  h1="My title"
/>

My title

Add an image ​

Use the <template #image> slot to place a picture to the left of the header.

My title

My subtitle
template
<Header
  h3="My title"
  page-heading
>
  <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"
      role="presentation"
    >
  </template>
  <div style="height: 48px;">
    My subtitle
  </div>
  <Layout
    flex
    gap-8
  >
    <Button
      raised
      default
      square
    >
      A
    </Button>
    <Button
      raised
      default
      square
    >
      B
    </Button>
    <Spacer
      h
      grow
    />
    <Button
      raised
      default
      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.

Tuning the layout

Responsive design ​

On narrow screens, the header will first wrap between image and title/content area.

Make sure to keep the minimum width of the title and the content area narrow to prevent unnecessary wrapping.

Consistent spacing ​

The distance between the image and the content area is 24px (gap-24). The title baseline is at 68px below top.

-> Reference design (Penpot)

Using this component

A11y Checklist ​

Accessible header ​

My title

My subtitle
template
<Header
  h3="My title"
  page-heading
>
  <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"
      role="presentation"
    >
  </template>
  <div style="height: 48px;">
    My subtitle
  </div>
  <Layout
    flex
    gap-8
  >
    <Button
      raised
      default
      square
    >
      A
    </Button>
    <Button
      raised
      default
      square
    >
      B
    </Button>
    <Spacer
      h
      grow
    />
    <Button
      raised
      default
      square
    >
      C
    </Button>
  </Layout>
</Header>

Test this component in isolation against WCAG2 criteria