From 0950aadc65e70d2183eb308f2ea7b5719be707dd Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Sat, 9 May 2020 12:16:10 +0300 Subject: [PATCH] Docs for badges --- src/assets/styles/app.scss | 3 +- src/components/button/Button.d.ts | 2 + src/views/badge/BadgeDemo.vue | 7 +- src/views/badge/BadgeDoc.vue | 187 ++++++++++++++++++------------ src/views/button/ButtonDemo.vue | 4 + src/views/button/ButtonDoc.vue | 24 ++++ 6 files changed, 149 insertions(+), 78 deletions(-) diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss index 7cd417270..57b6231ef 100644 --- a/src/assets/styles/app.scss +++ b/src/assets/styles/app.scss @@ -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 */ diff --git a/src/components/button/Button.d.ts b/src/components/button/Button.d.ts index a22921953..2832b4e67 100755 --- a/src/components/button/Button.d.ts +++ b/src/components/button/Button.d.ts @@ -4,4 +4,6 @@ export declare class Button extends Vue { label?: string; icon?: string; iconPos?: string; + badge?: string; + badgeClass?: string; } \ No newline at end of file diff --git a/src/views/badge/BadgeDemo.vue b/src/views/badge/BadgeDemo.vue index c68f50de1..52d5cec9b 100644 --- a/src/views/badge/BadgeDemo.vue +++ b/src/views/badge/BadgeDemo.vue @@ -16,10 +16,10 @@ 12 3 - +

Tags

- Primary + Primary Success Info Warning @@ -48,7 +48,7 @@

Inline Button Badge

diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue index e71f3cd3c..86b77b993 100644 --- a/src/views/badge/BadgeDoc.vue +++ b/src/views/badge/BadgeDoc.vue @@ -2,46 +2,70 @@
-

Import

- -import InputText from 'primevue/inputtext'; - -

Getting Started

-

A model can be bound using the standard v-model directive.

+

A badge is offered as pure css rather than a component.

+ +

Numbers

+

Use .p-badge class to display numbers inside badges.

-<InputText type="text" v-model="value" /> +<span class="p-badge">2</span> -

Float Label

-

A floating label is implemented by wrapping the input and the label inside a container having .p-float-label style class.

+

Tags

+

Tags are optimized for text rather than number and used with the .p-tag class. For more rounded styling like pills, add the .p-tag-rounded class

-<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> + + +

Severities

+

Different options are available as severity levels with.

+ +
    +
  • .p-badge-secondary
    • +
  • .p-badge-success
    • +
  • .p-badge-info
    • +
  • .p-badge-warning
    • +
  • .p-badge-danger
    • +
+ +

Positoning

+

A badge can easily be positioned relative to another element when both are wrapped inside an element with p-overlay-badge class.

+ +<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> -

Icons

-

An icon can be integrated within an input field by wrapping the input and the icon with an element having either p-input-icon-right - or p-input-icon-left class depending on the icon location.

- -<span class="p-input-icon-left"> - <i class="pi pi-search" /> - <InputText type="text" v-model="value1" placeholder="Search" /> -</span> +

Inline Button Badges

+

Buttons provide integrated badge support with the badge and badgeClass properties.

-<span class="p-input-icon-right"> - <i class="pi pi-spin pi-spinner" /> - <InputText type="text" v-model="value2" /> -</span> + +<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" /> -

Properties

-

InputText passes any valid attribute to the underlying input element.

+

Sizes

+

Badge sizes are adjusted according to their font size.

+ +<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> + -

Events

-

Any valid event such as focus, blur and input are passed to the underlying input element.

+

In addition, when placed inside another element, badge sizes can also derive their size from their parent.

+ +<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> +

Styling

Following is the list of structural style classes, for theming classes visit theming page.

@@ -54,10 +78,22 @@ import InputText from 'primevue/inputtext'; - - p-inputtext - Input element - + + p-badge + Badge element + + + p-tag + Tag element + + + p-tag-rounded + Rounded tag element + + + p-overlay-badge + Wrapper of a badge and its target. +
@@ -67,60 +103,65 @@ import InputText from 'primevue/inputtext'; - + View on GitHub - - - -export default { - data() { - return { - value1: '', - value2: '', - value3: '', - value4: '', - value5: 'PrimeVue' - } - } -} diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue index f4b19e9d6..6e91a1657 100755 --- a/src/views/button/ButtonDemo.vue +++ b/src/views/button/ButtonDemo.vue @@ -40,6 +40,10 @@