Skip to content
Snippets Groups Projects
Commit 3e7a787d authored by Ciarán Ainsworth's avatar Ciarán Ainsworth Committed by Kasper Seweryn
Browse files

docs: add section descriptions

Part-of: <!93>
parent f96dd153
No related branches found
No related tags found
1 merge request!93feat: add alert and modal components
......@@ -3,13 +3,13 @@
| Prop | Data type | Required? | Default | Description |
| ------------- | -------------------------------------------------- | --------- | ----------- | ----------------------- |
| `color` | `blue` \| `red` \| `purple` \| `green` \| `yellow` | No | `secondary` | Renders a colored alert |
| `color` | `blue` \| `red` \| `purple` \| `green` \| `yellow` | No | `secondary` | The color of the alert container |
## Alert colors
Funkwhale alert support a range of pastel colors to create visually appealing interfaces.
Funkwhale alerts support a range of pastel colors for visual appeal.
::: details Colors
......
......@@ -22,8 +22,8 @@ const open5 = ref(false)
| Prop | Data type | Required? | Default | Description |
| ------------- | ----------------- | --------- | ------- | ------------------------ |
| `title` | `string` | Yes | | Modal title |
| `v-model` | `true` \| `false` | Yes | | Should the modal be open |
| `title` | `string` | Yes | | The modal title |
| `v-model` | `true` \| `false` | Yes | | Whether the modal is open or not |
......@@ -49,6 +49,8 @@ const open5 = ref(false)
## Modal actions
Use the `#actions` slot to add actions to a modal. Actions typically take the form of [buttons](/components/button/basic).
```vue-html
<fw-modal v-model="open" title="My modal">
Modal content
......@@ -86,6 +88,8 @@ const open5 = ref(false)
## Nested modals
You can nest modals to allow users to open a modal from inside another modal. This can be useful when creating a multi-step workflow.
```vue-html
<fw-modal v-model="open" title="My modal">
<fw-modal v-model="openNested" title="My modal">
......@@ -116,6 +120,8 @@ const open5 = ref(false)
## Alert inside modal
You can nest [Funkwhale alerts](/components/alert/) to visually highlight content within the modal.
```vue-html
<fw-modal v-model="open" title="My modal">
Modal content
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment