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 - +
A model can be bound using the standard v-model directive.
+A badge is offered as pure css rather than a component.
+ +Use .p-badge class to display numbers inside badges.
A floating label is implemented by wrapping the input and the label inside a container having .p-float-label style class.
+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
Different options are available as severity levels with.
+ +A badge can easily be positioned relative to another element when both are wrapped inside an element with p-overlay-badge class.
+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.
-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> +InputText passes any valid attribute to the underlying input element.
+Badge sizes are adjusted according to their font size.
+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.
+Following is the list of structural style classes, for theming classes visit