Skip to content

Commit fa28eee

Browse files
johnleiderjohnleider
committed
docs(expansion-panel.md): update code fence indent
1 parent 4d59293 commit fa28eee

File tree

1 file changed

+133
-133
lines changed

1 file changed

+133
-133
lines changed

‎apps/docs/src/pages/components/expansion-panel.md‎

Lines changed: 133 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,13 @@ The root component that manages expansion state and provides context to items.
4141
- **Props**
4242

4343
```ts
44-
interface ExpansionPanelRootProps<T = unknown> {
45-
namespace?: string
46-
disabled?: boolean
47-
enroll?: boolean
48-
mandatory?: boolean | 'force'
49-
multiple?: boolean
50-
}
44+
interface ExpansionPanelRootProps<T = unknown> {
45+
namespace?: string
46+
disabled?: boolean
47+
enroll?: boolean
48+
mandatory?: boolean | 'force'
49+
multiple?: boolean
50+
}
5151
```
5252

5353
- `namespace`: Namespace for dependency injection (default: `'v0:expansion-panel'`)
@@ -91,16 +91,16 @@ The root component that manages expansion state and provides context to items.
9191
- **Slots**
9292

9393
```ts
94-
interface ExpansionPanelRootSlots {
95-
default: (props: {
96-
disabled: boolean
97-
multiple: boolean
98-
select: (id: ID) => void
99-
unselect: (id: ID) => void
100-
toggle: (id: ID) => void
101-
ariaMultiselectable: boolean
102-
}) => any
103-
}
94+
interface ExpansionPanelRootSlots {
95+
default: (props: {
96+
disabled: boolean
97+
multiple: boolean
98+
select: (id: ID) => void
99+
unselect: (id: ID) => void
100+
toggle: (id: ID) => void
101+
ariaMultiselectable: boolean
102+
}) => any
103+
}
104104
```
105105

106106
### ExpansionPanelItem
@@ -110,13 +110,13 @@ Individual expansion panel items that register with the ExpansionPanel context a
110110
- **Props**
111111

112112
```ts
113-
interface ExpansionPanelItemProps {
114-
id?: string
115-
value?: any
116-
disabled?: MaybeRef<boolean>
117-
namespace?: string
118-
itemNamespace?: string
119-
}
113+
interface ExpansionPanelItemProps {
114+
id?: string
115+
value?: any
116+
disabled?: MaybeRef<boolean>
117+
namespace?: string
118+
itemNamespace?: string
119+
}
120120
```
121121

122122
- `id`: Unique identifier (auto-generated if not provided)
@@ -130,44 +130,44 @@ Individual expansion panel items that register with the ExpansionPanel context a
130130
ExpansionPanelItem provides context to child components (Activator/Content) via dependency injection:
131131

132132
```ts
133-
interface ExpansionPanelItemContext {
134-
ticket: SelectionTicket
135-
headerId: Readonly<Ref<string>>
136-
contentId: Readonly<Ref<string>>
137-
isDisabled: Readonly<Ref<boolean>>
138-
}
133+
interface ExpansionPanelItemContext {
134+
ticket: SelectionTicket
135+
headerId: Readonly<Ref<string>>
136+
contentId: Readonly<Ref<string>>
137+
isDisabled: Readonly<Ref<boolean>>
138+
}
139139
```
140140

141141
- **Slots**
142142

143143
```ts
144-
interface ExpansionPanelItemSlots {
145-
default: () => any
146-
}
144+
interface ExpansionPanelItemSlots {
145+
default: () => any
146+
}
147147
```
148148

149149
- **Example**
150150

