Link

Link Component

Link là component chính có chức năng tạo liên kết giúp chuyển trang, mở tabs,...

Link Properties

Prop	Type	Default	Description
noLinkClass	boolean		Xóa bỏ class "link" trên link element
tabLink	string | boolean		Trở thành tab link element và xác định CSS selector của tab cụ thể mà link liên kết đến
tabLinkActive	boolean		Kích hoạt tab link được khai báo ở tabLink
text	string		Link text
badge	string | number		Số đếm hiện trên Badge
badgeColor	string		Thêm màu sắc cho Badge. Xem các màu sắc mặc định
iconOnly	boolean		Khi sử dụng Navbar/Tabbar có thể set iconOnly thành true để Navbar/Tabbar chỉ bao gồm icon
tooltip	string		Nội dung tooltip hiện lên khi người dùng click/hover
tooltipTrigger	string	hover	Xác định điều kiện xuất hiện tooltip. có thể là hover, click hoặc manual
iconZMP	string		Tên icon trong bộ Zalo Mini App Icons
iconBadge	string | number		Thêm badge cho Icon
href	string | boolean	#	URL của trang cần tải. Trường hợp href="false" sẽ không thêm href tag vào link element target
view	string		CSS selector của View component sẽ tải trang. hoặc current để load trên View component hiện tại.
back	boolean		Kích hoạt back navigation link
force	boolean		Buộc tải trang và bỏ qua trang trước đó trong lịch sử (sử dụng cùng với back prop)
reloadCurrent	boolean		Tải lại trang mới
reloadPrevious	boolean		Tải lại, thay thế các trang trước trong lịch sử với trang mới
reloadAll	boolean		Tải trang mới và xóa tất cả các trang trước ra khỏi lịch sử và DOM
reloadDetail	boolean		Tải lại Trang Detail trong Master Detail view
animate	boolean		Disables pages animation
transition	string		Tên hiệu ứng chuyển trang (zmp-circle | zmp-cover | zmp-cover-v | zmp-dive | zmp-fade | zmp-flip | zmp-parallax | zmp-push)
ignoreCache	boolean		Bỏ qua caching
routeTabId	string		Routable Tab id
routeProps	object		Thê props sẽ truyền đến route component đích
preventRouter	boolean	false	Nếu true, link sẽ không được xử lý bởi ZMP router
actionsOpen	string | boolean		CSS selector của action sheet sẽ mở khi người dùng click
actionsClose	string | boolean		CSS selector của action sheet sẽ đóng khi người dùng click. Hoặc boolean để đóng action sheet đang mở
popupOpen	string | boolean		CSS selector của popup sẽ mở khi click
popupClose	string | boolean		CSS selector của popup sẽ đóng khi người dùng click. Hoặc boolean để đóng popup đang mở
popoverOpen	string | boolean		CSS selector của popover sẽ mở khi click
popoverClose	string | boolean		CSS selector của popover sẽ đóng khi người dùng click. Hoặc boolean để đóng popover đang mở
sheetOpen	string | boolean		CSS selector của sheet modal sẽ mở khi click
sheetClose	string | boolean		CSS selector của sheet modal sẽ đóng khi người dùng click. Hoặc boolean để đóng sheet modal đang mở
searchbarEnable	string | boolean		CSS selector của Expandable Searchbar sẽ kích hoạt khi người dùng click. Hoặc boolean để kích hoạt Searchbar tìm thấy đầu tiên
searchbarDisable	string | boolean		CSS selector của Expandable Searchbar sẽ vô hiệu hóa khi người dùng click. Hoặc boolean để vô hiệu hóa Searchbar tìm thấy đầu tiên
searchbarToggle	string | boolean		CSS selector của Expandable Searchbar sẽ toggle khi người dùng click. Hoặc boolean để toggle Searchbar tìm thấy đầu tiê
searchbarClear	string | boolean		CSS selector của Expandable Searchbar sẽ xóa dữ liệu khi người dùng click. Hoặc boolean để xóa dữ liệu của Searchbar được tìm thấy đầu tiên

Link Events

Event	prop	Description
click	onClick	Event kích hoạt sau khi người dùng click lên link

Ví dụ

Navigation Link

<Link href='/about/'>About</Link>

Back Navigation Link

<Link back>Back</Link>

With Router Parameters

<Link href='/about/' animate={false} ignoreCache={true}>
  About
</Link>

Tab Link

{/* Tabs */}
<Tabs>
 <Tab id="tab-1" tabActive>Tab 1</Tab>
 <Tab id="tab-2">Tab 2</Tab>
</Tabs>
{/* Switch Between Tabs */}
<Link tabLink="#tab-1" tabLinkActive>Show Tab 1</Link>
<Link tabLink="#tab-2">Show Tab 2</Link>

Routable Tabs

{/* Tabs */}
<Tabs>
 <Tab id="tab-1"></Tab>
 <Tab id="tab-2"></Tab>
</Tabs>
{/* Chuyển đổi giữa các Tabs */}
<Link tabLink routeTabId="tab-1" href="/tabs/">Show Tab 1</Link>
<Link tabLink routeTabId="tab-2" href="/tabs/tab-2/">Show Tab 2</Link>

With Icon & Color

<Link iconZMP='zi-more-diamond-solid' text='Home' color='red'></Link>