Use asChild for custom components, no need for to in d.ts in this case.

master
Cagatay Civici 2025-02-25 13:12:40 +03:00
parent 1cd2eb4f15
commit 2639193d3b
2 changed files with 13 additions and 9 deletions

View File

@ -1,11 +1,13 @@
<template>
<DocSectionText v-bind="$attrs">
<p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to use buttons for actual navigations, use the <i>as</i> property to customize the rendered element.</p>
<p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to customize the rendering, use the <i>as</i> to change the element or <i>asChild</i> for advanced templating.</p>
</DocSectionText>
<div class="card flex justify-center gap-4">
<Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" />
<Button asChild v-slot="slotProps">
<RouterLink to="/" :class="slotProps.class">Router</RouterLink>
</Button>
</div>
<DocSectionCode :code="code" />
</template>
@ -18,14 +20,18 @@ export default {
basic: `
<Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" />
<Button asChild v-slot="slotProps">
<RouterLink to="/" :class="slotProps.class">Router</RouterLink>
</Button>
`,
options: `
<template>
<div class="card flex justify-center gap-4">
<Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" />
<Button asChild v-slot="slotProps">
<RouterLink to="/" :class="slotProps.class">Router</RouterLink>
</Button>
</div>
</template>
@ -37,7 +43,9 @@ export default {
<div class="card flex justify-center gap-4">
<Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" />
<Button asChild v-slot="slotProps">
<RouterLink to="/" :class="slotProps.class">Router</RouterLink>
</Button>
</div>
</template>

View File

@ -207,10 +207,6 @@ export interface ButtonProps extends ButtonHTMLAttributes {
* @defaultValue false
*/
unstyled?: boolean;
/**
* Route Location the router-link should navigate to when clicked on.
*/
to?: string;
}
/**