Tổng quan về Component
Component là tập hợp các thành phần bao gồm giao diện, các thuộc tính và các hàm nhằm hỗ trợ các nhà phát triển xây dựng giao diện của ứng dụng.
Tini App cung cấp 2 loại components:
- Basic components: các component cơ bản được cung cấp sẵn trong framework, nhà phát triển có thể sử dụng mà không cần cài đặt gì thêm
- Advanced components: là bộ components được xây dựng từ Basic components, cung cấp thêm nhiều loại components hơn giúp nhà phát triển xây dựng ứng dụng nhanh chóng và thuận tiện hơn. Chi tiết về advanced components bạn có thể xem tại đây
Demo
Trải nghiệm thử với trình giả lập bên dưới
Basic components
View container
Tên | Mô tả |
---|---|
view | Container component dùng để chứa các component khác, có chức năng tự với thẻ div trong HTML |
scroll-view | Container component có thể scroll được. Thanh scroll ngoài cùng không ảnh hưởng gì đến thanh scroll của scroll-view |
recycle-view | Container component hiển thị một danh sách dữ liệu lớn. Nó giúp tối ưu performance bằng cách chỉ render một số lượng các item cần thiết trong phạm vi nhìn thấy của người dùng |
movable-view | Container component cho phép kéo và thả chính nó và các thành phần con trong nó trên page |
movable-area | Component quy định phạm di chuyển của các movable-view nằm trong nó |
web-view | Container component dùng để hiển thị trang web trong một Tini App |
game-view | Container component được tối ưu hoá cho việc chạy các HTML5 game |
carousel | Container component cho phép bạn tổ chức các phần tử theo dạng băng chuyền |
Basic content
Tên | Mô tả |
---|---|
text | Component hiển thị nội dung văn bản |
rich-text | Component hiển thị nội dung cho HTML dưới dạng các node |
icon | Component hiển thị icon có sẵn trong Tini App |
progress | Thanh tiến trình |
Form component
Tên | Mô tả |
---|---|
form | Dùng để lưu trữ giá trị của các components input, switch, checkbox, radio, picker |
label | Các thành phần bên trong label sẽ được focus khi bấm vào phạm vi của |
input | Cho phép người dùng nhập thông tin dạng text |
textarea | Component dạng text box cho phép bạn có thể nhập nhiều dòng vào |
checkbox | Component cho phép người dùng chọn một hoặc nhiều phương án |
checkbox-group | Nhóm các checkbox lại với nhau |
radio | Component cho phép người dùng chọn duy nhất một phương án |
radio-group | Nhóm các radio lại với nhau |
picker | Component cung cấp một vùng chọn dạng scroll được hiển thị bên trong popup |
picker-view | Component cung cấp một vùng chọn dạng scroll |
button | Component button, hỗ trợ các action click |
slider | Component cho phép bạn chọn giá trị bằng việc kéo thả trong một phạm vi nhất định |
switch | Component hoạt động như một công tắc giúp người dùng chuyển đổi giữa hai trạng thái - ON vs OFF, YES vs NO |
Navigation
Tên | Mô tả |
---|---|
navigator | Component hỗ trợ điều hướng (routing) một cách trực tiếp trong txml |
Graphics
Tên | Mô tả |
---|---|
canvas | Component phục vụ cho mục đích chứa đồ hoạ |
Media components
Tên | Mô tả |
---|---|
image | Component dùng để hiển thị hình ảnh |
audio | Component cho phép người dùng phát âm thanh trên Tini App |
video | Component cho phép người dùng phát video trên Tini App |
player | Component hỗ trợ xem video trên youtube |
lottie | Component cho phép chạy các hoạt ảnh kết xuất từ After Effects |
Map
Tên | Mô tả |
---|---|
map | Component sử dụng google maps để phục vụ các tác vụ liên quan tới map |
Utilities
Tên | Mô tả |
---|---|
image-cropper | Component cho phép crop ảnh theo tỉ lệ mong muốn |
cashback | Component cho phép hiển thị số Astra được hoàn khi mua sản phẩm trên Tiki |
share-to-earn | Component cho phép hiển thị số Astra được nhận khi chia sẻ link sản phẩm, và có thể chia sẻ link khi bấm vào component đó. |
Advertising
Tên | Mô tả |
---|---|
ad | Component dùng để hiển thị quảng cáo dạng banner ngang |
Advanced components
Actions
Tên | Mô tả |
---|---|
button | Component Tini UI - Button theo Design System của Tiki |
button-bar | Component Tini UI - Button-bar theo Design System của Tiki |
uploader | Component Tini UI - Hỗ trợ chọn và xem trước tập tin |
Forms
Tên | Mô tả |
---|---|
tu-label | Component Tini UI - Chức năng tương tự như thẻ label nhưng hỗ trợ thêm icon, helper text và các tính năng khác. |
textfield | Component Tini UI - Chức năng tương tự như thẻ input nhưng hỗ trợ thêm label, icon và một số tính năng mở rộng về giao diện |
dropdown | Component Tini UI - Hỗ trợ bottom sheet cho phép hiển thị và chọn data |
search-bar | Component Tini UI - Hỗ trợ xây dựng component tìm kiếm |
calendar | Component Tini UI - Hiển thị và hỗ trợ chọn lịch |
step | Component Tini UI - Hỗ trợ tạo các bước trên multi-step form |
stepper | Component Tini UI - Tăng hoặc giảm giá trị input |
pin | Component Tini UI - Hỗ trợ nhập liệu mã PIN |
chip | Component Tini UI - Diễn tả cho input, attribute, hoặc action |
Navigation
Tên | Mô tả |
---|---|
tabs | Component Tini UI - Được sử dụng khi bạn cần hiển thị nội dung với 2 thành phần là thanh tab bar ở trên đầu và tab content bên dưới |
sidebar | Component Tini UI - là một cột hiển thị nội dung ở bên trái hoặc phải trên app dọc theo nội dung chính |
badge | Component Tini UI - Hiển thị red dot, số hoặc kí tự, dùng để nhắc nhở cho user khi có update, hoặc hiển thị thông báo |
avatar | Component Tini UI - Hiển thị hình ảnh của user, tên, hoặc text giới thiệu |
Data visualization
Tên | Mô tả |
---|---|
list-item | Component Tini UI - Hiển thị một item trong list |
address | Component Tini UI - Cho phép bạn thực hiện các thao tác liên quan tới địa chỉ của Tiki |
alphabet | Component Tini UI - Hiển thị các chữ cái trong bảng Alphabet |
Feedback
Tên | Mô tả |
---|---|
popup | Component Tini UI - Hiển thị popup menu |
modal | Component Tini UI - Hiển thị hoặc yêu cầu thao tác của người dùng mà không phải chuyển trang |
bottom-sheet | Component Tini UI - Hiển thị modal show từ dưới lên |
tooltip | Component Tini UI - Hiển thị nội dung dưới dạng như mẹo, gợi ý hoặc thủ thuật |
toast-bar | Component Tini UI - Hỗ trợ thông báo |