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

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

@ -49,12 +49,10 @@ import AvatarGroup from 'primevue/avatargroup';
</code></pre> </code></pre>
<h5>Badge</h5> <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> <pre v-code>
<code> <code>
&lt;Badge value="4" severity="info"&gt; &lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt;
&lt;Avatar image="user.png" size="xlarge" /&gt;
&lt;/Badge&gt;
</code></pre> </code></pre>
@ -211,9 +209,7 @@ import AvatarGroup from 'primevue/avatargroup';
&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;div class="card"&gt;
&lt;h5&gt;Label - Badge&lt;/h5&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" v-badge="4" /&gt;
&lt;Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" /&gt;
&lt;/Badge&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&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="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;h5&gt;Icon - Badge&lt;/h5&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" v-badge="4"/&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /&gt;
&lt;/Badge&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -274,9 +268,7 @@ import AvatarGroup from 'primevue/avatargroup';
&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;div class="card"&gt;
&lt;h5&gt;Image - Badge&lt;/h5&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" v-badge.danger="4" /&gt;
&lt;Avatar image="demo/images/organization/walter.jpg" class="p-mr-2" size="xlarge" /&gt;
&lt;/Badge&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;