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

Docs for Avatar

pull/726/head
Cagatay Civici 2020-11-29 10:50:55 +03:00
parent 635c4779a2
commit 330d531fc3
4 changed files with 240 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/avatar/Avatar.d.ts vendored
View File

@ -1,7 +1,7 @@
import Vue from 'vue'; import Vue from 'vue';
declare class Avatar extends Vue { declare class Avatar extends Vue {
letter?: string; label?: string;
icon?: string; icon?: string;
image?: string; image?: string;
} }

5
src/components/avatar/Avatar.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="containerClass"> <div :class="containerClass">
<slot> <slot>
<span class="p-avatar-letter" v-if="letter">{{letter}}</span> <span class="p-avatar-text" v-if="label">{{label}}</span>
<span :class="iconClass" v-else-if="icon"></span> <span :class="iconClass" v-else-if="icon"></span>
<img :src="image" v-else-if="image"> <img :src="image" v-else-if="image">
</slot> </slot>
@ -11,7 +11,7 @@
<script> <script>
export default { export default {
props: { props: {
letter: { label: {
type: String, type: String,
default: null default: null
}, },
@ -37,7 +37,6 @@ export default {
return ['p-avatar p-component', { return ['p-avatar p-component', {
'p-avatar-image': this.image != null, 'p-avatar-image': this.image != null,
'p-avatar-circle': this.shape === 'circle', 'p-avatar-circle': this.shape === 'circle',
'p-avatar-sm': this.size === 'small',
'p-avatar-lg': this.size === 'large', 'p-avatar-lg': this.size === 'large',
'p-avatar-xl': this.size === 'xlarge' 'p-avatar-xl': this.size === 'xlarge'
}]; }];

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

@ -3,7 +3,7 @@
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>Avatar</h1> <h1>Avatar</h1>
<p>Avatar represents people using icons, letters and images.</p> <p>Avatar represents people using icons, labels and images.</p>
</div> </div>
</div> </div>
@ -11,27 +11,27 @@
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-4"> <div class="p-col-12 p-md-4">
<div class="card"> <div class="card">
<h5>Letter</h5> <h5>Label</h5>
<Avatar letter="P" class="p-mr-2" size="xlarge" /> <Avatar label="P" class="p-mr-2" size="xlarge" />
<Avatar letter="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/> <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar letter="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /> <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="p-col-12 p-md-4">
<div class="card"> <div class="card">
<h5>Letter - Circle</h5> <h5>Label - Circle</h5>
<Avatar letter="P" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar letter="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /> <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar letter="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /> <Avatar label="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="p-col-12 p-md-4">
<div class="card"> <div class="card">
<h5>Letter - Badge</h5> <h5>Label - Badge</h5>
<Badge value="4"> <Badge value="4">
<Avatar letter="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" /> <Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" />
</Badge> </Badge>
</div> </div>
</div> </div>
@ -85,7 +85,7 @@
<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" /> <Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
</AvatarGroup> </AvatarGroup>
</div> </div>
</div> </div>

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

@ -11,14 +11,65 @@ import AvatarGroup from 'primevue/avatargroup';
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p> <p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
<pre v-code> <pre v-code>
<code> <code>
&lt;Avatar label="P" /&gt;
&lt;Avatar icon="pi pi-search" /&gt;
&lt;Avatar image="user.png" /&gt;
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Sizes</h5>
<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
<pre v-code>
<code>
&lt;Avatar label="P" size="large"/&gt;
</code></pre>
<h5>AvatarGroup</h5>
<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
<pre v-code>
<code>
&lt;AvatarGroup&gt;
&lt;Avatar label="P" /&gt;
&lt;Avatar icon="pi pi-search" /&gt;
&lt;Avatar image="user.png" /&gt;
&lt;Avatar label="+2" /&gt;
&lt;/AvatarGroup&gt;
</code></pre>
<h5>Shape</h5>
<p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
<pre v-code>
<code>
&lt;Avatar label="P" shape="circle"/&gt;
</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>
<pre v-code>
<code>
&lt;Badge value="4" severity="info"&gt;
&lt;Avatar image="user.png" size="xlarge" /&gt;
&lt;/Badge&gt;
</code></pre>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<pre v-code>
<code>
&lt;Avatar&gt;
Content
&lt;/Avatar&gt;
</code></pre>
<h5>Properties of Avatar</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
@ -30,12 +81,44 @@ import AvatarGroup from 'primevue/avatargroup';
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td>label</td>
<td>string</td>
<td>null</td>
<td>Defines the text to display.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Defines the icon to display.</td>
</tr>
<tr>
<td>image</td>
<td>string</td>
<td>null</td>
<td>Defines the image to display.</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the element, valid options are "large" and "xlarge".</td>
</tr>
<tr>
<td>shape</td>
<td>string</td>
<td>square</td>
<td>Shape of the element, valid options are "square" and "circle".</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Properties of AvatarGrouo</h5>
<p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
<h5>Styling of Avatar</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
@ -46,7 +129,52 @@ import AvatarGroup from 'primevue/avatargroup';
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td>p-avatar</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-avatar-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-avatar-circle</td>
<td>Container element with a circle shape.</td>
</tr>
<tr>
<td>p-avatar-text</td>
<td>Text of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-icon</td>
<td>Icon of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-lg</td>
<td>Container element with a large size.</td>
</tr>
<tr>
<td>p-avatar-xl</td>
<td>Container element with an xlarge size.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling of AvatarGroup</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-avatar-group</td>
<td>Container element.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -61,7 +189,98 @@ import AvatarGroup from 'primevue/avatargroup';
</a> </a>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Label&lt;/h5&gt;
&lt;Avatar label="P" class="p-mr-2" size="xlarge" /&gt;
&lt;Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/&gt;
&lt;Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Label - Circle&lt;/h5&gt;
&lt;Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" /&gt;
&lt;Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /&gt;
&lt;Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&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;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Icon&lt;/h5&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Icon - Circle&lt;/h5&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" /&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&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;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Image&lt;/h5&gt;
&lt;Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" /&gt;
&lt;Avatar image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" size="large" shape="circle" /&gt;
&lt;Avatar image="demo/images/avatar/onyamalimba.png" class="p-mr-2" shape="circle" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Avatar Group&lt;/h5&gt;
&lt;AvatarGroup class="p-mb-3"&gt;
&lt;Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/&gt;
&lt;Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/&gt;
&lt;Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/&gt;
&lt;Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle"/&gt;
&lt;Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle"/&gt;
&lt;Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" /&gt;
&lt;/AvatarGroup&gt;
&lt;/div&gt;
&lt;/div&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;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</template> </template>
</code></pre> </code></pre>