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

Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/navigation/avatar/index

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ính	Kiểu dữ liệu	Giá trị mặc định	Mô tả
size	number	40	Kích thước avatar (width x height) px
shape	string	circle	Các giá trị: "circle", "square"
src	string	""	Source hình ảnh
name	string	""	Hiển thị shortname nếu không có source hình ảnh
lazyLoad	boolean	false	Thuộc tính lazyLoad của avatar
showBorder	boolean	true	Hiển thị border của avatar
className	string	""	className của avatar
style	string	""	Disabled button