mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-31 04:07:56 +01:00
docs: uniformize isOpen in examples
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
const open = ref(false)
|
const isOpen = ref(false)
|
||||||
|
|
||||||
const people = [
|
const people = [
|
||||||
{ id: 1, label: 'Wade Cooper' },
|
{ id: 1, label: 'Wade Cooper' },
|
||||||
@@ -19,9 +19,9 @@ const selected = ref([])
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<UButton label="Open" @click="open = true" />
|
<UButton label="Open" @click="isOpen = true" />
|
||||||
|
|
||||||
<UModal v-model="open">
|
<UModal v-model="isOpen">
|
||||||
<UCommandPalette
|
<UCommandPalette
|
||||||
v-model="selected"
|
v-model="selected"
|
||||||
multiple
|
multiple
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
const open = ref(false)
|
const isOpen = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<UButton label="Open" @click="open = true" />
|
<UButton label="Open" @click="isOpen = true" />
|
||||||
|
|
||||||
<UModal v-model="open">
|
<UModal v-model="isOpen">
|
||||||
<div class="p-4">
|
<div class="p-4">
|
||||||
<Placeholder class="h-48" />
|
<Placeholder class="h-48" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
const open = ref(false)
|
const isOpen = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<UButton label="Open" @click="open = true" />
|
<UButton label="Open" @click="isOpen = true" />
|
||||||
|
|
||||||
<UModal v-model="open">
|
<UModal v-model="isOpen">
|
||||||
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||||
<template #header>
|
<template #header>
|
||||||
<Placeholder class="h-8" />
|
<Placeholder class="h-8" />
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ You can put a `CommandPalette` anywhere you want but it's most commonly used ins
|
|||||||
#code
|
#code
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
<script setup>
|
||||||
const open = ref(false)
|
const isOpen = ref(false)
|
||||||
|
|
||||||
const people = [
|
const people = [
|
||||||
{ id: 1, label: 'Wade Cooper' },
|
{ id: 1, label: 'Wade Cooper' },
|
||||||
@@ -77,9 +77,9 @@ const selected = ref([])
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<UButton label="Open" @click="open = true" />
|
<UButton label="Open" @click="isOpen = true" />
|
||||||
|
|
||||||
<UModal v-model="open">
|
<UModal v-model="isOpen">
|
||||||
<UCommandPalette
|
<UCommandPalette
|
||||||
v-model="selected"
|
v-model="selected"
|
||||||
multiple
|
multiple
|
||||||
|
|||||||
@@ -14,14 +14,14 @@ headlessui:
|
|||||||
#code
|
#code
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
<script setup>
|
||||||
const open = ref(false)
|
const isOpen = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<UButton label="Open" @click="open = true" />
|
<UButton label="Open" @click="isOpen = true" />
|
||||||
|
|
||||||
<UModal v-model="open">
|
<UModal v-model="isOpen">
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
</UModal>
|
</UModal>
|
||||||
</div>
|
</div>
|
||||||
@@ -38,14 +38,14 @@ You can put a [Card](/layout/card) component inside your Modal to handle forms a
|
|||||||
#code
|
#code
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
<script setup>
|
||||||
const open = ref(false)
|
const isOpen = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<UButton label="Open" @click="open = true" />
|
<UButton label="Open" @click="isOpen = true" />
|
||||||
|
|
||||||
<UModal v-model="open">
|
<UModal v-model="isOpen">
|
||||||
<UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
<UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||||
<template #header>
|
<template #header>
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
|
|||||||
@@ -13,14 +13,14 @@ headlessui:
|
|||||||
#code
|
#code
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
<script setup>
|
||||||
const open = ref(false)
|
const isOpen = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<UButton label="Open" @click="open = true" />
|
<UButton label="Open" @click="isOpen = true" />
|
||||||
|
|
||||||
<USlideover v-model="open">
|
<USlideover v-model="isOpen">
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
</USlideover>
|
</USlideover>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user