primevue-mirror/doc/toolbar/pt/PTDoc.vue

83 lines
2.3 KiB
Vue
Raw Normal View History

2023-04-10 14:51:51 +00:00
<template>
<DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card">
2023-04-19 07:58:20 +00:00
<Toolbar :pt="{ root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } } }">
2023-04-10 14:51:51 +00:00
<template #start>
2023-04-19 07:58:20 +00:00
<Button label="New" icon="pi pi-plus" class="p-button-help" />
2023-04-10 14:51:51 +00:00
</template>
2023-04-19 07:58:20 +00:00
2023-04-10 14:51:51 +00:00
<template #end>
2023-04-19 07:58:20 +00:00
<Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-times" severity="danger" />
2023-04-10 14:51:51 +00:00
</template>
</Toolbar>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
2023-09-22 12:54:14 +00:00
basic: `
<TabView>
2023-04-19 08:13:06 +00:00
<Toolbar
:pt="{
root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
}">
2023-04-10 14:51:51 +00:00
<template #start>
2023-04-19 07:58:20 +00:00
<Button label="New" icon="pi pi-plus" class="p-button-help" />
2023-04-10 14:51:51 +00:00
</template>
2023-04-19 07:58:20 +00:00
2023-04-10 14:51:51 +00:00
<template #end>
2023-04-19 07:58:20 +00:00
<Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-times" severity="danger" />
2023-04-10 14:51:51 +00:00
</template>
</Toolbar>
2023-10-15 09:38:39 +00:00
</TabView>
`,
2023-09-22 12:54:14 +00:00
options: `
<template>
2023-04-10 14:51:51 +00:00
<div class="card">
2023-04-19 08:13:06 +00:00
<Toolbar
:pt="{
root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
}">
2023-04-10 14:51:51 +00:00
<template #start>
2023-04-19 07:58:20 +00:00
<Button label="New" icon="pi pi-plus" class="p-button-help" />
2023-04-10 14:51:51 +00:00
</template>
2023-04-19 07:58:20 +00:00
2023-04-10 14:51:51 +00:00
<template #end>
2023-04-19 07:58:20 +00:00
<Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-times" severity="danger" />
2023-04-10 14:51:51 +00:00
</template>
</Toolbar>
</div>
2023-10-15 09:38:39 +00:00
</template>
`,
2023-09-22 12:54:14 +00:00
composition: `
<template>
2023-04-10 14:51:51 +00:00
<div class="card">
2023-04-19 08:13:06 +00:00
<Toolbar
:pt="{
root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
}">
2023-04-10 14:51:51 +00:00
<template #start>
2023-04-19 07:58:20 +00:00
<Button label="New" icon="pi pi-plus" class="p-button-help" />
2023-04-10 14:51:51 +00:00
</template>
2023-04-19 07:58:20 +00:00
2023-04-10 14:51:51 +00:00
<template #end>
2023-04-19 07:58:20 +00:00
<Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-times" severity="danger" />
2023-04-10 14:51:51 +00:00
</template>
</Toolbar>
</div>
2023-11-01 14:36:59 +00:00
</template>
`
2023-04-10 14:51:51 +00:00
}
};
}
};
</script>