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

Demo for the new Avatar Component

pull/726/head
Cagatay Civici 2020-11-28 23:05:48 +03:00
parent ae4e035a8b
commit 635c4779a2
1 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-6"> <div class="p-col-12 p-md-4">
<div class="card"> <div class="card">
<h5>Letter</h5> <h5>Letter</h5>
<Avatar letter="P" class="p-mr-2" size="xlarge" /> <Avatar letter="P" class="p-mr-2" size="xlarge" />
@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="p-col-12 p-md-4">
<div class="card"> <div class="card">
<h5>Letter - Circle</h5> <h5>Letter - Circle</h5>
<Avatar letter="P" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar letter="P" class="p-mr-2" size="xlarge" shape="circle" />
@ -26,10 +26,19 @@
<Avatar letter="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /> <Avatar letter="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Letter - Badge</h5>
<Badge value="4">
<Avatar letter="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" />
</Badge>
</div>
</div>
</div> </div>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-6"> <div class="p-col-12 p-md-4">
<div class="card"> <div class="card">
<h5>Icon</h5> <h5>Icon</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /> <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
@ -38,7 +47,7 @@
</div> </div>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="p-col-12 p-md-4">
<div class="card"> <div class="card">
<h5>Icon - Circle</h5> <h5>Icon - Circle</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
@ -46,10 +55,19 @@
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div> </div>
</div> </div>
<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>
</div>
</div>
</div> </div>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-6"> <div class="p-col-12 p-md-4">
<div class="card"> <div class="card">
<h5>Image</h5> <h5>Image</h5>
<Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" />
@ -58,21 +76,29 @@
</div> </div>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="p-col-12 p-md-4">
<div class="card"> <div class="card">
<h5>Group</h5> <h5>Avatar Group</h5>
<AvatarGroup class="p-mb-3"> <AvatarGroup class="p-mb-3">
<Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/> <Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/>
<Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/> <Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/>
<Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/> <Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/>
<Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle"/> <Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle"/>
<Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle"/> <Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle"/>
<Avatar letter="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff; font-size: 1rem" /> <Avatar letter="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
</AvatarGroup> </AvatarGroup>
</div> </div>
</div> </div>
</div>
<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>
</div>
</div>
</div>
</div> </div>
<AvatarDoc /> <AvatarDoc />