Nhảy tới nội dung

tabs

Cập nhật lần cuối vào

tabs đượ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

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhBắt buộcMô tả
classNamestringCustom class cho tabs
activeClsstringClass cho tab đang được active
tabBarClsstringCustom class cho thanh tab bar
tabBarUnderlineColorstring#1A94FFMàu underline của tab khi được active
tabBarActiveTextColorstring#1A94FFMàu của text khi tab được active
tabBarInactiveTextColorstring#808089Màu của text khi tab không active
tabBarSubTextColorstringMàu của sub text khi không active
tabBarActiveSubTextColorstring#1A94FFMàu của sub text khi active
tabBarBackgroundColorstring#FFFFFFMàu nền của tab bar
tabBarActiveIconColorstring#1A94FFMàu của icon khi được active
tabBarInactiveIconColorstring#808089Màu của icon khi không active
iconSizenumber24Kích thước của icon, dùng khi tab có icon
swipeablebooleantrueCho phép tabs có thể swipe được
tabsarrayMảng các đối tượng tab, bạn có thể xem cấu hình của tab ở bên dưới
activeTabnumber0Chỉ định tab được active theo index
animationbooleantrueCó animation khi đổi tab
durationnumber500Khoảng thời gian để đổi tab content, chỉ có hiệu lực khi swipeable=true
hasSubTitlebooleanfalseHiển thị sub title
tabsNamestringĐược dùng như là id của tabs
tabBarUnderlineWidthstring100%Width của underline
tabBarUnderlineHeightstring1pxWidth của underline
tabContentHeightstringChiều cao của tab content, có hiệu lực khi swipeable=true
stickyBarbooleanfalseChỉ định position của tab bar là sticky
onTabClickeventSự kiện được gọi khi bấm vào tab, event.detail = { index, tabsName }
onChangeeventSự kiện được gọi khi đổi tab, event.detail = { index, tabsName }

Cấu hình của tab

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
titlestringText của tab
badgeTextstringNội dung của badge, chỉ có hiệu lực khi showBadge=true
showBadgebooleanfalseHiển thị badge
subTitlestringSub text của tab
iconstringIcon name, bạn có thể xem các icon được hỗ trợ tại đây
iconActivestringIcon name khi tab được active, nếu không khai báo thì sẽ sử dụng biến icon
imagestringLink hình của icon, hiện tại chỉ hỗ trợ hình với remote url hoặc hình đi từ root, ví dụ: /images/image.png
imageActivestringLink hình của icon khi tab được active, nếu không khai báo sẽ sử dụng biên image, hiện tại chỉ hỗ trợ hình với remote url hoặc hình đi từ root, ví dụ: /images/image.png
badgeobjectCấu hình của badge, là một object có dạng badge={ arrow: boolean, arrow: boolean }. Trong đó:
- arrow: hiển thị arrow left bên dưới tab
- stroke: hiển thị stroke cho badge
Nếu bạn chỉ muốn hiển thị badge dạng dot, bạn chỉ cần khai báo showBadge=true và không cần khai báo thêm biến này

Cấu hình tab-content

Mỗi content bên trong tab cần được bao bởi tab-content

  • Nếu bạn có khai báo tabIdactiveTab cho tab-content, thì tab-content sẽ điều chỉnh height=auto khi tabId bằng với activeTab, ngược lại, height của content sẽ bằng 0
  • Nếu bạn muốn tự mình control height của content, bạn có thể khai báo thêm thuộc tính style cho tab-content
PropertyTypeDefault ValueDescription
tabIdnumbertabId với giá trị chính là index của tab đó, bạn không cần khai báo tabId nếu bạn đã khai báo thêm style cho tab-content, khi đó bạn cần tự control height của tab-content đó
activeTabnumberactiveTab của tab-content với giá trị bằng với activeTab trong tabs, bạn không cần khai báo activeTab nếu bạn đã khai báo thêm style cho tab-content, khi đó bạn cần tự control height của tab-content đó
stylenumberInline style cho tab-content
Lưu ý
  • Các icon trong tabs bạn có thể tìm thấy ở đây
  • Số lượng các phần tử trong biến tabs và số component trong thẻ <tabs> nên bằng nhau
  • Nếu số lượng tabs nhiều dẫn đến xuất hiện thanh scroll trên tab bar, có thể sẽ xuất hiện hiện tượng khi bấm vào 2 tab cách xa nhau, thanh scroll sẽ bị thay đổi vị trí 2 lần
  • Nếu trong tab item có image/ icon và badge, thì vị trí của badge sẽ thành position absolute và hiển thị ở trên đầu của image/ icon
  • tabsName dùng để chỉ định tên của biến được dùng trong activeTab được khai báo trong file js, ví dụ bạn khai báo activeTab="{{activeTab1}}" trong txml, thì tabsName="activeTab1"

Sample Code

index.json
{
"defaultTitle": "tabs",
"titleBarColor": "#1A94FF",
"titleColor": "#fff",
"transparentTitle": "none",
"usingComponents": {
"block-header": "components/block-header/index",
"tabs": "@tiki.vn/tini-ui/es/tabs/index",
"tab-content": "@tiki.vn/tini-ui/es/tabs/tab-content/index"
}
}
index.txml
<view>
<block-header
title="Usage"
description="Tab bar is used as a graphical interface element that allows multiple panels to be contained within a single window, using tabs as a navigational element." />

<view class="block-content gray10">
<text class="title mb-8">Variants</text>

<text class="subtitle mb-8">Text only</text>
<tabs tabs="{{tabs1}}"
tabsName="activeTab1"
activeTab="{{activeTab1}}"
onTabClick="onTabClick"
swipeable="{{false}}">
<block tiki:for="{{tabs1}}">
<tab-content tabId="{{index}}">
<view class="tab-item" />
</tab-content>
</block>
</tabs>

<text class="subtitle mb-8 mt-16">Text with icon</text>
<tabs tabs="{{tabs2}}"
tabsName="activeTab2"
onTabClick="onTabClick"
onChange="onChange"
activeTab="{{activeTab2}}">
<block tiki:for="{{tabs2}}">
<tab-content tabId="{{index}}">
<view class="tab-item" />
</tab-content>
</block>
</tabs>
</view>
</view>
index.tcss
.tab-item {
height: 104px;
background-color: #fff;
}

.mb-8 {
margin-bottom: 8px;
}

.mt-16 {
margin-top: 16px;
}

.gray10 {
background-color: var(--gray10);
}
index.js
Page({
data: {
activeTab1: 0,
activeTab2: 0,
tabs1: [
{ title: 'Tab' },
{ title: 'Tab' },
{ title: 'Tab' },
{ title: 'Tab' }
],
tabs2: [
{ title: 'Tab', icon: 'home' },
{ title: 'Tab', icon: 'home' },
{ title: 'Tab', icon: 'home' },
{ title: 'Tab', icon: 'home' }
]
},
onTabClick({ index, tabsName }) {
this.setData({
[tabsName]: index
});
},
onChange({ index, tabsName }) {
this.setData({
[tabsName]: index
});
}
});