59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<template>
|
|
<DocSectionText v-bind="$attrs">
|
|
<p>Toolbar provides <i>start</i>, <i>center</i> and <i>end</i> properties to place content at these sections.</p>
|
|
</DocSectionText>
|
|
<div class="card">
|
|
<Toolbar>
|
|
<template #start>
|
|
<SecondaryButton icon="pi pi-plus" class="mr-2" text />
|
|
<SecondaryButton icon="pi pi-print" class="mr-2" text />
|
|
<SecondaryButton icon="pi pi-upload" severity="secondary" text />
|
|
</template>
|
|
|
|
<template #center>
|
|
<InputText placeholder="Search" />
|
|
</template>
|
|
|
|
<template #end>
|
|
<Button label="Save" />
|
|
</template>
|
|
</Toolbar>
|
|
</div>
|
|
<DocSectionCode :code="code" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import Button from '@/volt/button';
|
|
import SecondaryButton from '@/volt/button/secondary';
|
|
import InputText from '@/volt/inputtext';
|
|
import Toolbar from '@/volt/toolbar';
|
|
import { ref } from 'vue';
|
|
|
|
const code = ref(`
|
|
<template>
|
|
<Toolbar>
|
|
<template #start>
|
|
<SecondaryButton icon="pi pi-plus" class="mr-2" text />
|
|
<SecondaryButton icon="pi pi-print" class="mr-2" text />
|
|
<SecondaryButton icon="pi pi-upload" severity="secondary" text />
|
|
</template>
|
|
|
|
<template #center>
|
|
<InputText placeholder="Search" />
|
|
</template>
|
|
|
|
<template #end>
|
|
<Button icon="pi pi-check" />
|
|
</template>
|
|
</Toolbar>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Button from '@/volt/button';
|
|
import SecondaryButton from '@/volt/button/secondary';
|
|
import InputText from '@/volt/inputtext';
|
|
import Toolbar from '@/volt/toolbar';
|
|
<\/script>
|
|
`);
|
|
</script>
|