MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs(ui-docs): document `gap-x` prop (Layout); document `@click` (Button)

This commit is contained in:
upsiflu 2025-02-06 16:16:27 +01:00
parent d9113e0600
commit 0fe648ca6d
2 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
front/ui-docs/components/ui/button.md
View File

@ -38,7 +38,7 @@ Buttons are UI elements that users can interact with to perform actions and mani
## Action
[The default action of buttons is `submit` \[mdn\]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type). Specify an `onClick` function to change the behavior of a button.
[The default action of buttons is `submit` \[mdn\]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type). Specify an [`onClick` or `@click`](#short-form-click) function to change the behavior of a button.
```vue-html
<form>
@ -52,6 +52,18 @@ Buttons are UI elements that users can interact with to perform actions and mani
<Button :onClick="() => {}">With `onClick`</Button>
</form>
### Short-form @click
For convenience, you can use the Vue-specific `@click` syntax to add the `onClick` prop. The following two buttons are effectively equal:
```vue-html
<Button :onClick="() => { console.log('Hi!') }"> Long form </Button>
<Button @click="console.log('Hi!')"> Short form </Button>
```
<Button :onClick="() => { console.log('Hi!') }"> Long form </Button>
<Button @click="console.log('Hi!')"> Short form </Button>
## Button colors
Buttons come in different types depending on the type of action they represent.
@ -60,6 +72,8 @@ Find [a complete overview of recommended styles on the color page](../../using-c
### Default
Default buttons represent **neutral** actions such as cancelling a change or dismissing a notification.
<Layout grid class="preview transparent">
<div style="grid-column: span 3">

12
front/ui-docs/components/ui/layout.md
View File

@ -21,11 +21,13 @@ import Layout from "~/components/ui/Layout.vue"
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.
By default, the items have a 32px gap. You can [change it with the `gap-x` prop](#gap-x-set-the-gap-to-one-of-the-defaults).
## 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">
<Layout flex gap-8>
<Card width="163px" title="flex" to="/components/ui/layout/flex" >
<Layout flex style="outline: 4px dashed var(--border-color)">
<Button primary icon="bi-eye" />
@ -41,7 +43,7 @@ The following containers are responsive. Change your window's size or select a d
</Layout>
</Card>
<Card width="163px" title="stack" to="/components/ui/layout/stack">
<Layout stack style="--gap:0; margin:-8px; outline: 4px dashed var(--border-color)">
<Layout stack no-gap style="margin:-8px; outline: 4px dashed var(--border-color)">
<Button primary icon="bi-eye" />
<Button outline icon="bi-eye" />
<Button destructive icon="bi-eye" />
@ -66,6 +68,12 @@ Add one of these props to your `Layout` component to turn them into semantic con
## Common props
### `gap-x`: Set the gap to one of the defaults
```ts
`gap-${'4' | '8' | '12' | '16' | '24' | '32' | '48' | '64' | 'auto'}`
```
### `no-gap`: Remove the gap between items
<Layout flex>