Code Preview
To be used inside a <CodeGroup />
component to display a preview of some rendered code.
Hello World!
Props
Props | Type | Default | Description |
---|---|---|---|
label | String | undefined | Label of the code preview tab. This prop is required |
active | Boolean | false | TODO |
column | Boolean | false | Flex layout direction |
Slots
Slot | Description |
---|---|
default | A slot where you can add your code block. |
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
elements: {
codePreview: {
gap: '{space.4}',
padding: '{space.4}',
},
}
})
ElementsCode GroupThis component uses slots to create a tab panel of your code examples (in CodePreview) or preview (using markdown code snippet synthax).ElementsDisclosureDisclosure 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.