151151
```vue
152-
<script lang="ts" setup>
153-
import { ExpansionPanel } from '@vuetify/v0'
154-
</script>
155-
156-
<template>
157-
<ExpansionPanel.Item value="panel-1">
158-
<ExpansionPanel.Activator v-slot="{ toggle, isSelected }">
159-
<button @click="toggle">
160-
Panel Title {{ isSelected ? '▲' : '▼' }}
161-
</button>
162-
</ExpansionPanel.Activator>
163-
164-
<ExpansionPanel.Content v-slot="{ isSelected }">
165-
<div v-show="isSelected">
166-
<p>Panel content goes here</p>
167-
</div>
168-
</ExpansionPanel.Content>
169-
</ExpansionPanel.Item>
170-
</template>
152+
<script lang="ts" setup>
153+
import { ExpansionPanel } from '@vuetify/v0'
154+
</script>
155+
156+
<template>
157+
<ExpansionPanel.Item value="panel-1">
158+
<ExpansionPanel.Activator v-slot="{ toggle, isSelected }">
159+
<button @click="toggle">
160+
Panel Title {{ isSelected ? '▲' : '▼' }}
161+
</button>
162+
</ExpansionPanel.Activator>
163+
164+
<ExpansionPanel.Content v-slot="{ isSelected }">
165+
<div v-show="isSelected">
166+
<p>Panel content goes here</p>
167+
</div>
168+
</ExpansionPanel.Content>
169+
</ExpansionPanel.Item>
170+
</template>
171171
```
172172

173173
### ExpansionPanelActivator
@@ -179,11 +179,11 @@ The activator component that triggers the expansion/collapse of a panel. Must be
179179
Extends `AtomProps` for maximum flexibility:
180180

181181
```ts
182-
interface ExpansionPanelActivatorProps extends AtomProps {
183-
as?: DOMElement | null
184-
renderless?: boolean
185-
itemNamespace?: string
186-
}
182+
interface ExpansionPanelActivatorProps extends AtomProps {
183+
as?: DOMElement | null
184+
renderless?: boolean
185+
itemNamespace?: string
186+
}
187187
```
188188

189189
- `as`: The element type to render (default: `'button'`)
@@ -199,18 +199,18 @@ The activator component that triggers the expansion/collapse of a panel. Must be
199199
- **Slot Props**
200200

201201
```ts
202-
interface ExpansionPanelActivatorSlotProps {
203-
id: string
204-
role: 'button'
205-
tabindex: number
206-
'aria-expanded': boolean
207-
'aria-controls': string
208-
'aria-disabled': boolean
209-
isSelected: boolean
210-
toggle: () => void
211-
onClick: () => void
212-
onKeydown: (e: KeyboardEvent) => void
213-
}
202+
interface ExpansionPanelActivatorSlotProps {
203+
id: string
204+
role: 'button'
205+
tabindex: number
206+
'aria-expanded': boolean
207+
'aria-controls': string
208+
'aria-disabled': boolean
209+
isSelected: boolean
210+
toggle: () => void
211+
onClick: () => void
212+
onKeydown: (e: KeyboardEvent) => void
213+
}
214214
```
215215

216216
All ARIA attributes are automatically provided via `bindableProps`. When using the default slot, these props are available for custom implementations.
@@ -227,35 +227,35 @@ The activator component that triggers the expansion/collapse of a panel. Must be
227227
- **Example**
228228

229229
```vue
230-
<script lang="ts" setup>
231-
import { ExpansionPanel } from '@vuetify/v0'
232-
</script>
233-
234-
<template>
235-
<!-- Simple usage (automatic ARIA binding) -->
236-
<ExpansionPanel.Activator>
237-
Click to expand
238-
</ExpansionPanel.Activator>
239-
240-
<!-- Custom implementation with slot props -->
241-
<ExpansionPanel.Activator v-slot="{ toggle, isSelected }">
242-
<button @click="toggle" class="custom-button">
243-
{{ isSelected ? '−' : '+' }} Custom Header
244-
</button>
245-
</ExpansionPanel.Activator>
246-
247-
<!-- Renderless mode -->
248-
<ExpansionPanel.Activator renderless v-slot="props">
249-
<MyCustomButton v-bind="props">
250-
Advanced Custom Header
251-
</MyCustomButton>
252-
</ExpansionPanel.Activator>
230+
<script lang="ts" setup>
231+
import { ExpansionPanel } from '@vuetify/v0'
232+
</script>
253233
254-
<!-- Custom element type -->
255-
<ExpansionPanel.Activator as="div">
256-
Custom div activator
257-
</ExpansionPanel.Activator>
258-
</template>
234+
<template>
235+
<!-- Simple usage (automatic ARIA binding) -->
236+
<ExpansionPanel.Activator>
237+
Click to expand
238+
</ExpansionPanel.Activator>
239+
240+
<!-- Custom implementation with slot props -->
241+
<ExpansionPanel.Activator v-slot="{ toggle, isSelected }">
242+
<button @click="toggle" class="custom-button">
243+
{{ isSelected ? '−' : '+' }} Custom Header
244+
</button>
245+
</ExpansionPanel.Activator>
246+
247+
<!-- Renderless mode -->
248+
<ExpansionPanel.Activator renderless v-slot="props">
249+
<MyCustomButton v-bind="props">
250+
Advanced Custom Header
251+
</MyCustomButton>
252+
</ExpansionPanel.Activator>
253+
254+
<!-- Custom element type -->
255+
<ExpansionPanel.Activator as="div">
256+
Custom div activator
257+
</ExpansionPanel.Activator>
258+
</template>
259259
```
260260

