fix(ui-docs): imports and code examples

This commit is contained in:
ArneBo 2025-01-15 10:35:43 +01:00
parent 6a55becd82
commit b20456e427
3 changed files with 22 additions and 3 deletions

View File

@ -26,12 +26,25 @@ import Pills from "~/components/ui/Pills.vue"
# Pills
```vue-html
<Layout class="preview" style="padding:16px">
<Pills v-model="staticModel" label="Tags" />
</Layout>
```
<Layout class="preview" style="padding:16px">
<Pills v-model="staticModel" label="Tags" />
</Layout>
Select a set of pills from presets, and add and remove custom ones
```vue-html
<Layout class="preview" style="padding:16px">
<Pills v-model="interactiveModel" label="Tags" />
<Input label="Label" placeholder="Placeholder"></Input>
</Layout>
```
<Layout class="preview" style="padding:16px">
<Pills v-model="interactiveModel" label="Tags" />
<Input label="Label" placeholder="Placeholder"></Input>
@ -39,6 +52,12 @@ Select a set of pills from presets, and add and remove custom ones
## No pills
```vue-html
<Layout class="preview" style="padding:16px">
<Pills v-model="nullModel" />
</Layout>
```
<Layout class="preview" style="padding:16px">
<Pills v-model="nullModel" />
</Layout>

View File

@ -7,7 +7,7 @@ import Card from "~/components/ui/Card.vue"
import Link from "~/components/ui/Link.vue"
import Layout from "~/components/ui/Layout.vue"
import Alert from "~/components/ui/Alert.vue"
import Spacer from "~/components/ui/layout/Spacer.vue"
import Spacer from "~/components/ui/Spacer.vue"
const route = useRoute();
const here = route.path
@ -586,7 +586,7 @@ Here is the meaning the styles should convey:
---
<Layout flex style="--gap:4px; margin: 0 -50px;">
<Layout flex style="--gap:4px;">
<Card min-content title="Default" solid default>
<span>

View File

@ -3,7 +3,7 @@ import Card from "~/components/ui/Card.vue"
import Button from "~/components/ui/Button.vue"
import Link from "~/components/ui/Link.vue"
import Layout from "~/components/ui/Layout.vue"
import Spacer from "~/components/ui/layout/Spacer.vue";
import Spacer from "~/components/ui/Spacer.vue";
</script>
# Using widths