chore(ui-docs): update documentation
This commit is contained in:
upsiflu
parent
8240856630
commit
e79aaf84de
|
|
@ -10,33 +10,17 @@ export default defineConfig({
|
|||
{ text: 'Gitlab', link: 'https://dev.funkwhale.audio/funkwhale/ui' },
|
||||
],
|
||||
sidebar: [
|
||||
{text:'Contributing', link:'/contributing'},
|
||||
{
|
||||
text: 'Using Color', link: '/using-color'
|
||||
},
|
||||
{
|
||||
text: 'Using Widths', link: '/using-widths'
|
||||
},
|
||||
{
|
||||
text: 'Using Components', link: '/using-components'
|
||||
},
|
||||
{
|
||||
text: 'Designing Pages', link: '/designing-pages'
|
||||
},
|
||||
{ text: 'Designing Pages', link: '/designing-pages' },
|
||||
{ text: 'Using Color', link: '/using-color' },
|
||||
{ text: 'Using Width', link: '/using-width' },
|
||||
{ text: 'Using Alignment', link: '/using-alignment' },
|
||||
{ text: 'Using Components', link: '/using-components' },
|
||||
{ text: 'Contributing', link: '/contributing' },
|
||||
{
|
||||
items: [
|
||||
{ text: 'Activity', link: '/components/ui/activity' },
|
||||
{ text: 'Alert', link: '/components/ui/alert' },
|
||||
{
|
||||
text: 'Card', link: '/components/ui/card',
|
||||
items: [
|
||||
{ text: 'Album Card', link: '/components/ui/card/album' },
|
||||
{ text: 'Artist Card', link: '/components/ui/card/artist' },
|
||||
{ text: 'Playlist Card', link: '/components/ui/card/playlist' },
|
||||
{ text: 'Podcast Card', link: '/components/ui/card/podcast' },
|
||||
{ text: 'Radio Card', link: '/components/ui/card/radio' },
|
||||
],
|
||||
},
|
||||
{ text: 'Card', link: '/components/ui/card' },
|
||||
{
|
||||
text: 'Content Navigation',
|
||||
items: [
|
||||
|
|
@ -45,9 +29,6 @@ export default defineConfig({
|
|||
{ text: 'Tabs', link: '/components/ui/tabs' },
|
||||
],
|
||||
},
|
||||
{ text: 'Link',
|
||||
link: 'components/ui/link'
|
||||
},
|
||||
{
|
||||
text: 'Form',
|
||||
items: [
|
||||
|
|
@ -66,8 +47,15 @@ export default defineConfig({
|
|||
},
|
||||
{
|
||||
text: 'Layout', link: '/components/ui/layout/',
|
||||
items: [{ text: "Spacer", link: "/components/ui/layout/spacer" }]
|
||||
items: [
|
||||
{ text: "Spacer", link: "/components/ui/layout/spacer" },
|
||||
{ text: "Using `flex`", link: "/components/ui/layout/flex" },
|
||||
{ text: "Using `stack`", link: "/components/ui/layout/stack" },
|
||||
{ text: "Using `grid`", link: "/components/ui/layout/grid" },
|
||||
{ text: "Using `columns`", link: "/components/ui/layout/columns" },
|
||||
]
|
||||
},
|
||||
{ text: 'Link', link: 'components/ui/link' },
|
||||
{ text: 'Loader', link: '/components/ui/loader' },
|
||||
{ text: 'Modal', link: '/components/ui/modal' },
|
||||
{ text: 'Pill', link: '/components/ui/pill' },
|
||||
|
|
|
|||
|
|
@ -24,17 +24,17 @@ You can link a user's input to form data by referencing the data in a `v-model`
|
|||
<Input v-model="value" placeholder="Search" />
|
||||
```
|
||||
|
||||
<Input placeholder="Search" />
|
||||
<Input placeholder="Your favorite animal" />
|
||||
|
||||
## Input icons
|
||||
|
||||
Add a [Bootstrap icon](https://icons.getbootstrap.com/) to an input to make its purpose more visually clear.
|
||||
|
||||
```vue-html{3}
|
||||
<Input v-model="value" icon="bi-search" placeholder="Search" />
|
||||
<Input v-model="value" icon="bi-search" />
|
||||
```
|
||||
|
||||
<Input icon="bi-search" placeholder="Search" />
|
||||
<Input v-model="value" icon="bi-search" />
|
||||
|
||||
## Label slot
|
||||
|
||||
|
|
|
|||
|
|
@ -16,24 +16,28 @@ const noGap = ref(true)
|
|||
|
||||
# Layout
|
||||
|
||||
CSS provides [four methods to arrange items in a container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods): Flow, Columns, Flex and Grid. To make typical alignment tasks in the Funkwhale Ui easier, we have created a few useful presets.
|
||||
|
||||
## Apply presets
|
||||
|
||||
The following containers are responsive. Change your window's size or select a device preset from your browser's dev tools to see how layouts are affected by available space.
|
||||
|
||||
<Layout flex style="--gap:8px">
|
||||
<Card width="163px" title="flex" to="./layout/flex" >
|
||||
<Card width="163px" title="flex" to="/components/ui/layout/flex" >
|
||||
<Layout flex>
|
||||
<Button primary icon="bi-eye" />
|
||||
<Button secondary icon="bi-eye" />
|
||||
<Button destructive icon="bi-eye" />
|
||||
</Layout>
|
||||
</Card>
|
||||
<Card width="163px" title="grid" to="./layout/grid" >
|
||||
<Card width="163px" title="grid" to="/components/ui/layout/grid" >
|
||||
<Layout grid column-width="40">
|
||||
<Button primary icon="bi-eye" />
|
||||
<Button secondary icon="bi-eye" style="grid-row: span 2; height: 100%;" />
|
||||
<Button destructive icon="bi-eye" />
|
||||
</Layout>
|
||||
</Card>
|
||||
<Card width="163px" title="stack" to="./layout/stack" >
|
||||
<Card width="163px" title="stack" to="/components/ui/layout/stack" >
|
||||
<Layout stack style="--gap:0; margin:-8px;">
|
||||
<Button primary icon="bi-eye" />
|
||||
<Button secondary icon="bi-eye" />
|
||||
|
|
@ -47,6 +51,16 @@ The following containers are responsive. Change your window's size or select a d
|
|||
</Layout></Card>
|
||||
</Layout>
|
||||
|
||||
## Add semantics
|
||||
|
||||
Add one of these props to your `Layout` component to turn them into semantic containers (without affecting their presentation):
|
||||
|
||||
**Headings:** [`"h1" | "h2" | "h3" | "h4" | "h5"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes)
|
||||
|
||||
**Sectioning:** [`"nav" | "aside" | "header" | "footer" | "main"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section#usage_notes)
|
||||
|
||||
**Forms:** [`"label" | "form"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms)
|
||||
|
||||
## Common props
|
||||
|
||||
### `no-gap`: Remove the gap between items
|
||||
|
|
@ -175,14 +189,14 @@ Note that you can set the minimum space occupied by the `Spacer` with its `size`
|
|||
|
||||
Items are laid out in a row and wrapped as they overflow the container
|
||||
|
||||
[Layout flex](./layout/flex)
|
||||
[Layout flex](/components/ui/layout/flex)
|
||||
|
||||
</Tab>
|
||||
<Tab title="Grid" icon="ꖛ">
|
||||
|
||||
Align items both vertically and horizontally
|
||||
|
||||
[Layout grid](./layout/grid)
|
||||
[Layout grid](/components/ui/layout/grid)
|
||||
|
||||
</Tab>
|
||||
|
||||
|
|
@ -190,7 +204,7 @@ Align items both vertically and horizontally
|
|||
|
||||
Add space between vertically stacked items
|
||||
|
||||
[Layout stack](./layout/stack)
|
||||
[Layout stack](/components/ui/layout/stack)
|
||||
|
||||
</Tab>
|
||||
|
||||
|
|
@ -198,7 +212,7 @@ Add space between vertically stacked items
|
|||
|
||||
Let text and items flow like on a printed newspaper
|
||||
|
||||
[Layout columns](./layout/columns)
|
||||
[Layout columns](/components/ui/layout/columns)
|
||||
|
||||
</Tab>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const noGap = ref(true)
|
|||
|
||||
# Layout `columns`
|
||||
|
||||
Let items flow like words on a printed newspaper, Great for very long lists of buttons or links.
|
||||
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 stack no-gap>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,23 +21,26 @@ const noGap = ref(true)
|
|||
Align items both vertically and horizontally.
|
||||
You can either specify the column width (default: 320px) or set the desired number of columns.
|
||||
|
||||
### Override the `:column-width` (in px):
|
||||
### Override the `column-width` (in px)
|
||||
|
||||
_Note that we set the width to match 2 columns plus one gap._
|
||||
|
||||
<Layout flex>
|
||||
|
||||
```vue-html{1}
|
||||
<Layout grid :column-width="90"
|
||||
:style="`width:${2 * 90 + 32}px`"
|
||||
```vue-html{2}
|
||||
<Layout grid
|
||||
column-width="90px"
|
||||
:width="`${2 * 90 + 32}px`"
|
||||
>
|
||||
<Alert yellow />
|
||||
<Card min-content title="brown" />
|
||||
<Card auto title="90px" />
|
||||
<Alert blue />
|
||||
</Layout>
|
||||
```
|
||||
|
||||
<Layout grid :column-width="90" class="preview" :style="`width:${2 * 90 + 32}px`">
|
||||
<Layout grid column-width="90px" class="preview" :width="`${2 * 90 + 32}px`">
|
||||
<Alert yellow />
|
||||
<Card min-content title="brown" />
|
||||
<Card auto title="90px" />
|
||||
<Alert blue />
|
||||
</Layout>
|
||||
|
||||
|
|
@ -46,23 +49,23 @@ You can either specify the column width (default: 320px) or set the desired num
|
|||
### Let elements span multiple rows, columns, or areas:
|
||||
|
||||
```vue-html{1,2}
|
||||
<Alert purple style="grid-column: span 2;" />
|
||||
<Card title="2" style="grid-row: span 2;" />
|
||||
<Alert green />
|
||||
<Alert purple style="grid-column: span 5;" />
|
||||
<Alert green style="grid-row: span 2;" />
|
||||
<Card title="2"/>
|
||||
<Card title="1" />
|
||||
```
|
||||
|
||||
<Layout grid>
|
||||
<Alert purple style="grid-column: span 2;" />
|
||||
<Card title="2" style="grid-row: span 2;" />
|
||||
<Alert green />
|
||||
<Alert purple style="grid-column: span 5;" />
|
||||
<Alert green style="grid-row: span 2;" />
|
||||
<Card title="2"/>
|
||||
<Card title="1" />
|
||||
</Layout>
|
||||
|
||||
You can also span an element to a rectangle of multiple columns and rows, in the format `<row-start> / <column-start> / <row-end> / <column-end>`:
|
||||
|
||||
```vue-html
|
||||
<Layout grid="auto / repeat(3, min-content)">
|
||||
<Layout grid="auto / repeat(5, min-content)">
|
||||
<Card auto title="A" />
|
||||
<Card auto title="B" />
|
||||
<Card auto title="C" />
|
||||
|
|
@ -94,19 +97,21 @@ You can pass any valid CSS `grid` value to the `grid` prop.
|
|||
#### Minimal width, fit as many as possible on one row:
|
||||
|
||||
```vue-html
|
||||
<Layout
|
||||
grid="auto / repeat(auto-fit, minmax(min-content, 100px))"
|
||||
>
|
||||
<Alert red />
|
||||
<Layout grid="auto / repeat(auto-fit, minmax(max-content, 200px))">
|
||||
<Alert green />
|
||||
<Alert red>Very long text that will force other items to wrap</Alert>
|
||||
<Alert blue />
|
||||
<Alert yellow />
|
||||
<Alert purple />
|
||||
</Layout>
|
||||
```
|
||||
|
||||
<Layout class="preview" grid="auto / repeat(auto-fit, minmax(min-content, 100px))">
|
||||
<Alert red />
|
||||
<Layout class="preview" grid="auto / repeat(auto-fit, minmax(max-content, 200px))">
|
||||
<Alert green />
|
||||
<Alert red>Very long text that will force other items to wrap</Alert>
|
||||
<Alert blue />
|
||||
<Alert yellow />
|
||||
<Alert purple />
|
||||
</Layout>
|
||||
|
||||
#### Up to 2 in a row, between 230-x and 300px:
|
||||
|
|
|
|||
|
|
@ -2,13 +2,15 @@
|
|||
import Link from '~/components/ui/Link.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import Layout from '~/components/ui/Layout.vue'
|
||||
import Card from '~/components/ui/Card.vue'
|
||||
import Alert from '~/components/ui/Alert.vue'
|
||||
</script>
|
||||
|
||||
# Link
|
||||
|
||||
Will render an `<a href...>` element.
|
||||
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.
|
||||
|
||||
This component only adds some styles to a `<RouterLink>`.
|
||||
This component will render as [an `<a>` element [MDN]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
|
||||
|
||||
```vue-html
|
||||
|
||||
|
|
@ -26,59 +28,98 @@ Instead of a route, you can set the prop `to` to any web address starting with `
|
|||
|
||||
## Colors and Variants
|
||||
|
||||
###### Solid:
|
||||
See [Using color](/using-color)
|
||||
|
||||
<Link primary solid to="/">
|
||||
Home
|
||||
</Link>
|
||||
<Layout grid solid default style="place-items: baseline;">
|
||||
|
||||
<Link secondary solid to="/">
|
||||
Home
|
||||
</Link>
|
||||
<Card full title="">
|
||||
|
||||
<Link destructive solid to="/">
|
||||
Home
|
||||
</Link>
|
||||
<p>
|
||||
A paragraph of text with an inline (uncolored) link: <Link to="/"> no color </Link>
|
||||
</p>
|
||||
|
||||
###### Outline:
|
||||
<Layout flex>
|
||||
<Link default to="/">
|
||||
default
|
||||
</Link>
|
||||
<Link primary to="/">
|
||||
primary
|
||||
</Link>
|
||||
<Link secondary to="/">
|
||||
secondary
|
||||
</Link>
|
||||
<Link destructive to="/">
|
||||
destructive
|
||||
</Link>
|
||||
</Layout>
|
||||
|
||||
<Link primary outline to="/">
|
||||
Home
|
||||
</Link>
|
||||
</Card>
|
||||
|
||||
<Link secondary outline to="/">
|
||||
Home
|
||||
</Link>
|
||||
<Card default solid raised title="Solid" style="grid-row: span 3;">
|
||||
|
||||
<Link destructive outline to="/">
|
||||
Home
|
||||
</Link>
|
||||
<Layout stack>
|
||||
<Link default solid to="/">
|
||||
default solid
|
||||
</Link>
|
||||
<Link primary solid to="/">
|
||||
primary solid
|
||||
</Link>
|
||||
<Link secondary solid to="/">
|
||||
secondary solid
|
||||
</Link>
|
||||
<Link destructive solid to="/">
|
||||
destructive solid
|
||||
</Link>
|
||||
</Layout>
|
||||
|
||||
###### Ghost:
|
||||
</Card>
|
||||
|
||||
<Link primary ghost to="/">
|
||||
Home
|
||||
</Link>
|
||||
<Card default solid raised title="Outline" style="grid-row: span 4;">
|
||||
|
||||
<Link secondary ghost to="/">
|
||||
Home
|
||||
</Link>
|
||||
_Only use on top of solid surfaces, else the text may be unreadable!_
|
||||
|
||||
<Link destructive ghost to="/">
|
||||
Home
|
||||
</Link>
|
||||
<Alert v-for="color in ['default', 'primary', 'secondary', 'destructive']" :class="color">
|
||||
<Link outline to="/">
|
||||
{{ color }} outline
|
||||
</Link>
|
||||
</Alert>
|
||||
|
||||
<Button>
|
||||
I'm a button
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
<Card default solid raised title="Ghost">
|
||||
<Layout stack>
|
||||
<Link default ghost to="/">
|
||||
default ghost
|
||||
</Link>
|
||||
<Link primary ghost to="/">
|
||||
primary ghost
|
||||
</Link>
|
||||
<Link secondary ghost to="/">
|
||||
secondary ghost
|
||||
</Link>
|
||||
<Link destructive ghost to="/">
|
||||
destructive ghost
|
||||
</Link>
|
||||
</Layout>
|
||||
</Card>
|
||||
|
||||
</Layout>
|
||||
|
||||
## Shapes
|
||||
|
||||
```vue-html
|
||||
<Link primary solid round to="/">
|
||||
Home
|
||||
</Link>
|
||||
```
|
||||
|
||||
<Link primary solid round to="/">
|
||||
Home
|
||||
</Link>
|
||||
|
||||
## Width and alignment
|
||||
## Set width and alignment
|
||||
|
||||
See [Using width](/using-width) and [Using alignment](/using-alignment)
|
||||
|
||||
<Layout flex>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,32 +6,49 @@ import Spacer from '../src/components/ui/layout/Spacer.vue'
|
|||
|
||||
# Funkwhale design component library
|
||||
|
||||
## Contribute
|
||||
## Plan
|
||||
|
||||
- [Improve the component library](./contributing)
|
||||
- [Found a bug? Report it here](https://dev.funkwhale.audio/funkwhale/funkwhale/-/issues/?sort=created_date&state=opened&label_name%5B%5D=Type%3A%3AUX%2FUI&first_page_size=20)
|
||||
<Layout flex>
|
||||
|
||||
<Card to="designing-pages"
|
||||
title="Designing pages"
|
||||
style="width:min-content"
|
||||
/>
|
||||
|
||||
<Card to="https://design.funkwhale.audio"
|
||||
title="Ui designs" style="width:max-content">
|
||||
Check out the design system on our Penpot.
|
||||
</Card>
|
||||
|
||||
</Layout>
|
||||
|
||||
## Use
|
||||
|
||||
<Layout flex>
|
||||
<Card to='using-components'
|
||||
title="Components"
|
||||
|
||||
<Card to='/using-components'
|
||||
title="Using components"
|
||||
style="width:min-content"
|
||||
/>
|
||||
|
||||
<Card to="using-color"
|
||||
title="Colors"
|
||||
<Card to="/using-color"
|
||||
title="Using color"
|
||||
style="width:min-content"
|
||||
/>
|
||||
|
||||
<Card to="https://design.funkwhale.audio"
|
||||
title="Designs" style="width:max-content">
|
||||
Check out the design system on our Penpot.
|
||||
</Card>
|
||||
<Card to="/using-width"
|
||||
title="Using width"
|
||||
style="width:min-content"
|
||||
/>
|
||||
|
||||
<Card to="designing-pages"
|
||||
title="Page design"
|
||||
<Card to="/using-alignment"
|
||||
title="Using alignment"
|
||||
style="width:min-content"
|
||||
/>
|
||||
|
||||
</Layout>
|
||||
|
||||
## Contribute
|
||||
|
||||
- [Improve the component library](./contributing)
|
||||
- [Found a bug? Report it here](https://dev.funkwhale.audio/funkwhale/funkwhale/-/issues/?sort=created_date&state=opened&label_name%5B%5D=Type%3A%3AUX%2FUI&first_page_size=20)
|
||||
|
|
|
|||
Loading…
Reference in New Issue