vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed alignment issues in badge documentation

pull/411/head
cagataycivici 2020-07-18 13:57:47 +03:00
parent 5a04379ab0
commit d965aa02e7
2 changed files with 10 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/badge/BadgeDemo.vue
View File

@ -37,18 +37,18 @@
</div>
<h5>Positioned Badge</h5>
<span class="p-overlay-badge">
<span class="p-badge">2</span>
<span class="p-overlay-badge p-mr-5">
<i class="pi pi-bell" style="font-size: 2em"></i>
<span class="p-badge">2</span>
</span>
<span class="p-overlay-badge">
<span class="p-badge p-badge-warning">5</span>
<Button type="button" label="New" />
<span class="p-badge p-badge-warning">5</span>
</span>
<h5>Inline Button Badge</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Emails" badge="8" class="p-mr-2" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Sizes</h5>
@ -85,18 +85,4 @@ export default {
margin-right: .5rem;
}
}
.p-button {
margin-right: .5rem;
}
.p-overlay-badge {
margin-right: 2rem;
}
/deep/ h1, h2 {
.p-badge {
vertical-align: middle;
}
}
</style>

12
src/views/badge/BadgeDoc.vue
View File

@ -33,13 +33,13 @@
<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>
&lt;span class="p-overlay-badge"&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;i class="pi pi-bell" style="font-size: 2em"&gt;&lt;/i&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;/span&gt;
&lt;span class="p-overlay-badge"&gt;
&lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
&lt;Button type="button" label="New" /&gt;
&lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
&lt;/span&gt;
</CodeHighlight>
@ -142,18 +142,18 @@
&lt;/div&gt;
&lt;h3&gt;Positioned Badge&lt;/h3&gt;
&lt;span class="p-overlay-badge"&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;span class="p-overlay-badge p-mr-5"&gt;
&lt;i class="pi pi-bell" style="font-size: 2em"&gt;&lt;/i&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;/span&gt;
&lt;span class="p-overlay-badge"&gt;
&lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
&lt;Button type="button" label="New" /&gt;
&lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
&lt;/span&gt;
&lt;h3&gt;Inline Button Badge&lt;/h3&gt;
&lt;Button type="button" label="Emails" badge="8" /&gt;
&lt;Button type="button" label="Emails" badge="8" class="p-mr-2" /&gt;
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
&lt;h3&gt;Sizes&lt;/h3&gt;