chore(ui-docs): change order to Button..Modal
This commit is contained in:
upsiflu
parent
46af65e54c
commit
4d38a47d55
|
|
@ -33,22 +33,22 @@ const isOpen6 = ref(false)
|
|||
<Layout flex>
|
||||
|
||||
```vue-html
|
||||
<Modal v-model="isOpen" title="My modal">
|
||||
Modal content
|
||||
</Modal>
|
||||
|
||||
<Button @click="isOpen = true">
|
||||
Open modal
|
||||
</Button>
|
||||
|
||||
<Modal v-model="isOpen" title="My modal">
|
||||
Modal content
|
||||
</Modal>
|
||||
```
|
||||
|
||||
<div class="preview">
|
||||
<Modal v-model="isOpen" title="My modal">
|
||||
Modal content
|
||||
</Modal>
|
||||
<Button @click="isOpen = true">
|
||||
Open modal
|
||||
</Button>
|
||||
<Modal v-model="isOpen" title="My modal">
|
||||
Modal content
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
|
@ -62,6 +62,10 @@ Make sure to add `autofocus` to the preferred button.
|
|||
<Layout flex>
|
||||
|
||||
```vue-html
|
||||
<Button @click="isOpen = true">
|
||||
Open modal
|
||||
</Button>
|
||||
|
||||
<Modal v-model="isOpen" title="My modal">
|
||||
Modal content
|
||||
|
||||
|
|
@ -75,13 +79,12 @@ Make sure to add `autofocus` to the preferred button.
|
|||
</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<Button @click="isOpen = true">
|
||||
Open modal
|
||||
</Button>
|
||||
```
|
||||
|
||||
<div class="preview">
|
||||
<Button @click="isOpen2 = true">
|
||||
Open modal
|
||||
</Button>
|
||||
<Modal v-model="isOpen2" title="My modal">
|
||||
Modal content
|
||||
<template #actions>
|
||||
|
|
@ -93,9 +96,6 @@ Make sure to add `autofocus` to the preferred button.
|
|||
</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
<Button @click="isOpen2 = true">
|
||||
Open modal
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
|
@ -107,6 +107,7 @@ Note that confirmation dialogs interrupt the user's workflow. Consider adding a
|
|||
::: tip Read more about designing user experiences around dangerous actions:
|
||||
|
||||
- [How to use visual signals and spacing to differentiate between benign and dangerous options](https://www.nngroup.com/articles/proximity-consequential-options/)
|
||||
|
||||
> If you need to implement dangerous actions, make sure to place them apart from other actions to prevent accidental clicks. Add contextual hints and information so that the user understands the consequences of the action.
|
||||
|
||||
- [How to design a confirmation dialog](https://www.nngroup.com/articles/confirmation-dialog/)
|
||||
|
|
@ -119,6 +120,10 @@ Note that confirmation dialogs interrupt the user's workflow. Consider adding a
|
|||
:::
|
||||
|
||||
```vue-html
|
||||
<Button @click="isOpen = true" color="destructive">
|
||||
Delete my account ...
|
||||
</Button>
|
||||
|
||||
<Modal v-model="isOpen" title="Delete account?">
|
||||
<template #alert>
|
||||
<Alert color="red">
|
||||
|
|
@ -138,11 +143,11 @@ You will not be able to restore your account.
|
|||
</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
<Button @click="isOpen = true" color="destructive">
|
||||
Delete my account ...
|
||||
</Button>
|
||||
```
|
||||
|
||||
<Button @click="isOpen6 = true" color="destructive">
|
||||
Delete my account ...
|
||||
</Button>
|
||||
<Modal v-model="isOpen6" title="Delete account?">
|
||||
<template #alert>
|
||||
<Alert color="red">
|
||||
|
|
@ -162,9 +167,6 @@ You will not be able to restore your account.
|
|||
</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
<Button @click="isOpen6 = true" color="destructive">
|
||||
Delete my account ...
|
||||
</Button>
|
||||
|
||||
## Nested modals
|
||||
|
||||
|
|
@ -173,6 +175,10 @@ You can nest modals to allow users to isOpen a modal from inside another modal.
|
|||
<Layout flex>
|
||||
|
||||
```vue-html
|
||||
<Button @click="isOpen = true">
|
||||
Open modal
|
||||
</Button>
|
||||
|
||||
<Modal v-model="isOpen" title="My modal">
|
||||
<Modal v-model="isOpenNested" title="My modal">
|
||||
Nested modal content
|
||||
|
|
@ -182,13 +188,12 @@ You can nest modals to allow users to isOpen a modal from inside another modal.
|
|||
Open nested modal
|
||||
</Button>
|
||||
</Modal>
|
||||
|
||||
<Button @click="isOpen = true">
|
||||
Open modal
|
||||
</Button>
|
||||
```
|
||||
|
||||
<div class="preview">
|
||||
<Button @click="isOpen4 = true">
|
||||
Open modal
|
||||
</Button>
|
||||
<Modal v-model="isOpen4" title="My modal">
|
||||
<Modal v-model="isOpen5" title="My modal">
|
||||
Nested modal content
|
||||
|
|
@ -197,9 +202,6 @@ You can nest modals to allow users to isOpen a modal from inside another modal.
|
|||
Open nested modal
|
||||
</Button>
|
||||
</Modal>
|
||||
<Button @click="isOpen4 = true">
|
||||
Open modal
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
|
@ -211,6 +213,10 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
|
|||
<Layout flex>
|
||||
|
||||
```vue-html
|
||||
<Button @click="isOpen = true">
|
||||
Open modal
|
||||
</Button>
|
||||
|
||||
<Modal v-model="isOpen" title="My modal">
|
||||
Modal content
|
||||
|
||||
|
|
@ -224,13 +230,12 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
|
|||
</fw-alert>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<Button @click="isOpen = true">
|
||||
Open modal
|
||||
</Button>
|
||||
```
|
||||
|
||||
<div class="preview">
|
||||
<Button @click="isOpen3 = true">
|
||||
Open modal
|
||||
</Button>
|
||||
<Modal v-model="isOpen3" title="My modal">
|
||||
Modal content
|
||||
<template #alert v-if="alertOpen">
|
||||
|
|
@ -250,9 +255,6 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
|
|||
</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
<Button @click="isOpen3 = true">
|
||||
Open modal
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Reference in New Issue