Skip to main content

avatar

avatar là component dùng để hiển thị hình ảnh của user, tên, hoặc text giới thiệu.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Sample Code

index.json
{
"defaultTitle": "Avatar",
"usingComponents": {
"avatar": "@tiki.vn/tini-ui/es/avatar/index",
"block-header": "components/block-header/index",
"block-variant": "components/block-variant/index"
}
}
index.txml
<view>
<block-header
title="Usage"
description="Avatars represent the user behind them."
/>

<block-variant header="Variant" title="1. Shape" description="Circle, Rounded.">
<view class="block-variant-content-line">
<view class="w-full flex">
<avatar shape="square" size="72" class="mr-small"/>
<avatar shape="circle" size="72"/>
</view>
</view>
</block-variant>

<block-variant title="2. Content" description="Image, Initials">
<view class="block-variant-content-line">
<view class="w-full flex">
<avatar shape="circle" size="72" class="mr-small"/>
<avatar shape="circle" size="72" name="W W"/>
</view>
</view>
</block-variant>

<block-variant title="3. Size" description="24, 40, 56, 72px">
<view class="block-variant-content-line">
<view class="w-full flex">
<avatar shape="circle" size="24" class="mr-small"/>
<avatar shape="circle" size="40" class="mr-small"/>
<avatar shape="circle" size="56" class="mr-small"/>
<avatar shape="circle" size="72" class="mr-small"/>
</view>
</view>
</block-variant>

<block-variant title="4. Border" description="With white border, without white border">
<view class="block-variant-content-line mt-small p-small bg-black">
<view class="w-full flex">
<avatar shape="circle" size="24" class="mr-small"/>
<avatar shape="circle" size="40" class="mr-small"/>
<avatar shape="circle" size="56" class="mr-small"/>
<avatar shape="circle" size="72" class="mr-small"/>
</view>
</view><view class="p-small bg-black">
<view class="w-full flex">
<avatar shape="circle" size="24" name="W W" showBorder={{false}} class="mr-small"/>
<avatar shape="circle" size="40" name="W W" showBorder={{false}} class="mr-small"/>
<avatar shape="circle" size="56" name="W W" showBorder={{false}} class="mr-small"/>
<avatar shape="circle" size="72" name="W W" showBorder={{false}} class="mr-small"/>
</view>
</view>
</block-variant>

</view>

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
sizenumber40Kích thước avatar (width x height) px
shapestringcircleCác giá trị: "circle", "square"
srcstring""Source hình ảnh
namestring""Hiển thị shortname nếu không có source hình ảnh
lazyLoadbooleanfalseThuộc tính lazyLoad của avatar
showBorderbooleantrueHiển thị border của avatar
classNamestring""className của avatar
stylestring""Disabled button