mirror of
https://github.com/creativetimofficial/muse-vue-ant-design-dashboard.git
synced 2025-08-16 11:31:10 +08:00
90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<template>
|
||
<div>
|
||
<div class="page-row">
|
||
<div class="page-content">
|
||
<section class="mb-24">
|
||
<h1>Avatar</h1>
|
||
<p class="text-dark">
|
||
Avatars can be used to represent people or objects. It supports images, ‘Icon’s, or letters.
|
||
</p>
|
||
</section>
|
||
<a-divider />
|
||
<h2>Examples</h2>
|
||
<section class="mb-24" id="Basic">
|
||
<a-divider orientation="left">Basic</a-divider>
|
||
<p>
|
||
Three sizes and two shapes are available.
|
||
</p>
|
||
<div class="showcase">
|
||
<div>
|
||
<a-avatar :size="64" icon="user" />
|
||
<a-avatar size="large" icon="user" />
|
||
<a-avatar icon="user" />
|
||
<a-avatar size="small" icon="user" />
|
||
</div>
|
||
<br />
|
||
<div>
|
||
<a-avatar shape="square" :size="64" icon="user" />
|
||
<a-avatar shape="square" size="large" icon="user" />
|
||
<a-avatar shape="square" icon="user" />
|
||
<a-avatar shape="square" size="small" icon="user" />
|
||
</div>
|
||
</div>
|
||
<muse-snippet :code="basic"></muse-snippet>
|
||
</section>
|
||
|
||
<p class="text-right font-semibold mb-24">
|
||
Looking for more Ant Design Vue Avatar? Please check the
|
||
<a target="_blank" href="https://antdv.com/components/avatar/">official docs</a>.
|
||
</p>
|
||
</div>
|
||
<muse-anchor :anchors="anchors"></muse-anchor>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
head () {
|
||
return {
|
||
title: 'Avatar | Muse Vue Ant Design Dashboard @ Creative Tim',
|
||
meta: [
|
||
{ hid: 'description', name: 'description', content: 'Avatars can be used to represent people or objects. It supports images, ‘Icon’s, or letters.' }
|
||
]
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
anchors: {
|
||
"Basic": "Basic",
|
||
},
|
||
basic: `
|
||
<template>
|
||
<div>
|
||
<div>
|
||
<a-avatar :size="64" icon="user" />
|
||
<a-avatar size="large" icon="user" />
|
||
<a-avatar icon="user" />
|
||
<a-avatar size="small" icon="user" />
|
||
</div>
|
||
<br />
|
||
<div>
|
||
<a-avatar shape="square" :size="64" icon="user" />
|
||
<a-avatar shape="square" size="large" icon="user" />
|
||
<a-avatar shape="square" icon="user" />
|
||
<a-avatar shape="square" size="small" icon="user" />
|
||
</div>
|
||
</div>
|
||
</template>`,
|
||
}
|
||
},
|
||
methods: {
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
</style> |