Add asChild demo
Cagatay Civici
parent
6e68d15595
commit
f85d3a5c1c
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Headless mode is enabled by adding the <i>asChild</i> property and defining your own UI element with the available bindings.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Button v-slot="slotProps" asChild>
|
||||
<button
|
||||
v-bind="slotProps.a11yAttrs"
|
||||
class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
|
||||
>
|
||||
SIGN UP
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button v-slot="slotProps" asChild>
|
||||
<button
|
||||
v-bind="slotProps.a11yAttrs"
|
||||
class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
|
||||
>
|
||||
SIGN UP
|
||||
</button>
|
||||
</Button>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button v-slot="slotProps" asChild>
|
||||
<button
|
||||
v-bind="slotProps.a11yAttrs"
|
||||
class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
|
||||
>
|
||||
SIGN UP
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button v-slot="slotProps" asChild>
|
||||
<button
|
||||
v-bind="slotProps.a11yAttrs"
|
||||
class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
|
||||
>
|
||||
SIGN UP
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -2,15 +2,15 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex items-center gap-4 justify-center">
|
||||
<div class="card flex flex-col items-center gap-4">
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<Button icon="pi pi-home" aria-label="Save" />
|
||||
<Button label="Profile" icon="pi pi-user" />
|
||||
<Button label="Save" icon="pi pi-check" iconPos="right" />
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<Button label="Search" icon="pi pi-search" iconPos="top" text />
|
||||
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
|
||||
<Button label="Search" icon="pi pi-search" iconPos="top" />
|
||||
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -25,20 +25,20 @@ export default {
|
|||
<Button icon="pi pi-home" aria-label="Save" />
|
||||
<Button label="Profile" icon="pi pi-user" />
|
||||
<Button label="Save" icon="pi pi-check" iconPos="right" />
|
||||
<Button label="Search" icon="pi pi-search" iconPos="top" text />
|
||||
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
|
||||
<Button label="Search" icon="pi pi-search" iconPos="top" />
|
||||
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex items-center gap-4 justify-center">
|
||||
<div class="card flex flex-col items-center gap-4">
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<Button icon="pi pi-home" aria-label="Save" />
|
||||
<Button label="Profile" icon="pi pi-user" />
|
||||
<Button label="Save" icon="pi pi-check" iconPos="right" />
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<Button label="Search" icon="pi pi-search" iconPos="top" text />
|
||||
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
|
||||
<Button label="Search" icon="pi pi-search" iconPos="top" />
|
||||
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -48,15 +48,15 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex items-center gap-4 justify-center">
|
||||
<div class="card flex flex-col items-center gap-4">
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<Button icon="pi pi-home" aria-label="Save" />
|
||||
<Button label="Profile" icon="pi pi-user" />
|
||||
<Button label="Save" icon="pi pi-check" iconPos="right" />
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<Button label="Search" icon="pi pi-search" iconPos="top" text />
|
||||
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
|
||||
<Button label="Search" icon="pi pi-search" iconPos="top" />
|
||||
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<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>
|
||||
<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>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center gap-4">
|
||||
<Button label="Link" link />
|
||||
<NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener" tabindex="-1">
|
||||
<Button label="External" />
|
||||
</NuxtLink>
|
||||
<router-link to="/" target="_blank" rel="noopener" tabindex="-1">
|
||||
<Button label="Router" />
|
||||
</router-link>
|
||||
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
|
||||
<Button as="router-link" label="Router" to="/" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -21,23 +17,15 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<Button label="Link" link />
|
||||
<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>
|
||||
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
|
||||
<Button as="router-link" label="Router" to="/" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center gap-4">
|
||||
<Button label="Link" link />
|
||||
<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>
|
||||
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
|
||||
<Button as="router-link" label="Router" to="/" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -48,12 +36,8 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center gap-4">
|
||||
<Button label="Link" link />
|
||||
<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>
|
||||
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
|
||||
<Button as="router-link" label="Router" to="/" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import BadgeDoc from '@/doc/button/BadgeDoc.vue';
|
|||
import BasicDoc from '@/doc/button/BasicDoc.vue';
|
||||
import ButtonGroupDoc from '@/doc/button/ButtonGroupDoc.vue';
|
||||
import DisabledDoc from '@/doc/button/DisabledDoc.vue';
|
||||
import HeadlessDoc from '@/doc/button/HeadlessDoc.vue';
|
||||
import IconOnlyDoc from '@/doc/button/IconOnlyDoc.vue';
|
||||
import IconsDoc from '@/doc/button/IconsDoc.vue';
|
||||
import ImportDoc from '@/doc/button/ImportDoc.vue';
|
||||
|
|
@ -46,11 +47,6 @@ export default {
|
|||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'link',
|
||||
label: 'Link',
|
||||
component: LinkDoc
|
||||
},
|
||||
{
|
||||
id: 'icons',
|
||||
label: 'Icons',
|
||||
|
|
@ -61,6 +57,11 @@ export default {
|
|||
label: 'Loading',
|
||||
component: LoadingDoc
|
||||
},
|
||||
{
|
||||
id: 'link',
|
||||
label: 'Link',
|
||||
component: LinkDoc
|
||||
},
|
||||
{
|
||||
id: 'severity',
|
||||
label: 'Severity',
|
||||
|
|
@ -121,6 +122,11 @@ export default {
|
|||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'headless',
|
||||
label: 'Headless',
|
||||
component: HeadlessDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
|
|
|
|||
Loading…
Reference in New Issue