261261
### ExpansionPanelContent
@@ -267,11 +267,11 @@ The content container for an expansion panel. Must be used within `ExpansionPane
267267
Extends `AtomProps` for maximum flexibility:
268268

269269
```ts
270-
interface ExpansionPanelContentProps extends AtomProps {
271-
as?: DOMElement | null
272-
renderless?: boolean
273-
itemNamespace?: string
274-
}
270+
interface ExpansionPanelContentProps extends AtomProps {
271+
as?: DOMElement | null
272+
renderless?: boolean
273+
itemNamespace?: string
274+
}
275275
```
276276

277277
- `as`: The element type to render (default: `'div'`)
@@ -287,12 +287,12 @@ The content container for an expansion panel. Must be used within `ExpansionPane
287287
- **Slot Props**
288288

289289
```ts
290-
interface ExpansionPanelContentSlotProps {
291-
id: string
292-
role: 'region'
293-
'aria-labelledby': string
294-
isSelected: boolean
295-
}
290+
interface ExpansionPanelContentSlotProps {
291+
id: string
292+
role: 'region'
293+
'aria-labelledby': string
294+
isSelected: boolean
295+
}
296296
```
297297

298298
All ARIA attributes are automatically provided via `bindableProps`.
@@ -306,32 +306,32 @@ The content container for an expansion panel. Must be used within `ExpansionPane
306306
- **Example**
307307

308308
```vue
309-
<script lang="ts" setup>
310-
import { ExpansionPanel } from '@vuetify/v0'
311-
</script>
309+
<script lang="ts" setup>
310+
import { ExpansionPanel } from '@vuetify/v0'
311+
</script>
312312
313-
<template>
314-
<!-- Simple usage with manual visibility control -->
315-
<ExpansionPanel.Content v-slot="{ isSelected }">
313+
<template>
314+
<!-- Simple usage with manual visibility control -->
315+
<ExpansionPanel.Content v-slot="{ isSelected }">
316+
<div v-show="isSelected">
317+
Content here
318+
</div>
319+
</ExpansionPanel.Content>
320+
321+
<!-- With transitions -->
322+
<ExpansionPanel.Content v-slot="{ isSelected }">
323+
<Transition name="expand">
316324
<div v-show="isSelected">
317-
Content here
325+
Animated content
318326
</div>
319-
</ExpansionPanel.Content>
320-
321-
<!-- With transitions -->
322-
<ExpansionPanel.Content v-slot="{ isSelected }">
323-
<Transition name="expand">
324-
<div v-show="isSelected">
325-
Animated content
326-
</div>
327-
</Transition>
328-
</ExpansionPanel.Content>
329-
330-
<!-- Renderless mode -->
331-
<ExpansionPanel.Content renderless v-slot="{ isSelected, ...props }">
332-
<MyCustomContent v-show="isSelected" v-bind="props">
333-
Custom content
334-
</MyCustomContent>
335-
</ExpansionPanel.Content>
336-
</template>
327+
</Transition>
328+
</ExpansionPanel.Content>
329+
330+
<!-- Renderless mode -->
331+
<ExpansionPanel.Content renderless v-slot="{ isSelected, ...props }">
332+
<MyCustomContent v-show="isSelected" v-bind="props">
333+
Custom content
334+
</MyCustomContent>
335+
</ExpansionPanel.Content>
336+
</template>
337337
```

0 commit comments

Comments
 (0)