Nhảy tới nội dung

Giới thiệu về TCSS

TCSS là một tập ngôn ngữ được sử dụng để mô tả style của các component từ TXML. TCSS sẽ quyết định việc các TXML component được hiển thị ra sao.

Đơn vị đo​

Tiki Mini App hỗ trợ thêm đơn vị đo rpx (reponsive pixel)

Mỗi một màn hình bất kỳ sẽ có độ rộng được tính bằng 750 rpx. Nếu như màn hình có kích thước là 375 px, thì ta sẽ có: 750 rpx = 375 px, do đó, 1 rpx = 0.5px

Bằng cách sử dụng rpx, lập trình viên có thể đảm bảo rằng thiết kế của họ chạy tốt với các màn hình khác nhau.

Import​

Tiki Mini App cho phép bạn có thể import các file TCSS từ các nguồn khác nhau bằng cách sử dụng cú pháp @import

/** common.tcss  */
.small-p {
  padding: 5px;
}

/** app.tcss */
@import './common.tcss';
.middle-p {
  padding: 15px;
}

Inline style​

Bạn có thể sử dụng 2 thuộc tính style và class trong TXML để xác định style cho một thẻ.

<view style="color: red;" />
<view class="normal">
/** app.tcss */
.normal {
  color: red;
}

CSS Selector​

TCSS hỗ trợ các loại Selector sau

  • selector với class name. VD: .class1, .class2
  • selector với thẻ cho các basic component. Cụ thể là các thẻ view, input, text, icon, progress, radio, radio-group, label, checkbox, checkbox-group, switch.
  • selector cho các item con. VD: view > .class1
  • selector cho các item con và cháu. VD: view .class1

Thứ tự import​

Khi một Page được render, các tcss sẽ được import theo thứ tự như sau

  • app.tcss sẽ được import trước tiên.
  • Khi một Page sử dụng nhiều component, component này cũng có thể sử dụng các component khác. Tất cả các component (bao gồm cả các Component con của một Component) mà một Page sử dụng, sẽ được sort theo 2 tiêu chí: (1) Component nào ở dưới lá, (2) đường dẫn của chúng. Thứ tự sort này sẽ quyết định xem tcss của Component nào được import vào trước, tcss của Component nào được import vào sau.
  • cuối cùng là index.tcss của chính page đó

Do được import cuối cùng, nên tcss của Page có thể override tcss của các Component con.

Ví dụ: Giả sử chúng ta có một Mini App với cấu trúc như sau

app.tcss;
pages / page1 / index.tcss;
components / component1 / index.tcss;
component2 / index.tcss;
component3 / index.tcss;
component4 / index.tcss;

Giả sử rằng:

  • page1 sử dụng component1
  • component1 sử dụng component4
  • component4 sử dụng component2 và component3

Thế thì khi đó, thứ tự import của tcss sẽ là

  • app.tcss
  • components/component2/index.tcss
  • components/component3/index.tcss
  • components/component4/index.tcss
  • components/component1/index.tcss
  • pages/page1/index.tcss

Các biến global trong TCSS​

Tên biếnMô tả
--tf-header-padding-rightKhoảng cách khả dụng từ bên phải của navigation bar
--tf-header-padding-leftKhoảng cách khả dụng từ bên trái của navigation bar
/** index.tcss */
.header {
  display: flex;
  left: var(--tf-header-padding-left);
}

*** Lưu ý khi sử dụng: Nếu sử dụng JSAPI addIconsToNavigationBar để add icon vào navigation bar, thì bên phải chúng ta nên cộng thêm 44px. Xem ví dụ bên dưới.

/** index.js */
Page({
  data: {
    addPadding: false
  }
  onAddExtraIcon() {
    my.addIconsToNavigationBar({
      icons: [
        {
          image: '/images/cart.png',
          badge: '4'
        },
      ],
      success: (res) => {
        this.setData({ addPadding: true });
      },
      fail: (res) => {
      },
    });
  }
})
 <view class="header {{addPadding ? 'padding' : ''}}" />
.header {
  right: var(--tf-header-padding-right);
}

.padding {
  margin-right: 44px;
}