Link
Cú pháp
<zmp-link>
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 |
|---|---|---|---|
| no-link-class | boolean | Xóa bỏ class "link" trên link element | |
| tab-link | 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 | |
| tab-link-active | 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 | |
| badge-color | string | Thêm màu sắc cho Badge. Xem các màu sắc mặc định | |
| icon-only | 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 | |
| tooltip-trigger | string | hover | Xác định điều kiện xuất hiện tooltip. có thể là hover, click hoặc manual |
| icon-zmp | string | Tên icon trong bộ Zalo Mini App Icons | |
| icon-badge | 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) | |
| reload-current | boolean | Tải lại trang mới | |
| reload-previous | boolean | Tải lại, thay thế các trang trước trong lịch sử với trang mới | |
| reload-all | 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 | |
| reload-detail | 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) | |
| ignore-cache | boolean | Bỏ qua caching | |
| route-tab-id | string | Routable Tab id | |
| route-props | object | Thê props sẽ truyền đến route component đích | |
| prevent-router | boolean | false | Nếu true, link sẽ không được xử lý bởi ZMP router |
| actions-open | string | boolean | CSS selector của action sheet sẽ mở khi người dùng click | |
| actions-close | string | boolean | CSS selector của action sheet sẽ đóng khi người dùng click. Hoặc boolean để đóng action sheet đang mở | |
| popup-open | string | boolean | CSS selector của popup sẽ mở khi click | |
| popup-close | string | boolean | CSS selector của popup sẽ đóng khi người dùng click. Hoặc boolean để đóng popup đang mở | |
| popover-open | string | boolean | CSS selector của popover sẽ mở khi click | |
| popover-close | string | boolean | CSS selector của popover sẽ đóng khi người dùng click. Hoặc boolean để đóng popover đang mở | |
| sheet-open | string | boolean | CSS selector của sheet modal sẽ mở khi click | |
| sheet-close | string | boolean | CSS selector của sheet modal sẽ đóng khi người dùng click. Hoặc boolean để đóng sheet modal đang mở | |
| searchbar-enable | 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 | |
| searchbar-disable | 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 | |
| searchbar-toggle | 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ê | |
| searchbar-clear | 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 | Description |
|---|---|
| @click | Event kích hoạt khi người dùng click vào link |
Ví dụ
Navigation Link
Code demo fallback when rendering server side!