vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Use asChild

prod
Cagatay Civici 2025-02-25 13:33:59 +03:00
parent 8bc70ef1fd
commit c2b551c1de
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/showcase/doc/button/LinkDoc.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <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> </DocSectionText>
<div class="card flex justify-center gap-4"> <div class="card flex justify-center gap-4">
<Button label="Link" variant="link" /> <Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" /> <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> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -18,14 +20,18 @@ export default {
basic: ` basic: `
<Button label="Link" variant="link" /> <Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" /> <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: ` options: `
<template> <template>
<div class="card flex justify-center gap-4"> <div class="card flex justify-center gap-4">
<Button label="Link" variant="link" /> <Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" /> <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> </div>
</template> </template>
@ -37,7 +43,9 @@ export default {
<div class="card flex justify-center gap-4"> <div class="card flex justify-center gap-4">
<Button label="Link" variant="link" /> <Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" /> <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> </div>
</template> </template>