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

Add new link button demo

pull/5136/head
Cagatay Civici 2024-01-23 18:24:48 +03:00
parent 0566a48521
commit b36d4439c4
1 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
doc/button/LinkDoc.vue
View File

@ -1,10 +1,15 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>A button can be rendered as a link when the <i>link</i> property is present. On the other hand, adding <i>.p-button</i> class to an anchor element displays the link as a button.</p> <p>A button can be displayed as a link element when the <i>link</i> property is present. If you need to use buttons for navigation, wrap the button inside a component like <i>NuxtLink</i> or <i>router-link</i> depending on your router.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center gap-3"> <div class="card flex justify-content-center gap-3">
<Button label="Link" link /> <Button label="Link" link />
<a href="https://vuejs.org" target="_blank" rel="noopener noreferrer" class="p-button font-bold">Navigate</a> <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
<Button label="External" />
</NuxtLink>
<router-link to="/" target="_blank" rel="noopener">
<Button label="Router" />
</router-link>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -16,13 +21,23 @@ export default {
code: { code: {
basic: ` basic: `
<Button label="Link" link /> <Button label="Link" link />
<a href="https://vuejs.org" target="_blank" rel="noopener noreferrer" class="p-button font-bold">Navigate</a> <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
<Button label="External" />
</NuxtLink>
<router-link to="/" target="_blank" rel="noopener">
<Button label="Router" />
</router-link>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center gap-3"> <div class="card flex justify-content-center gap-3">
<Button label="Link" link /> <Button label="Link" link />
<a href="https://vuejs.org" target="_blank" rel="noopener noreferrer" class="p-button font-bold">Navigate</a> <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
<Button label="External" />
</NuxtLink>
<router-link to="/" target="_blank" rel="noopener">
<Button label="Router" />
</router-link>
</div> </div>
</template> </template>
@ -33,7 +48,12 @@ export default {
<template> <template>
<div class="card flex justify-content-center gap-3"> <div class="card flex justify-content-center gap-3">
<Button label="Link" link /> <Button label="Link" link />
<a href="https://vuejs.org" target="_blank" rel="noopener noreferrer" class="p-button font-bold">Navigate</a> <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
<Button label="External" />
</NuxtLink>
<router-link to="/" target="_blank" rel="noopener">
<Button label="Router" />
</router-link>
</div> </div>
</template> </template>