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

Fixed avatar badge

pull/800/head
Cagatay Civici 2020-12-10 15:51:43 +03:00
parent bdac0cf2ea
commit ab69349124
3 changed files with 9 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/badge/Badge.css
View File

@ -7,7 +7,6 @@
.p-overlay-badge {
position: relative;
display: inline-block;
}
.p-overlay-badge .p-badge {

12
src/views/avatar/AvatarDemo.vue
View File

@ -30,9 +30,7 @@
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label - Badge</h5>
<Badge value="4">
<Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" />
</Badge>
<Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
</div>
</div>
</div>
@ -59,9 +57,7 @@
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon - Badge</h5>
<Badge value="4" severity="success">
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
</Badge>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" v-badge="4"/>
</div>
</div>
</div>
@ -93,9 +89,7 @@
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Image - Badge</h5>
<Badge value="4" severity="danger">
<Avatar image="demo/images/organization/walter.jpg" class="p-mr-2" size="xlarge" />
</Badge>
<Avatar image="demo/images/organization/walter.jpg" class="p-mr-2" size="xlarge" v-badge.danger="4" />
</div>
</div>
</div>

20
src/views/avatar/AvatarDoc.vue
View File

@ -49,12 +49,10 @@ import AvatarGroup from 'primevue/avatargroup';
</code></pre>
<h5>Badge</h5>
<p>A badge can be added by wrapping the Avatar within a <router-link to="/badge">Badge</router-link> component.</p>
<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
<pre v-code>
<code>
&lt;Badge value="4" severity="info"&gt;
&lt;Avatar image="user.png" size="xlarge" /&gt;
&lt;/Badge&gt;
&lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt;
</code></pre>
@ -211,9 +209,7 @@ import AvatarGroup from 'primevue/avatargroup';
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Label - Badge&lt;/h5&gt;
&lt;Badge value="4"&gt;
&lt;Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" /&gt;
&lt;/Badge&gt;
&lt;Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
@ -240,9 +236,7 @@ import AvatarGroup from 'primevue/avatargroup';
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Icon - Badge&lt;/h5&gt;
&lt;Badge value="4" severity="success"&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /&gt;
&lt;/Badge&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" v-badge="4"/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
@ -271,12 +265,10 @@ import AvatarGroup from 'primevue/avatargroup';
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Image - Badge&lt;/h5&gt;
&lt;Badge value="4" severity="danger"&gt;
&lt;Avatar image="demo/images/organization/walter.jpg" class="p-mr-2" size="xlarge" /&gt;
&lt;/Badge&gt;
&lt;Avatar image="demo/images/organization/walter.jpg" class="p-mr-2" size="xlarge" v-badge.danger="4" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;