[Docs] Add ability to preview components only #329
Description
This feature is useful when you want to preview a component without displaying its code directly. Instead, you can use a component-example and use the code slot to showcase the custom code instead of the compiled one.
Why?
Here's an simple example:
// eample 1
::component-card
---
baseProps:
items:
- title: "Disabled Item"
disabled: true
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
- title: "Getting Started"
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
---
::
// exmple 2
::component-card
---
props:
items:
- title: "Disabled Item"
disabled: true
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
- title: "Getting Started"
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
excludedProps:
- items
---
::
The compiled code for this example would look like this:
// eample 1
<UDisclosure />
or
// example 2
<UDisclosure :items="[{ title: 'Disabled Item', disabled: true, content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' }, { title: 'Getting Started', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' }]" />However, with the desired functionality, the code should be structured as follows:
<script setup>
const items = ref([
{
title: "Getting Started",
disabled: true,
content: "....",
},
// etc.
]);
</script>
<template>
<UDisclosure :items="items" />
</template>