Utitlity First
Xây dựng các component dựa vào một tập các primitive utilities
Thông thường, khi muốn style một component, bạn có thể viết CSS dựa theo BEM (block-element-modify)
<view class="item">
<view class="item-wrapper">
<view class="item-prefix">
<icon type="location" color="var(--gray60)" />
</view>
<view class="item-content">
<view class="item-thumb">
<image class="item-thumb-img"
src="https://salt.tikicdn.com/ts/miniapp/15/9a/49/fb366a4200277a059e8960e0eeca88fc.png" />
</view>
<view class="item-main-content">
<view class="item-content-title">Label</view>
<view class="item-content-subtitle">Description</view>
</view>
</view>
<view class="item-suffix">
<view class="item-suffix-text">CTA</view>
</view>
<view class="item-arrow">
<icon type="arrow_right" color="var(--gray60)" />
</view>
</view>
</view>
.item {
display: flex;
padding: 8px 16px 0 16px;
background-color: white;
}
.item-wrapper {
flex-grow: 1;
display: flex;
flex-direction: row;
padding-bottom: 8px;
border-bottom: 1px solid var(--gray20);
}
.item-prefix {
display: flex;
align-items: flex-start;
margin-right: 8px;
}
.item-thumb-img {
width: 40px;
height: 40px;
margin-right: 8px;
}
.item-content {
display: flex;
flex-direction: row;
flex-grow: 1;
margin-right: 8px;
}
.item-main-content {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-grow: 1;
}
.item-content-title {
font-style: var(--font-style-normal);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-base);
line-height: calc(var(--font-size-base) * var(--font-line-height, 1.5));
color: var(--gray100);
margin-bottom: 4px;
}
.item-content-subtitle {
font-style: var(--font-style-normal);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-small);
line-height: calc(var(--font-size-small) * var(--font-line-height, 1.5));
color: var(--gray60);
}
.item-suffix {
display: flex;
align-items: center;
}
.item-suffix-text {
font-style: var(--font-style-normal);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-base);
line-height: calc(var(--font-height-base) * var(--font-line-height, 1.5));
color: var(--gray60);
}
.item-arrow {
display: flex;
align-items: center;
}
Bằng cách sử dụng tini-style
, bạn co thể áp dụng một tập các class đã được tini-style
định nghĩa từ trước như sau
<view class="flex pl-medium pr-medium pt-2x-small bg-white">
<view class="flex flex-grow flex-row border-0 border-solid border-bottom border-gray20 pb-2x-small spacex-2x-small">
<view class="flex flex-col">
<icon type="location" color="var(--gray60)" />
</view>
<view class="flex flex-row flex-grow spacex-2x-small">
<view>
<image style="width: 40px; height: 40px;"
src="https://salt.tikicdn.com/ts/miniapp/15/9a/49/fb366a4200277a059e8960e0eeca88fc.png" />
</view>
<view class="flex flex-col flex-grow spacey-4x-small">
<view class="font-bold text-base text-gray100">Label</view>
<view class="font-regular text-small text-gray60">Description</view>
</view>
</view>
<view class="flex items-center" style="align-items: center;">
<view class="font-regular text-base text-gray60">CTA</view>
</view>
<view class="flex flex-row items-center">
<icon type="arrow_right" color="var(--gray60)" />
</view>
</view>
</view>
Trong ví dụ trên, chúng ta đã sử dụng
flex
vàpadding
để set layout dạng cột và dạng hàng cho UIđể set khoảng cách giữa các item trong một flex, thay vì sử dụng
margin
, chúng ta sử dụngspacex-
vàspacey-
. Bằng cách này khoảng cách giữa các items của một container, sẽ được quyết định bởi container cha chứ không phải từng items con.để set font size cho từng đoạn text, chúng ta cũng sử dụng các utility về typography có sẵn (
text-bold
,text-base
)
Với việc sử dụng tini-style
với TXML, việc build UI cho một component sẽ trở nên đơn giản hơn rất nhiều.
Ngoài ra, các component được build với tini-style cũng sẽ thống nhất.