fix(ui-docs): imports and code examples
This commit is contained in:
parent
6a55becd82
commit
b20456e427
|
@ -26,12 +26,25 @@ import Pills from "~/components/ui/Pills.vue"
|
||||||
|
|
||||||
# Pills
|
# Pills
|
||||||
|
|
||||||
|
```vue-html
|
||||||
|
<Layout class="preview" style="padding:16px">
|
||||||
|
<Pills v-model="staticModel" label="Tags" />
|
||||||
|
</Layout>
|
||||||
|
```
|
||||||
|
|
||||||
<Layout class="preview" style="padding:16px">
|
<Layout class="preview" style="padding:16px">
|
||||||
<Pills v-model="staticModel" label="Tags" />
|
<Pills v-model="staticModel" label="Tags" />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
Select a set of pills from presets, and add and remove custom ones
|
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">
|
<Layout class="preview" style="padding:16px">
|
||||||
<Pills v-model="interactiveModel" label="Tags" />
|
<Pills v-model="interactiveModel" label="Tags" />
|
||||||
<Input label="Label" placeholder="Placeholder"></Input>
|
<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
|
## No pills
|
||||||
|
|
||||||
|
```vue-html
|
||||||
|
<Layout class="preview" style="padding:16px">
|
||||||
|
<Pills v-model="nullModel" />
|
||||||
|
</Layout>
|
||||||
|
```
|
||||||
|
|
||||||
<Layout class="preview" style="padding:16px">
|
<Layout class="preview" style="padding:16px">
|
||||||
<Pills v-model="nullModel" />
|
<Pills v-model="nullModel" />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -7,7 +7,7 @@ import Card from "~/components/ui/Card.vue"
|
||||||
import Link from "~/components/ui/Link.vue"
|
import Link from "~/components/ui/Link.vue"
|
||||||
import Layout from "~/components/ui/Layout.vue"
|
import Layout from "~/components/ui/Layout.vue"
|
||||||
import Alert from "~/components/ui/Alert.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 route = useRoute();
|
||||||
const here = route.path
|
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>
|
<Card min-content title="Default" solid default>
|
||||||
<span>
|
<span>
|
||||||
|
|
|
@ -3,7 +3,7 @@ import Card from "~/components/ui/Card.vue"
|
||||||
import Button from "~/components/ui/Button.vue"
|
import Button from "~/components/ui/Button.vue"
|
||||||
import Link from "~/components/ui/Link.vue"
|
import Link from "~/components/ui/Link.vue"
|
||||||
import Layout from "~/components/ui/Layout.vue"
|
import Layout from "~/components/ui/Layout.vue"
|
||||||
import Spacer from "~/components/ui/layout/Spacer.vue";
|
import Spacer from "~/components/ui/Spacer.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
# Using widths
|
# Using widths
|
||||||
|
|
Loading…
Reference in New Issue