MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
funkwhale/front/ui-docs/components/ui/layout/columns.md

2.4 KiB
Raw Blame History

🡔 Layout

Layout columns

Let items flow like words on a printed newspaper. Works for long, text-heavy content. Consider using stack, flex and grid instead if you want a homogeneous list of items to flow into multiple responsive columns.

<Layout columns :column-width="120">
  <Button icon="bi-star"/>
  <Button icon="bi-star"/>
  <Button icon="bi-star"/>

Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.

  <Card min-content title="Cards...">...break over columns...</Card>

  <Button icon="bi-star"/>
  <Button icon="bi-star"/>
  <Button icon="bi-star"/>
</Layout>

Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.

...break over columns...

Make sure that all elements fit the column width, else they will leak into the neighboring columns.

no-rule: Remove the rule (thin line) between columns

<Layout columns column-width="40px">
  <div>Lorem ipsum dolor sit amet.</div>
</Layout>

<Layout columns no-rule column-width="40px">
  <div>Lorem ipsum dolor sit amet.</div>
</Layout>
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Tricks

Prevent column breaks

Add the following style to the element that you want to preserve whole:

style="break-inside: avoid;"