Button docs updated
Tuğçe Küçükoğlu
parent
108a88c814
commit
3295bf9357
|
|
@ -5,52 +5,52 @@
|
|||
<div class="card">
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger" aria-label="Cancel" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-outlined" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-outlined" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-outlined" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-outlined" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-outlined" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-outlined" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" rounded outlined aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" rounded outlined aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-text p-button-raised" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text p-button-raised" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text p-button-raised" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text p-button-raised" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text p-button-raised" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text p-button-raised" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text p-button-raised" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" text raised rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" text raised rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-text" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" text rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" text rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -62,106 +62,96 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger" aria-label="Cancel" />
|
||||
</div>
|
||||
<Button icon="pi pi-check" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded" aria-label="Cancel" />
|
||||
</div>
|
||||
<Button icon="pi pi-check" rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-outlined" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-outlined" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-outlined" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-outlined" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-outlined" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-outlined" aria-label="Cancel" />
|
||||
</div>
|
||||
<Button icon="pi pi-check" rounded outlined aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" rounded outlined aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-text p-button-raised" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text p-button-raised" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text p-button-raised" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text p-button-raised" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text p-button-raised" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text p-button-raised" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text p-button-raised" aria-label="Cancel" />
|
||||
</div>
|
||||
<Button icon="pi pi-check" text raised rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" text raised rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-text" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text" aria-label="Cancel" />
|
||||
</div>`,
|
||||
<Button icon="pi pi-check" text rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" text rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger" aria-label="Cancel" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-outlined" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-outlined" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-outlined" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-outlined" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-outlined" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-outlined" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" rounded outlined aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" rounded outlined aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-text p-button-raised" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text p-button-raised" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text p-button-raised" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text p-button-raised" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text p-button-raised" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text p-button-raised" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text p-button-raised" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" text raised rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" text raised rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-text" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" text rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" text rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -173,52 +163,52 @@ export default {
|
|||
<div class="card">
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger" aria-label="Cancel" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-outlined" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-outlined" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-outlined" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-outlined" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-outlined" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-outlined" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" rounded outlined aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" rounded outlined aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-text p-button-raised" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text p-button-raised" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text p-button-raised" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text p-button-raised" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text p-button-raised" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text p-button-raised" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text p-button-raised" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" text raised rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" text raised rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-content-center gap-3">
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-text" aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text" aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text" aria-label="Search" />
|
||||
<Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text" aria-label="User" />
|
||||
<Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text" aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text" aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text" aria-label="Cancel" />
|
||||
<Button icon="pi pi-check" text rounded aria-label="Filter" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
|
||||
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
|
||||
<Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
|
||||
<Button icon="pi pi-bell" severity="warning" text rounded aria-label="Notification" />
|
||||
<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
|
||||
<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A button can be rendered as a link by adding <i>p-button-link</i> class.</p>
|
||||
<p>A button can be rendered as a link as well.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Link" class="p-button-link" />
|
||||
<Button label="Link" link />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -14,11 +14,11 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Link" class="p-button-link" />`,
|
||||
<Button label="Link" link />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Link" class="p-button-link" />
|
||||
<Button label="Link" link />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Link" class="p-button-link" />
|
||||
<Button label="Link" link />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
<p>Outlined buttons display a border without a background initially.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-outlined" />
|
||||
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
|
||||
<Button label="Success" class="p-button-outlined p-button-success" />
|
||||
<Button label="Info" class="p-button-outlined p-button-info" />
|
||||
<Button label="Warning" class="p-button-outlined p-button-warning" />
|
||||
<Button label="Help" class="p-button-outlined p-button-help" />
|
||||
<Button label="Danger" class="p-button-outlined p-button-danger" />
|
||||
<Button label="Primary" outlined />
|
||||
<Button label="Secondary" severity="secondary" outlined />
|
||||
<Button label="Success" severity="success" outlined />
|
||||
<Button label="Info" severity="info" outlined />
|
||||
<Button label="Warning" severity="warning" outlined />
|
||||
<Button label="Help" severity="help" outlined />
|
||||
<Button label="Danger" severity="danger" outlined />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -20,23 +20,23 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Primary" class="p-button-outlined" />
|
||||
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
|
||||
<Button label="Success" class="p-button-outlined p-button-success" />
|
||||
<Button label="Info" class="p-button-outlined p-button-info" />
|
||||
<Button label="Warning" class="p-button-outlined p-button-warning" />
|
||||
<Button label="Help" class="p-button-outlined p-button-help" />
|
||||
<Button label="Danger" class="p-button-outlined p-button-danger" />`,
|
||||
<Button label="Primary" outlined />
|
||||
<Button label="Secondary" severity="secondary" outlined />
|
||||
<Button label="Success" severity="success" outlined />
|
||||
<Button label="Info" severity="info" outlined />
|
||||
<Button label="Warning" severity="warning" outlined />
|
||||
<Button label="Help" severity="help" outlined />
|
||||
<Button label="Danger" severity="danger" outlined />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-outlined" />
|
||||
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
|
||||
<Button label="Success" class="p-button-outlined p-button-success" />
|
||||
<Button label="Info" class="p-button-outlined p-button-info" />
|
||||
<Button label="Warning" class="p-button-outlined p-button-warning" />
|
||||
<Button label="Help" class="p-button-outlined p-button-help" />
|
||||
<Button label="Danger" class="p-button-outlined p-button-danger" />
|
||||
<Button label="Primary" outlined />
|
||||
<Button label="Secondary" severity="secondary" outlined />
|
||||
<Button label="Success" severity="success" outlined />
|
||||
<Button label="Info" severity="info" outlined />
|
||||
<Button label="Warning" severity="warning" outlined />
|
||||
<Button label="Help" severity="help" outlined />
|
||||
<Button label="Danger" severity="danger" outlined />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -45,13 +45,13 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-outlined" />
|
||||
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
|
||||
<Button label="Success" class="p-button-outlined p-button-success" />
|
||||
<Button label="Info" class="p-button-outlined p-button-info" />
|
||||
<Button label="Warning" class="p-button-outlined p-button-warning" />
|
||||
<Button label="Help" class="p-button-outlined p-button-help" />
|
||||
<Button label="Danger" class="p-button-outlined p-button-danger" />
|
||||
<Button label="Primary" outlined />
|
||||
<Button label="Secondary" severity="secondary" outlined />
|
||||
<Button label="Success" severity="success" outlined />
|
||||
<Button label="Info" severity="info" outlined />
|
||||
<Button label="Warning" severity="warning" outlined />
|
||||
<Button label="Help" severity="help" outlined />
|
||||
<Button label="Danger" severity="danger" outlined />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
<p>Raised buttons display a shadow to indicate elevation.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||
<Button label="Help" class="p-button-raised p-button-help" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||
<Button label="Primary" raised />
|
||||
<Button label="Secondary" severity="secondary" raised />
|
||||
<Button label="Success" severity="success" raised />
|
||||
<Button label="Info" severity="info" raised />
|
||||
<Button label="Warning" severity="warning" raised />
|
||||
<Button label="Help" severity="help" raised />
|
||||
<Button label="Danger" severity="danger" raised />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -20,23 +20,23 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Primary" class="p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||
<Button label="Help" class="p-button-raised p-button-help" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger" />`,
|
||||
<Button label="Primary" raised />
|
||||
<Button label="Secondary" severity="secondary" raised />
|
||||
<Button label="Success" severity="success" raised />
|
||||
<Button label="Info" severity="info" raised />
|
||||
<Button label="Warning" severity="warning" raised />
|
||||
<Button label="Help" severity="help" raised />
|
||||
<Button label="Danger" severity="danger" raised />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||
<Button label="Help" class="p-button-raised p-button-help" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||
<Button label="Primary" raised />
|
||||
<Button label="Secondary" severity="secondary" raised />
|
||||
<Button label="Success" severity="success" raised />
|
||||
<Button label="Info" severity="info" raised />
|
||||
<Button label="Warning" severity="warning" raised />
|
||||
<Button label="Help" severity="help" raised />
|
||||
<Button label="Danger" severity="danger" raised />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -45,13 +45,13 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||
<Button label="Help" class="p-button-raised p-button-help" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||
<Button label="Primary" raised />
|
||||
<Button label="Secondary" severity="secondary" raised />
|
||||
<Button label="Success" severity="success" raised />
|
||||
<Button label="Info" severity="info" raised />
|
||||
<Button label="Warning" severity="warning" raised />
|
||||
<Button label="Help" severity="help" raised />
|
||||
<Button label="Danger" severity="danger" raised />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
<p>Text buttons can be displayed as raised as well for elevation.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-text p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-text p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-text p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-text p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-text p-button-raised p-button-warning" />
|
||||
<Button label="Help" class="p-button-text p-button-raised p-button-help" />
|
||||
<Button label="Danger" class="p-button-text p-button-raised p-button-danger" />
|
||||
<Button label="Primary" text raised />
|
||||
<Button label="Secondary" severity="secondary" text raised />
|
||||
<Button label="Success" severity="success" text raised />
|
||||
<Button label="Info" severity="info" text raised />
|
||||
<Button label="Warning" severity="warning" text raised />
|
||||
<Button label="Help" severity="help" text raised />
|
||||
<Button label="Danger" severity="danger" text raised />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -20,23 +20,23 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Primary" class="p-button-text p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-text p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-text p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-text p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-text p-button-raised p-button-warning" />
|
||||
<Button label="Help" class="p-button-text p-button-raised p-button-help" />
|
||||
<Button label="Danger" class="p-button-text p-button-raised p-button-danger" />`,
|
||||
<Button label="Primary" text raised />
|
||||
<Button label="Secondary" severity="secondary" text raised />
|
||||
<Button label="Success" severity="success" text raised />
|
||||
<Button label="Info" severity="info" text raised />
|
||||
<Button label="Warning" severity="warning" text raised />
|
||||
<Button label="Help" severity="help" text raised />
|
||||
<Button label="Danger" severity="danger" text raised />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-text p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-text p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-text p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-text p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-text p-button-raised p-button-warning" />
|
||||
<Button label="Help" class="p-button-text p-button-raised p-button-help" />
|
||||
<Button label="Danger" class="p-button-text p-button-raised p-button-danger" />
|
||||
<Button label="Primary" text raised />
|
||||
<Button label="Secondary" severity="secondary" text raised />
|
||||
<Button label="Success" severity="success" text raised />
|
||||
<Button label="Info" severity="info" text raised />
|
||||
<Button label="Warning" severity="warning" text raised />
|
||||
<Button label="Help" severity="help" text raised />
|
||||
<Button label="Danger" severity="danger" text raised />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -45,13 +45,13 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-text p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-text p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-text p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-text p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-text p-button-raised p-button-warning" />
|
||||
<Button label="Help" class="p-button-text p-button-raised p-button-help" />
|
||||
<Button label="Danger" class="p-button-text p-button-raised p-button-danger" />
|
||||
<Button label="Primary" text raised />
|
||||
<Button label="Secondary" severity="secondary" text raised />
|
||||
<Button label="Success" severity="success" text raised />
|
||||
<Button label="Info" severity="info" text raised />
|
||||
<Button label="Warning" severity="warning" text raised />
|
||||
<Button label="Help" severity="help" text raised />
|
||||
<Button label="Danger" severity="danger" text raised />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
<p>Rounded buttons have a circular border radius.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-rounded" />
|
||||
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
||||
<Button label="Success" class="p-button-rounded p-button-success" />
|
||||
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||
<Button label="Help" class="p-button-rounded p-button-help" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||
<Button label="Primary" rounded />
|
||||
<Button label="Secondary" severity="secondary" rounded />
|
||||
<Button label="Success" severity="success" rounded />
|
||||
<Button label="Info" severity="info" rounded />
|
||||
<Button label="Warning" severity="warning" rounded />
|
||||
<Button label="Help" severity="help" rounded />
|
||||
<Button label="Danger" severity="danger" rounded />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -20,23 +20,23 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Primary" class="p-button-rounded" />
|
||||
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
||||
<Button label="Success" class="p-button-rounded p-button-success" />
|
||||
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||
<Button label="Help" class="p-button-rounded p-button-help" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger" />`,
|
||||
<Button label="Primary" rounded />
|
||||
<Button label="Secondary" severity="secondary" rounded />
|
||||
<Button label="Success" severity="success" rounded />
|
||||
<Button label="Info" severity="info" rounded />
|
||||
<Button label="Warning" severity="warning" rounded />
|
||||
<Button label="Help" severity="help" rounded />
|
||||
<Button label="Danger" severity="danger" rounded />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-rounded" />
|
||||
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
||||
<Button label="Success" class="p-button-rounded p-button-success" />
|
||||
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||
<Button label="Help" class="p-button-rounded p-button-help" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||
<Button label="Primary" rounded />
|
||||
<Button label="Secondary" severity="secondary" rounded />
|
||||
<Button label="Success" severity="success" rounded />
|
||||
<Button label="Info" severity="info" rounded />
|
||||
<Button label="Warning" severity="warning" rounded />
|
||||
<Button label="Help" severity="help" rounded />
|
||||
<Button label="Danger" severity="danger" rounded />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -45,13 +45,13 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-rounded" />
|
||||
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
||||
<Button label="Success" class="p-button-rounded p-button-success" />
|
||||
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||
<Button label="Help" class="p-button-rounded p-button-help" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||
<Button label="Primary" rounded />
|
||||
<Button label="Secondary" severity="secondary" rounded />
|
||||
<Button label="Success" severity="success" rounded />
|
||||
<Button label="Info" severity="info" rounded />
|
||||
<Button label="Warning" severity="warning" rounded />
|
||||
<Button label="Help" severity="help" rounded />
|
||||
<Button label="Danger" severity="danger" rounded />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Help" class="p-button-help" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
<Button label="Secondary" severity="secondary" />
|
||||
<Button label="Success" severity="success" />
|
||||
<Button label="Info" severity="info" />
|
||||
<Button label="Warning" severity="warning" />
|
||||
<Button label="Help" severity="help" />
|
||||
<Button label="Danger" severity="danger" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -21,22 +21,22 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Help" class="p-button-help" />
|
||||
<Button label="Danger" class="p-button-danger" />`,
|
||||
<Button label="Secondary" severity="secondary" />
|
||||
<Button label="Success" severity="success" />
|
||||
<Button label="Info" severity="info" />
|
||||
<Button label="Warning" severity="warning" />
|
||||
<Button label="Help" severity="help" />
|
||||
<Button label="Danger" severity="danger" />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Help" class="p-button-help" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
<Button label="Secondary" severity="secondary" />
|
||||
<Button label="Success" severity="success" />
|
||||
<Button label="Info" severity="info" />
|
||||
<Button label="Warning" severity="warning" />
|
||||
<Button label="Help" severity="help" />
|
||||
<Button label="Danger" severity="danger" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -46,12 +46,12 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Help" class="p-button-help" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
<Button label="Secondary" severity="secondary" />
|
||||
<Button label="Success" severity="success" />
|
||||
<Button label="Info" severity="info" />
|
||||
<Button label="Warning" severity="warning" />
|
||||
<Button label="Help" severity="help" />
|
||||
<Button label="Danger" severity="danger" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
<p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap align-items-center justify-content-center gap-3">
|
||||
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
|
||||
<Button label="Normal" icon="pi pi-check" class="p-button" />
|
||||
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
|
||||
<Button label="Small" icon="pi pi-check" size="small" />
|
||||
<Button label="Normal" icon="pi pi-check" />
|
||||
<Button label="Large" icon="pi pi-check" size="large" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -16,15 +16,15 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
|
||||
<Button label="Normal" icon="pi pi-check" class="p-button" />
|
||||
<Button label="Large" icon="pi pi-check" class="p-button-lg" />`,
|
||||
<Button label="Small" icon="pi pi-check" size="small" />
|
||||
<Button label="Normal" icon="pi pi-check" />
|
||||
<Button label="Large" icon="pi pi-check" size="large" />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap align-items-center justify-content-center gap-3">
|
||||
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
|
||||
<Button label="Normal" icon="pi pi-check" class="p-button" />
|
||||
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
|
||||
<Button label="Small" icon="pi pi-check" size="small" />
|
||||
<Button label="Normal" icon="pi pi-check" />
|
||||
<Button label="Large" icon="pi pi-check" size="large" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -33,9 +33,9 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap align-items-center justify-content-center gap-3">
|
||||
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
|
||||
<Button label="Normal" icon="pi pi-check" class="p-button" />
|
||||
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
|
||||
<Button label="Small" icon="pi pi-check" size="small" />
|
||||
<Button label="Normal" icon="pi pi-check" />
|
||||
<Button label="Large" icon="pi pi-check" size="large" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
<p>Text buttons are displayed as textual elements.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-text" />
|
||||
<Button label="Secondary" class="p-button-text p-button-secondary" />
|
||||
<Button label="Success" class="p-button-text p-button-success" />
|
||||
<Button label="Info" class="p-button-text p-button-info" />
|
||||
<Button label="Warning" class="p-button-text p-button-warning" />
|
||||
<Button label="Help" class="p-button-text p-button-help" />
|
||||
<Button label="Danger" class="p-button-text p-button-danger" />
|
||||
<Button label="Primary" text />
|
||||
<Button label="Secondary" severity="secondary" text />
|
||||
<Button label="Success" severity="success" text />
|
||||
<Button label="Info" severity="info" text />
|
||||
<Button label="Warning" severity="warning" text />
|
||||
<Button label="Help" severity="help" text />
|
||||
<Button label="Danger" severity="danger" text />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -20,23 +20,23 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Primary" class="p-button-text" />
|
||||
<Button label="Secondary" class="p-button-text p-button-secondary" />
|
||||
<Button label="Success" class="p-button-text p-button-success" />
|
||||
<Button label="Info" class="p-button-text p-button-info" />
|
||||
<Button label="Warning" class="p-button-text p-button-warning" />
|
||||
<Button label="Help" class="p-button-text p-button-help" />
|
||||
<Button label="Danger" class="p-button-text p-button-danger" />`,
|
||||
<Button label="Primary" text />
|
||||
<Button label="Secondary" severity="secondary" text />
|
||||
<Button label="Success" severity="success" text />
|
||||
<Button label="Info" severity="info" text />
|
||||
<Button label="Warning" severity="warning" text />
|
||||
<Button label="Help" severity="help" text />
|
||||
<Button label="Danger" severity="danger" text />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-text" />
|
||||
<Button label="Secondary" class="p-button-text p-button-secondary" />
|
||||
<Button label="Success" class="p-button-text p-button-success" />
|
||||
<Button label="Info" class="p-button-text p-button-info" />
|
||||
<Button label="Warning" class="p-button-text p-button-warning" />
|
||||
<Button label="Help" class="p-button-text p-button-help" />
|
||||
<Button label="Danger" class="p-button-text p-button-danger" />
|
||||
<Button label="Primary" text />
|
||||
<Button label="Secondary" severity="secondary" text />
|
||||
<Button label="Success" severity="success" text />
|
||||
<Button label="Info" severity="info" text />
|
||||
<Button label="Warning" severity="warning" text />
|
||||
<Button label="Help" severity="help" text />
|
||||
<Button label="Danger" severity="danger" text />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -45,13 +45,13 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Button label="Primary" class="p-button-text" />
|
||||
<Button label="Secondary" class="p-button-text p-button-secondary" />
|
||||
<Button label="Success" class="p-button-text p-button-success" />
|
||||
<Button label="Info" class="p-button-text p-button-info" />
|
||||
<Button label="Warning" class="p-button-text p-button-warning" />
|
||||
<Button label="Help" class="p-button-text p-button-help" />
|
||||
<Button label="Danger" class="p-button-text p-button-danger" />
|
||||
<Button label="Primary" text />
|
||||
<Button label="Secondary" severity="secondary" text />
|
||||
<Button label="Success" severity="success" text />
|
||||
<Button label="Info" severity="info" text />
|
||||
<Button label="Warning" severity="warning" text />
|
||||
<Button label="Help" severity="help" text />
|
||||
<Button label="Danger" severity="danger" text />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3662,6 +3662,14 @@
|
|||
"default": "",
|
||||
"description": "Text of the button."
|
||||
},
|
||||
{
|
||||
"name": "link",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "Add a link style to the button."
|
||||
},
|
||||
{
|
||||
"name": "loading",
|
||||
"optional": true,
|
||||
|
|
@ -3678,6 +3686,46 @@
|
|||
"default": "pi pi-spinner pi-spin",
|
||||
"description": "Icon to display in loading state."
|
||||
},
|
||||
{
|
||||
"name": "outlined",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "Add a border class without a background initially."
|
||||
},
|
||||
{
|
||||
"name": "raised",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "Add a shadow to indicate elevation."
|
||||
},
|
||||
{
|
||||
"name": "rounded",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "Add a circular border radius to the button."
|
||||
},
|
||||
{
|
||||
"name": "severity",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "\"success\" | \"info\" | \"warning\" | \"danger\" | \"secondary\"",
|
||||
"default": "",
|
||||
"description": "Defines the style of the button."
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "\"small\" | \"large\"",
|
||||
"default": "",
|
||||
"description": "Defines the size of the button."
|
||||
},
|
||||
{
|
||||
"name": "style",
|
||||
"optional": true,
|
||||
|
|
@ -3685,6 +3733,14 @@
|
|||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Inline style of the button."
|
||||
},
|
||||
{
|
||||
"name": "text",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "Add a textual class to the button without a background initially."
|
||||
}
|
||||
],
|
||||
"methods": [],
|
||||
|
|
@ -22219,7 +22275,7 @@
|
|||
"name": "bottom",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "Bottom position for Tooltip."
|
||||
},
|
||||
|
|
@ -22227,7 +22283,7 @@
|
|||
"name": "focus",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"type": "boolean",
|
||||
"default": "true",
|
||||
"description": "Focus event for Tooltip."
|
||||
},
|
||||
|
|
@ -22235,7 +22291,7 @@
|
|||
"name": "left",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "Left position for Tooltip."
|
||||
},
|
||||
|
|
@ -22243,7 +22299,7 @@
|
|||
"name": "right",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"type": "boolean",
|
||||
"default": "true",
|
||||
"description": "Right position for Tooltip."
|
||||
},
|
||||
|
|
@ -22251,7 +22307,7 @@
|
|||
"name": "top",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "Top position for Tooltip."
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue