Nhảy tới nội dung

avatar

Cập nhật lần cuối vào

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

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
sizestringmdKích thước avatar (lg/md/xs)
shapestringcircleCác giá trị: "circle","standard"
srcstring""source hình ảnh
stylestring""Disabled button

Sample Code:

Khai báo components:

{
"defaultTitle": "Avatar",
"usingComponents": {
"avatar": "@tiki.vn/tini-ui/es/avatar/index"
}
}

Shape: circle

index.txml
<view class="container">
<view class="content" style="margin-top:32px">
<text class="content-label">Shape: circle, Size:lg-md-xs</text>
<view style="flex-direction:row;align-items:flex-end">
<avatar name="Avatar" size="lg" style="margin:8px" src="https://www.denofgeek.com/wp-content/uploads/2016/11/avatar-sequel.jpg"/>
<avatar name="Default" size="md" style="margin:8px" />
<avatar name="Author" size="xs" style="margin:8px" />
</view>
</view>
</view>

Result:

import image from '../../../theme/static/images/avatar-circle.png'
ReactDOM.render(<img style={{maxWidth: 414}} alt="Avatar" src={image}/>, mountNode);

Shape: standard

index.txml
<view class="container">
<view class="content" style="margin-top:32px">
<text class="content-label">Shape: standard, Size:lg-md-xs</text>
<view style="flex-direction:row;align-items:flex-end">
<avatar name="Avatar" size="lg" style="margin:8px" shape="standard" src="https://www.denofgeek.com/wp-content/uploads/2016/11/avatar-sequel.jpg"/>
<avatar name="Default" size="md" style="margin:8px" shape="standard"/>
<avatar name="Author" size="xs" style="margin:8px" shape="standard"/>
</view>
</view>
</view>

Result

import image from '../../../theme/static/images/avatar-standard.png'
ReactDOM.render(<img style={{maxWidth: 414}} alt="Avatar" src={image}/>, mountNode);

Advance

Sử dụng component avatar để implement user item

Example

index.tcss
<view class="content">
<list>
<list-item
upperSubtitle="We're using react-native-config for configuration, so to make android work with config we need to add below line to android/app/build.gradle"
>
<view slot="supporting">
<avatar size="lg" style="margin:8px" src="https://www.denofgeek.com/wp-content/uploads/2016/11/avatar-sequel.jpg"/>
</view>
Lý Nhân
</list-item>
</list>
</view>
import image from '../../../theme/static/images/avatar-row.png'
ReactDOM.render(<img style={{maxWidth: 414}} alt="Avatar" src={image}/>, mountNode);

Example

index.tcss
<view class="content">
<view class="avatar-wrapper">
<avatar
size="md"
shape="standard"
src="https://www.denofgeek.com/wp-content/uploads/2016/11/avatar-sequel.jpg"
/>
<text class="avatar-name">Username</text>
<text class="avatar-desc">Dev Assistant is a mini app that lists all mini apps of a developer which are build on tiki-studio</text>
</view>
</view>
index.tcss
.avatar-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
}
.avatar-info {
padding: 8;
max-width: 300px;
}
.avatar-info-name {
font-size: 16px;
font-weight: 500;
}
.avatar-info-desc {
font-size: 14px;
font-weight: 400;
line-height: 18px;
}

Result

import image from '../../../theme/static/images/avatar-column.png'
ReactDOM.render(<img style={{maxWidth: 414}} alt="Button" src={image}/>, mountNode);
index.js
Page({
data: {},
onError() {
console.log('Onload error');
}
});