Giới thiệu

Advanced component hay Tini UI là bộ các components được build từ các components được cung cấp từ framework, với thiết kế dựa trên bộ Design System của Tini App Team.

Trong Tini UI gồm 2 packages chính:

• tini-ui: cung cấp nhiều components giúp nhà phát triển có thể làm app được nhanh hơn
• tini-style: sử dụng các Design Token từ Tini UI Design System để xây dựng nên các class giúp bạn sử dụng tcss một các nhanh chóng và thuận tiện

Cài đặt

Để cài đặt Tini UI, bạn sử dụng lệnh:

Với npm

$ npm install @tiki.vn/tini-ui --save

Hoặc yarn

$ yarn add @tiki.vn/tini-ui

Khi bạn cài tini-ui thì đã bao gồm tini-style trong đó, tuy nhiên bạn hoàn toàn có thể cài tini-style độc lập, chi tiết bạn có thể xem tại đây

Cách sử dụng

Sau khi cài đặt package tini-ui. Bạn cần khai báo trong file config .json của page hoặc component

index.json

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

Sau đó bạn sử dụng tini-ui component như một component bình thường

index.txml

<avatar name="Tini UI" size="lg" shape="circle" src="https://salt.tikicdn.com/ts/miniapp/d6/21/86/89cc2b8a2f930bb5f0f269c0374a3230.png"/>
/>