Nhảy tới nội dung

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ênMô tả
viewContainer component dùng để chứa các component khác, có chức năng tự với thẻ div trong HTML
scroll-viewContainer 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-viewContainer 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-viewContainer 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-areaComponent quy định phạm di chuyển của các movable-view nằm trong nó
web-viewContainer component dùng để hiển thị trang web trong một Tini App
game-viewContainer component được tối ưu hoá cho việc chạy các HTML5 game
carouselContainer component cho phép bạn tổ chức các phần tử theo dạng băng chuyền

Basic content

TênMô tả
textComponent hiển thị nội dung văn bản
rich-textComponent hiển thị nội dung cho HTML dưới dạng các node
iconComponent hiển thị icon có sẵn trong Tini App
progressThanh tiến trình

Form component

TênMô tả
formDùng để lưu trữ giá trị của các components input, switch, checkbox, radio, picker
labelCác thành phần bên trong label sẽ được focus khi bấm vào phạm vi của
inputCho phép người dùng nhập thông tin dạng text
textareaComponent dạng text box cho phép bạn có thể nhập nhiều dòng vào
checkboxComponent cho phép người dùng chọn một hoặc nhiều phương án
checkbox-groupNhóm các checkbox lại với nhau
radioComponent cho phép người dùng chọn duy nhất một phương án
radio-groupNhóm các radio lại với nhau
pickerComponent cung cấp một vùng chọn dạng scroll được hiển thị bên trong popup
picker-viewComponent cung cấp một vùng chọn dạng scroll
buttonComponent button, hỗ trợ các action click
sliderComponent 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
switchComponent 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ênMô tả
navigatorComponent hỗ trợ điều hướng (routing) một cách trực tiếp trong txml

Graphics

TênMô tả
canvasComponent phục vụ cho mục đích chứa đồ hoạ

Media components

TênMô tả
imageComponent dùng để hiển thị hình ảnh
audioComponent cho phép người dùng phát âm thanh trên Tini App
videoComponent cho phép người dùng phát video trên Tini App
playerComponent hỗ trợ xem video trên youtube
lottieComponent cho phép chạy các hoạt ảnh kết xuất từ After Effects

Map

TênMô tả
mapComponent sử dụng google maps để phục vụ các tác vụ liên quan tới map

Utilities

TênMô tả
image-cropperComponent cho phép crop ảnh theo tỉ lệ mong muốn
cashbackComponent cho phép hiển thị số Astra được hoàn khi mua sản phẩm trên Tiki
share-to-earnComponent 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ênMô tả
adComponent dùng để hiển thị quảng cáo dạng banner ngang

Advanced components

Actions

TênMô tả
buttonComponent Tini UI - Button theo Design System của Tiki
button-barComponent Tini UI - Button-bar theo Design System của Tiki
uploaderComponent Tini UI - Hỗ trợ chọn và xem trước tập tin

Forms

TênMô tả
tu-labelComponent 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.
textfieldComponent 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
dropdownComponent Tini UI - Hỗ trợ bottom sheet cho phép hiển thị và chọn data
search-barComponent Tini UI - Hỗ trợ xây dựng component tìm kiếm
calendarComponent Tini UI - Hiển thị và hỗ trợ chọn lịch
stepComponent Tini UI - Hỗ trợ tạo các bước trên multi-step form
stepperComponent Tini UI - Tăng hoặc giảm giá trị input
pinComponent Tini UI - Hỗ trợ nhập liệu mã PIN
chipComponent Tini UI - Diễn tả cho input, attribute, hoặc action

Navigation

TênMô tả
tabsComponent 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
sidebarComponent 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
badgeComponent 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
avatarComponent Tini UI - Hiển thị hình ảnh của user, tên, hoặc text giới thiệu

Data visualization

TênMô tả
list-itemComponent Tini UI - Hiển thị một item trong list
addressComponent 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
alphabetComponent Tini UI - Hiển thị các chữ cái trong bảng Alphabet

Feedback

TênMô tả
popupComponent Tini UI - Hiển thị popup menu
modalComponent 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-sheetComponent Tini UI - Hiển thị modal show từ dưới lên
tooltipComponent Tini UI - Hiển thị nội dung dưới dạng như mẹo, gợi ý hoặc thủ thuật
toast-barComponent Tini UI - Hỗ trợ thông báo