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
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 Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/navigation/avatar/index
Demo
Thuộc tính
Thuộc tính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
size | string | md | Kích thước avatar (lg/md/xs) |
shape | string | circle | Các giá trị: "circle","standard" |
src | string | "" | source hình ảnh |
style | string | "" | 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');
}
});