10 KiB

Raw Blame History

import Section from '~/components/ui/Section.vue'

Layout section

Sections divide the page vertically. Choose an appropriate heading level for each section. You can use all props for Heading, including h1 to h6 and stylistic variants such as radio or page-heading.

<Section h1="My title" />

<Section
  h2="My title"
  radio
/>

Align the section

<Section h2="My title" alignLeft />

Make the section header align with the section contents

The section aligns its title and items to a grid, following the designs. To make sure the header of a section exactly aligns with its contents, set the item width (in number of columns). For example,

  :columns-per-item="1"

  :columns-per-item="3"

  :columns-per-item="4"

For a complete overview of column widths for common funkwhale components, see the table in using-width

Move individual items within and across grid-cells

For child items, you can use all known CSS grid placement techniques:

  grid-column: 1 / -1;

Fill the whole grid, no matter how wide the screen is

  grid-row: span 3

  align-self: start;
  justify-self: center;

Place individual items to the edge of their current cell or cells

Provide an action

The link or button will be shown on the right side of the header. Use action.text to set the label (required). You can use all Link props or Button props inside the action prop! Note that the button or link label will be in line with the heading.

<Spacer />
<Layout stack gap-64>
  <Section
    h2="With a link"
    :action="{
      text: 'My library',
      to: '/',
      icon: 'bi-star'
    }"
  />
  <Section
    h2="With a button"
    :action="{
        text: 'Say hello!',
        onClick: ()=>console.log('Hello'),
        primary: true,
        solid: true
    }"
  />
</Layout>

Add icons and slots

<Section
  icon="bi-heart"
>
  <template #topleft>
    <Pill>#Audiology</Pill>
    <Spacer size-12 />
    <Pill>#Phonologics</Pill>
  </template>
</Section>

#Audiology #Phonologics

Set gaps between consecutive sections

Place consecutive sections into a Layout stack with a 64px gap (gap-64) to give them a regular vertical rhythm. Use different sizes for very small or very large headings.

Note the spacer above the layout. By default, sections begin at the baseline of the heading. This enables us to explicitly define the vertical rhythm, independently of the heading's line height.

Mix sections of different item widths

<Layout flex>
<Toggle v-model="alignLeft" label="Left-align the layout"/>
</Layout>

<Spacer />

<Layout stack gap-64>

  <Section
    :alignLeft="alignLeft"
    :columns-per-item="2"
    h2="Cards (2-wide items)"
    :action="{
      text:'Documentation on Cards',
      to:'../card'
    }"
  >
    <Card small default solid raised title="Relatively Long Album Name">
        Artist Name
    </Card>
    <Card small default solid raised title="Relatively Long Album Name">
        Artist Name
    </Card>
    <Card small default solid raised title="Relatively Long Album Name">
        Artist Name
    </Card>
  </Section>

  <Section
    :alignLeft="alignLeft"
    :columns-per-item="3"
    h2="Activities (3-wide items)"
    :action="{
      text:'Delete selected items',
      onClick:()=>console.log('Deleted :-)')
    }"
  >
    <Activity :track="track" :user="user" />
    <Activity :track="track" :user="user" />
    <Activity :track="track" :user="user" />
  </Section>

</Layout>

Artist Name Artist Name Artist Name

Collapse and expand the section

By adding either collapse or expand to the props, you add Accordion behavior to the section. The heading will become a clickable button.

const sections = ref([false, false, false])

<Section
  v-for="(section, index) in sections"
  :key="`${index}${section}`"
  :h2="`Section ${index} (${section})`"
  align-left
  v-bind="
    section
      ? { collapse: () => { sections[index] = false } }
      : { expand: () => { sections[index] = true } }
  "
>
  Content {{ section }}
</Section>

Responsivity

Cards and Activities snap to the grid columns. They have intrinsic widths, expressed in the number of columns they span. For Card, it is 3 and for Activity, it is 4.
On a typical laptop screen, you may have 4 album cards or 3 activities side-by-side. On a typical mobile screen, you will have one medium card or two small ones in a row.
The remaining space is evenly distributed.
Title rows align with the content below them. The action on the right will always end with the last item in the grid. Resize the window to observe how the items move.

10 KiB Raw Blame History