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

docs: add section descriptions

parent be424c71
No related branches found
No related tags found
No related merge requests found
Pipeline #33888 failed
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
| Prop | Data type | Required? | Default | Description | | 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 ## 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 ::: details Colors
......
...@@ -22,8 +22,8 @@ const open5 = ref(false) ...@@ -22,8 +22,8 @@ const open5 = ref(false)
| Prop | Data type | Required? | Default | Description | | Prop | Data type | Required? | Default | Description |
| ------------- | ----------------- | --------- | ------- | ------------------------ | | ------------- | ----------------- | --------- | ------- | ------------------------ |
| `title` | `string` | Yes | | Modal title | | `title` | `string` | Yes | | The modal title |
| `v-model` | `true` \| `false` | Yes | | Should the modal be open | | `v-model` | `true` \| `false` | Yes | | Whether the modal is open or not |
...@@ -49,6 +49,8 @@ const open5 = ref(false) ...@@ -49,6 +49,8 @@ const open5 = ref(false)
## Modal actions ## Modal actions
Use the `#actions` slot to add actions to a modal. Actions typically take the form of [buttons](/components/button/basic).
```vue-html ```vue-html
<fw-modal v-model="open" title="My modal"> <fw-modal v-model="open" title="My modal">
Modal content Modal content
...@@ -86,6 +88,8 @@ const open5 = ref(false) ...@@ -86,6 +88,8 @@ const open5 = ref(false)
## Nested modals ## 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 ```vue-html
<fw-modal v-model="open" title="My modal"> <fw-modal v-model="open" title="My modal">
<fw-modal v-model="openNested" title="My modal"> <fw-modal v-model="openNested" title="My modal">
...@@ -116,6 +120,8 @@ const open5 = ref(false) ...@@ -116,6 +120,8 @@ const open5 = ref(false)
## Alert inside modal ## Alert inside modal
You can nest [Funkwhale alerts](/components/alert/) to visually highlight content within the modal.
```vue-html ```vue-html
<fw-modal v-model="open" title="My modal"> <fw-modal v-model="open" title="My modal">
Modal content Modal content
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment