Docs for badges
cagataycivici
parent
b936c9a135
commit
0950aadc65
|
|
@ -640,8 +640,9 @@ a {
|
|||
font-size: 14px;
|
||||
padding: 2px 4px;
|
||||
letter-spacing: .5px;
|
||||
color: #2f9c0a;
|
||||
color: #257908;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Demo Tabs Source */
|
||||
|
|
|
|||
|
|
@ -4,4 +4,6 @@ export declare class Button extends Vue {
|
|||
label?: string;
|
||||
icon?: string;
|
||||
iconPos?: string;
|
||||
badge?: string;
|
||||
badgeClass?: string;
|
||||
}
|
||||
|
|
@ -16,10 +16,10 @@
|
|||
<span class="p-badge p-badge-warning">12</span>
|
||||
<span class="p-badge p-badge-danger">3</span>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Tags</h3>
|
||||
<div class="badges">
|
||||
<span class="p-tag">Primary</span>
|
||||
<span class="p-tag">Primary</span>
|
||||
<span class="p-tag p-tag-success">Success</span>
|
||||
<span class="p-tag p-tag-info">Info</span>
|
||||
<span class="p-tag p-tag-warning">Warning</span>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
<h3>Inline Button Badge</h3>
|
||||
<Button type="button" label="Emails" badge="8" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-class-error" />
|
||||
|
||||
<h3>Sizes</h3>
|
||||
<div class="badges">
|
||||
|
|
@ -61,7 +61,6 @@
|
|||
<h1>Heading 1 <span class="p-tag p-tag-success">New</span></h1>
|
||||
<h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<BadgeDoc />
|
||||
|
|
|
|||
|
|
@ -2,46 +2,70 @@
|
|||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h3>Import</h3>
|
||||
<CodeHighlight lang="javascript">
|
||||
import InputText from 'primevue/inputtext';
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
<p>A model can be bound using the standard v-model directive.</p>
|
||||
<p>A badge is offered as pure css rather than a component.</p>
|
||||
|
||||
<h3>Numbers</h3>
|
||||
<p>Use <i>.p-badge</i> class to display numbers inside badges.</p>
|
||||
<CodeHighlight>
|
||||
<InputText type="text" v-model="value" />
|
||||
<span class="p-badge">2</span>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Float Label</h3>
|
||||
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
|
||||
<h3>Tags</h3>
|
||||
<p>Tags are optimized for text rather than number and used with the <i>.p-tag</i> class. For more rounded styling like pills, add the <i>.p-tag-rounded</i> class</p>
|
||||
<CodeHighlight>
|
||||
<span class="p-float-label">
|
||||
<InputText id="username" type="text" v-model="value" />
|
||||
<label for="username">Username</label>
|
||||
<span class="p-tag">New</span>
|
||||
<span class="p-tag p-tag-rounded">New</span>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Severities</h3>
|
||||
<p>Different options are available as severity levels with.</p>
|
||||
|
||||
<ul>
|
||||
<li>.p-badge-secondary</li>
|
||||
<li>.p-badge-success</li>
|
||||
<li>.p-badge-info</li>
|
||||
<li>.p-badge-warning</li>
|
||||
<li>.p-badge-danger</li>
|
||||
</ul>
|
||||
|
||||
<h3>Positoning</h3>
|
||||
<p>A badge can easily be positioned relative to another element when both are wrapped inside an element with <i>p-overlay-badge</i> class.</p>
|
||||
<CodeHighlight>
|
||||
<span class="p-overlay-badge">
|
||||
<span class="p-badge">2</span>
|
||||
<i class="pi pi-bell" style="font-size: 2em"></i>
|
||||
</span>
|
||||
|
||||
<span class="p-overlay-badge">
|
||||
<span class="p-badge p-badge-warning">5</span>
|
||||
<Button type="button" label="New" />
|
||||
</span>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Icons</h3>
|
||||
<p>An icon can be integrated within an input field by wrapping the input and the icon with an element having either <i>p-input-icon-right</i>
|
||||
or <i>p-input-icon-left</i> class depending on the icon location.</p>
|
||||
<CodeHighlight>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText type="text" v-model="value1" placeholder="Search" />
|
||||
</span>
|
||||
<h3>Inline Button Badges</h3>
|
||||
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
|
||||
|
||||
<span class="p-input-icon-right">
|
||||
<i class="pi pi-spin pi-spinner" />
|
||||
<InputText type="text" v-model="value2" />
|
||||
</span>
|
||||
<CodeHighlight>
|
||||
<Button type="button" label="Emails" badge="8" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-class-error" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
<p>InputText passes any valid attribute to the underlying input element.</p>
|
||||
<h3>Sizes</h3>
|
||||
<p>Badge sizes are adjusted according to their font size.</p>
|
||||
<CodeHighlight>
|
||||
<span class="p-badge" style="font-size: 1em">2</span>
|
||||
<span class="p-badge p-badge-success" style="font-size: 1.25em">8</span>
|
||||
<span class="p-badge p-badge-info" style="font-size: 1.5em">4</span>
|
||||
<span class="p-badge p-badge-warning" style="font-size: 1.75em">12</span>
|
||||
<span class="p-badge p-badge-danger" style="font-size: 2em">3</span>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
|
||||
<p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
|
||||
<CodeHighlight>
|
||||
<h1>Heading 1 <span class="p-tag p-tag-success">New</span></h1>
|
||||
<h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2>
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
|
|
@ -54,10 +78,22 @@ import InputText from 'primevue/inputtext';
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-inputtext</td>
|
||||
<td>Input element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-badge</td>
|
||||
<td>Badge element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-tag</td>
|
||||
<td>Tag element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-tag-rounded</td>
|
||||
<td>Rounded tag element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-overlay-badge</td>
|
||||
<td>Wrapper of a badge and its target.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -67,60 +103,65 @@ import InputText from 'primevue/inputtext';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/badge" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3 class="first">Basic</h3>
|
||||
<InputText type="text" v-model="value1" />
|
||||
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||
<h3>Numbers</h3>
|
||||
<div class="badges">
|
||||
<span class="p-badge">2</span>
|
||||
<span class="p-badge p-badge-success">8</span>
|
||||
<span class="p-badge p-badge-info">4</span>
|
||||
<span class="p-badge p-badge-warning">12</span>
|
||||
<span class="p-badge p-badge-danger">3</span>
|
||||
</div>
|
||||
|
||||
<h3>Floating Label</h3>
|
||||
<span class="p-float-label">
|
||||
<InputText id="username" type="text" v-model="value2" />
|
||||
<label for="username">Username</label>
|
||||
<h3>Tags</h3>
|
||||
<div class="badges">
|
||||
<span class="p-tag">Primary</span>
|
||||
<span class="p-tag p-tag-success">Success</span>
|
||||
<span class="p-tag p-tag-info">Info</span>
|
||||
<span class="p-tag p-tag-warning">Warning</span>
|
||||
<span class="p-tag p-tag-danger">Danger</span>
|
||||
</div>
|
||||
|
||||
<h3>Pills</h3>
|
||||
<div class="badges">
|
||||
<span class="p-tag p-tag-rounded">Primary</span>
|
||||
<span class="p-tag p-tag-rounded p-tag-success">Success</span>
|
||||
<span class="p-tag p-tag-rounded p-tag-info">Info</span>
|
||||
<span class="p-tag p-tag-rounded p-tag-warning">Warning</span>
|
||||
<span class="p-tag p-tag-rounded p-tag-danger">Danger</span>
|
||||
</div>
|
||||
|
||||
<h3>Positioned Badge</h3>
|
||||
<span class="p-overlay-badge">
|
||||
<span class="p-badge">2</span>
|
||||
<i class="pi pi-bell" style="font-size: 2em"></i>
|
||||
</span>
|
||||
|
||||
<h3>Left Icon</h3>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText type="text" v-model="value3" placeholder="Search" />
|
||||
<span class="p-overlay-badge">
|
||||
<span class="p-badge p-badge-warning">5</span>
|
||||
<Button type="button" label="New" />
|
||||
</span>
|
||||
|
||||
<h3>Right Icon</h3>
|
||||
<span class="p-input-icon-right">
|
||||
<i class="pi pi-spin pi-spinner" />
|
||||
<InputText type="text" v-model="value4" />
|
||||
</span>
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<InputText type="text" v-model="value5" disabled />
|
||||
|
||||
<h3>Invalid</h3>
|
||||
<InputText type="text" class="p-error" />
|
||||
<h3>Inline Button Badge</h3>
|
||||
<Button type="button" label="Emails" badge="8" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-class-error" />
|
||||
|
||||
<h3>Sizes</h3>
|
||||
<div class="component-sizes">
|
||||
<InputText type="text" class="p-component-sm" placeholder="Small" />
|
||||
<InputText type="text" placeholder="Normal" />
|
||||
<InputText type="text" class="p-component-lg" placeholder="Large" />
|
||||
<div class="badges">
|
||||
<span class="p-badge" style="font-size: 1em">2</span>
|
||||
<span class="p-badge p-badge-success" style="font-size: 1.25em">8</span>
|
||||
<span class="p-badge p-badge-info" style="font-size: 1.5em">4</span>
|
||||
<span class="p-badge p-badge-warning" style="font-size: 1.75em">12</span>
|
||||
<span class="p-badge p-badge-danger" style="font-size: 2em">3</span>
|
||||
|
||||
<h1>Heading 1 <span class="p-tag p-tag-success">New</span></h1>
|
||||
<h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: 'PrimeVue'
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
|
|
|
|||
|
|
@ -40,6 +40,10 @@
|
|||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||
|
||||
<h3>Badges</h3>
|
||||
<Button type="button" label="Emails" badge="8" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" />
|
||||
|
||||
<h3>Button Set</h3>
|
||||
<span class="p-buttonset">
|
||||
<Button label="Save" icon="pi pi-check" />
|
||||
|
|
|
|||
|
|
@ -61,6 +61,14 @@ import Button from 'primevue/button';
|
|||
<p>Use "p-button-link" class to render the button as a link.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Link" class="p-button-link" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Badges</h3>
|
||||
<p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
<Button type="button" label="Emails" badge="8" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>ButtonSet</h3>
|
||||
|
|
@ -103,6 +111,18 @@ import Button from 'primevue/button';
|
|||
<td>string</td>
|
||||
<td>left</td>
|
||||
<td>Position of the icon, valid values are "left" and "right".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>badge</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Value of the badge.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>badgeClass</td>
|
||||
<td>string</td>
|
||||
<td>p-badge-secondary</td>
|
||||
<td>Style class of the badge.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -177,6 +197,10 @@ import Button from 'primevue/button';
|
|||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||
|
||||
<h3>Badges</h3>
|
||||
<Button type="button" label="Emails" badge="8" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" />
|
||||
|
||||
<h3>ButtonSet</h3>
|
||||
<span class="p-buttonset">
|
||||
<Button label="Save" icon="pi pi-check" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue