Initated Calendar
cagataycivici
parent
1c82cffa6f
commit
bf9c810f71
|
|
@ -9,6 +9,7 @@
|
|||
<div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}">
|
||||
<div>
|
||||
<router-link to="/autocomplete">● AutoComplete</router-link>
|
||||
<router-link to="/calendar">● Calendar</router-link>
|
||||
<router-link to="/checkbox">● Checkbox</router-link>
|
||||
<router-link to="/chips">● Chips</router-link>
|
||||
<router-link to="/dropdown">● Dropdown</router-link>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,425 @@
|
|||
<template>
|
||||
<span :class="containerClass">
|
||||
<CalendarInputText v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" />
|
||||
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger p-calendar-button" :disabled="$attrs.disabled" />
|
||||
<div :class="panelStyleClass">
|
||||
<div class="p-datepicker-group" v-for="(month,i) of months" :key="month.month + month.year">
|
||||
<div class="p-datepicker-header">
|
||||
<button class="p-datepicker-prev p-link" v-if="i === 0">
|
||||
<span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
|
||||
</button>
|
||||
<button class="p-datepicker-next p-link" v-if="numberOfMonths === 1 ? true : (i === numberOfMonths -1)">
|
||||
<span class="p-datepicker-next-icon pi pi-chevron-right"></span>
|
||||
</button>
|
||||
<div class="p-datepicker-title">
|
||||
<span class="p-datepicker-month" v-if="monthNavigator && (view !== 'month')">{{locale.monthNames[month.month]}}</span>
|
||||
<span class="p-datepicker-year" v-if="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-datepicker-calendar-container" *ngIf="view ==='date'">
|
||||
<table class="p-datepicker-calendar">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" *ngFor="let weekDay of weekDays;let begin = first; let end = last">
|
||||
<span>{{weekDay}}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="week of month.dates" :key="week[0].day + week[0].month">
|
||||
<td v-for="date of week" :key="date.day" :class="{'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today}">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InputText from '../inputtext/InputText';
|
||||
import Button from '../button/Button';
|
||||
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
value: null,
|
||||
timeOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'pi pi-calendar'
|
||||
},
|
||||
numberOfMonths: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
view: {
|
||||
type: String,
|
||||
default: 'date'
|
||||
},
|
||||
touchUI: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
monthNavigator: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
yearNavigator: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
panelClass: String,
|
||||
panelStyle: null,
|
||||
locale: {
|
||||
type: Object,
|
||||
default: {
|
||||
firstDayOfWeek: 0,
|
||||
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
||||
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||
dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
|
||||
monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
|
||||
monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
|
||||
today: 'Today',
|
||||
clear: 'Clear',
|
||||
dateFormat: 'mm/dd/yy'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
listeners() {
|
||||
return {
|
||||
...this.$listeners,
|
||||
input: event => {
|
||||
this.$emit('input', event)
|
||||
}
|
||||
};
|
||||
},
|
||||
containerClass() {
|
||||
return [
|
||||
'p-calendar',
|
||||
{
|
||||
'p-calendar-w-btn': this.showIcon,
|
||||
'p-calendar-timeonly': this.timeOnly,
|
||||
'p-inputwrapper-filled': this.value
|
||||
}
|
||||
];
|
||||
},
|
||||
panelStyleClass() {
|
||||
return [
|
||||
'p-datepicker p-component',
|
||||
{
|
||||
'p-datepicker-inline': this.inline,
|
||||
'p-input-overlay': !this.inline,
|
||||
'p-shadow': !this.inline,
|
||||
'p-disabled': this.$attrs.disabled,
|
||||
'p-datepicker-timeonly': this.timeOnly,
|
||||
'p-datepicker-multiple-month': this.numberOfMonths > 1,
|
||||
'p-datepicker-monthpicker': (this.view === 'month'),
|
||||
'p-datepicker-touch-ui': this.touchUI
|
||||
}
|
||||
];
|
||||
},
|
||||
inputFieldValue() {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'CalendarInputText': InputText,
|
||||
'CalendarButton': Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-calendar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.p-calendar .p-calendar-button {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
width: 2em;
|
||||
border-left: 0 none;
|
||||
}
|
||||
|
||||
.p-calendar .p-calendar-button:enabled:hover,
|
||||
.p-calendar .p-calendar-button:focus {
|
||||
border-left: 0 none;
|
||||
}
|
||||
|
||||
.p-calendar .p-datepicker {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
/* Fluid */
|
||||
.p-fluid .p-calendar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-calendar-button {
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.p-fluid .p-datepicker-buttonbar button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
|
||||
width: calc(100% - 2em);
|
||||
}
|
||||
|
||||
/* Datepicker */
|
||||
.p-datepicker {
|
||||
width: auto;
|
||||
padding: .2em;
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.p-datepicker.p-datepicker-inline {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.p-datepicker .p-datepicker-group {
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.p-datepicker .p-datepicker-header {
|
||||
position: relative;
|
||||
padding: .5em 0;
|
||||
}
|
||||
.p-datepicker .p-datepicker-prev,
|
||||
.p-datepicker .p-datepicker-next {
|
||||
position: absolute;
|
||||
top: .5em;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-datepicker .p-datepicker-prev {
|
||||
left: .125em;
|
||||
}
|
||||
.p-datepicker .p-datepicker-next {
|
||||
right: .125em;
|
||||
}
|
||||
|
||||
.p-datepicker .p-datepicker-prev span,
|
||||
.p-datepicker .p-datepicker-next span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-top: -.5em;
|
||||
margin-left: -.5em;
|
||||
}
|
||||
|
||||
.p-datepicker .p-datepicker-title {
|
||||
margin: 0 2.3em;
|
||||
line-height: 1.8em;
|
||||
text-align: center;
|
||||
}
|
||||
.p-datepicker .p-datepicker-title select {
|
||||
font-size: 1em;
|
||||
margin: .125em 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.p-datepicker select.p-datepicker-month {
|
||||
margin-right: .25em;
|
||||
}
|
||||
.p-datepicker span.p-datepicker-year {
|
||||
margin-left: .25em;
|
||||
}
|
||||
|
||||
/* Multiple Month DatePicker */
|
||||
.p-datepicker-multiple-month .p-datepicker-group {
|
||||
display: table-cell;
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
/* DatePicker Table */
|
||||
.p-datepicker table {
|
||||
width: 100%;
|
||||
font-size: .9em;
|
||||
border-collapse: collapse;
|
||||
margin: 0 0 .4em;
|
||||
}
|
||||
.p-datepicker th {
|
||||
padding: .5em;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
}
|
||||
.p-datepicker td {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.p-datepicker td > span,
|
||||
.p-datepicker td > a {
|
||||
display: block;
|
||||
padding: .5em;
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-datepicker td a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-datepicker .p-datepicker-buttonbar,
|
||||
.p-datepicker .p-datepicker-footer {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.p-datepicker .p-datepicker-buttonbar:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.p-datepicker .p-datepicker-buttonbar > button:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.p-calendar.p-calendar-w-btn input {
|
||||
-moz-border-radius-topright: 0px;
|
||||
-webkit-border-top-right-radius: 0px;
|
||||
-khtml-border-top-right-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
-moz-border-radius-bottomright: 0px;
|
||||
-webkit-border-bottom-right-radius: 0px;
|
||||
-khtml-border-bottom-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
/* Month Picker */
|
||||
.p-monthpicker .p-monthpicker-month {
|
||||
width: 33.3%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: .5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-datepicker-monthpicker select.p-datepicker-year {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Time Picker */
|
||||
.p-timepicker {
|
||||
text-align: center;
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
.p-timepicker > div {
|
||||
display: inline-block;
|
||||
margin-left: .5em;
|
||||
min-width: 1.5em;
|
||||
}
|
||||
|
||||
.p-timepicker > .p-minute-picker,
|
||||
.p-timepicker > .p-second-picker {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.p-timepicker > .p-separator {
|
||||
margin-left: 0px;
|
||||
min-width: .75em;
|
||||
}
|
||||
|
||||
.p-timepicker > .p-separator .p-separator-spacer {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-timepicker > div button {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-timepicker > div button:last-child {
|
||||
margin-top: .3em;
|
||||
}
|
||||
|
||||
input[type=text]::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Touch UI */
|
||||
.p-datepicker-touch-ui,
|
||||
.p-calendar .p-datepicker-touch-ui {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 80vw;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.p-datepicker-touch-ui.p-datepicker th {
|
||||
padding: 2em 0;
|
||||
}
|
||||
.p-datepicker-touch-ui.p-datepicker td {
|
||||
padding: 0;
|
||||
}
|
||||
.p-datepicker-touch-ui.p-datepicker td span,
|
||||
.p-datepicker-touch-ui.p-datepicker td a {
|
||||
padding: 2em 0;
|
||||
}
|
||||
|
||||
.p-datepicker-touch-ui .p-timepicker {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.p-datepicker-touch-ui .p-timepicker > div a {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.p-datepicker-mask {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
.p-datepicker-multiple-month {
|
||||
width: 17em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-datepicker-touch-ui.p-datepicker th {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.p-datepicker-touch-ui.p-datepicker td span,
|
||||
.p-datepicker-touch-ui.p-datepicker td a {
|
||||
padding: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -5,6 +5,7 @@ import AutoComplete from './components/autocomplete/AutoComplete';
|
|||
import Accordion from './components/accordion/Accordion';
|
||||
import AccordionTab from './components/accordion/AccordionTab';
|
||||
import Button from './components/button/Button';
|
||||
import Calendar from './components/calendar/Calendar';
|
||||
import Card from './components/card/Card';
|
||||
import Chart from './components/chart/Chart';
|
||||
import Checkbox from './components/checkbox/Checkbox';
|
||||
|
|
@ -57,6 +58,7 @@ Vue.component('Accordion', Accordion);
|
|||
Vue.component('AccordionTab', AccordionTab);
|
||||
Vue.component('AutoComplete', AutoComplete);
|
||||
Vue.component('Button', Button);
|
||||
Vue.component('Calendar', Calendar);
|
||||
Vue.component('Card', Card);
|
||||
Vue.component('Chart', Chart);
|
||||
Vue.component('Checkbox', Checkbox);
|
||||
|
|
|
|||
|
|
@ -26,6 +26,11 @@ export default new Router({
|
|||
name: 'button',
|
||||
component: () => import('./views/button/ButtonDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/calendar',
|
||||
name: 'calendar',
|
||||
component: () => import('./views/calendar/CalendarDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/card',
|
||||
name: 'card',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Calendar</h1>
|
||||
<p>Calendar is an input component to select a date.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Basic</h3>
|
||||
<Calendar v-model="date1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CalendarDoc />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CalendarDoc from './CalendarDoc'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date1: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'CalendarDoc': CalendarDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h3>Import</h3>
|
||||
<CodeHighlight lang="javascript">
|
||||
import Button from 'primevue/button';
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
<p>Button is created using the Button element.</p>
|
||||
<CodeHighlight>
|
||||
<Button />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Label</h3>
|
||||
<p>Text of the button is defined using the <i>label</i> property.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Click" />
|
||||
</CodeHighlight>
|
||||
<h3>Icons</h3>
|
||||
<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
|
||||
icon position is "left" and alternative is "right". To display only an icon, leave label as undefined.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Events are defined with the standard notation.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Click" @click="handleClick($event)"/>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Severity</h3>
|
||||
<p>Different color options are available as severity levels.</p>
|
||||
|
||||
<ul>
|
||||
<li>.p-button-secondary</li>
|
||||
<li>.p-button-success</li>
|
||||
<li>.p-button-info</li>
|
||||
<li>.p-button-warning</li>
|
||||
<li>.p-button-danger</li>
|
||||
</ul>
|
||||
|
||||
<CodeHighlight>
|
||||
<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="Danger" class="p-button-danger" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Raised and Rounded Buttons</h3>
|
||||
<p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Primary" class="p-button-raised p-button-rounded" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>label</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Text of the button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>icon</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Name of the icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>iconPos</td>
|
||||
<td>string</td>
|
||||
<td>left</td>
|
||||
<td>Position of the icon, valid values are "left" and "right".</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Styling</h3>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-button</td>
|
||||
<td>Button element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-button-icon</td>
|
||||
<td>Icon element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-button-text</td>
|
||||
<td>Label element of the button</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/button" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Button</h1>
|
||||
<p>Button is an extension to standard button element with icons and theming.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Button label="Click" />
|
||||
<Button label="Click" icon="pi pi-check" />
|
||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||
<Button icon="pi pi-check" />
|
||||
<Button label="Click" disabled="disabled" />
|
||||
|
||||
<h3>Severities</h3>
|
||||
<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="Danger" class="p-button-danger" />
|
||||
|
||||
<h3>Raised Buttons</h3>
|
||||
<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="Danger" class="p-button-raised p-button-danger" />
|
||||
|
||||
<h3>Rounded Buttons</h3>
|
||||
<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="Danger" class="p-button-rounded p-button-danger" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
button {
|
||||
margin-right: .5em;
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue