Disclosure
Disclosure is a component that can be used to hide or show content. The disclosure will be hidden by default, but the user can click on the disclosure title to show the content.
The disclosure title can be customized using the summary slot. The disclosure content can be customized using the content slot. The disclosure can be opened by default by adding the open attribute.
Additionally you can control the Disclosure state, by passing open and listening update:open props (or use v-model:open).
Nuxt.js is a fantastic framework for building web applications. Here are just a few reasons why:
- Fast Development: Nuxt.js provides a lot of out-of-the-box functionality, so you can start building your app right away without worrying about setup and configuration.
- Server-Side Rendering: With Nuxt.js, you can easily create server-rendered apps that load faster and are more SEO-friendly.
- Easy Routing: Nuxt.js provides a simple and intuitive way to handle routing in your app, so you can create clean URLs and easily navigate between pages.
- Vue.js Integration: Nuxt.js is built on top of Vue.js, which is one of the most popular and powerful JavaScript frameworks out there. This means that you can take advantage of all the great features of Vue.js while also using Nuxt.js to simplify your workflow.
- Community: Nuxt.js has a large and supportive community, which means that you can find help and resources easily if you ever get stuck or need guidance.
Overall, Nuxt.js is a great choice for anyone who wants to build web applications quickly and efficiently, without sacrificing performance or functionality.
Placeholder text generated by ChatGPT
Types
Disclosure has such contextual types: success, info, warning, and danger. It also has additional neutral, primary, secondary types.
Icons
Disclosure can have an icon on the left side of the title. You can use any component name prefixed with Icon, icon name from Iconify or any emoji.
Props
| Name | Type | Default | Description |
|---|---|---|---|
open | Boolean | false | Whether the disclosure is open or not. |
type | String | primary | Type of the disclosure. Possible values: success, warning, danger, info, primary, secondary, neutral |
icon | String, Boolean | false | Icon to be displayed on the left side of the Disclosure. Any component name prefixed with Icon, icon name from Iconify or any emoji could be used. |
Slots
| Name | Description |
|---|---|
summary | The title of the disclosure. |
content | The content of the disclosure. |
Events
| Name | Description |
|---|---|
update:open | Emitted when the disclosure is opened or closed. The payload is Disclosure state. |
Design Tokens
import { defineTheme } from 'pinceau'
export default defineTheme({
elements: {
disclosure: {
width: '100%',
borderWidth: '0px',
borderStyle: 'solid',
borderRadius: '{radii.none}',
summary: {
padding: '1rem',
borderRadius: '{elements.radii.base}',
outline: {
focus: '2px solid',
},
icon: {
width: '{space.6}',
height: '{space.6}',
marginInlineEnd: '{space.3}',
},
chevron: {
borderRadius: '{elements.radii.base}',
padding: '2px',
width: '{space.5}',
height: '{space.5}',
transition: 'transform 200ms ease-in-out',
transform: 'rotate(-90deg)',
}
},
content: {
padding: '1rem',
firstChild: {
marginTop: '0px'
},
lastChild: {
marginBottom: '0px'
},
borderWidth: '1px',
borderStyle: 'solid',
borderColor: 'transparent',
verticalMargin: '{typography.verticalMargin.sm}',
borderBottomLeftRadius: '{elements.radii.base}',
borderBottomRightRadius: '{elements.radii.base}',
},
opened: {
summary: {
borderBottomLeftRadius: '0px',
borderBottomRightRadius: '0px',
borderTopLeftRadius: '{elements.radii.base}',
borderTopRightRadius: '{elements.radii.base}',
transform: 'rotate(0deg)',
}
},
},
}
})