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