--- title: "Ví dụ menu cuộn ngang React — trực tiếp, kèm code" description: "Các ví dụ về react-horizontal-scrolling-menu: mũi tên, kéo để cuộn, tab cuộn được, RTL, dọc, vòng lặp vô hạn, tự phát — mỗi cái có nguồn sao chép-dán." canonical: "https://react-horizontal-scrolling-menu.dev/vi/examples" --- # Ví dụ: mọi pattern, trực tiếp, với nguồn đầy đủ > Mỗi ví dụ là một bản demo hoạt động của gói npm đã xuất bản cộng với file đầy đủ phía sau nó: sẵn sàng sao chép-dán, và có thể chỉnh sửa trực tiếp trong Storybook. Được render trên server như mọi thứ khác trên trang web này. Links below point at the Markdown of each example; drop the `.md` for the rendered page. --- ## Cơ bản - [Bắt đầu](https://react-horizontal-scrolling-menu.dev/vi/examples/simple.md) — Menu tối giản: các mục, hai mũi tên, khả năng hiển thị sẵn sàng. - [Một mục mỗi view](https://react-horizontal-scrolling-menu.dev/vi/examples/one-item.md) — Menu rộng một mục — một thẻ lấp đầy hàng. - [Cuộn từng mục một](https://react-horizontal-scrolling-menu.dev/vi/examples/one-item-scroll.md) — Các mũi tên tiến một mục thay vì cả trang. - [Mũi tên dưới menu](https://react-horizontal-scrolling-menu.dev/vi/examples/bottom-arrows.md) — Mũi tên là component của bạn — đặt chúng ở đâu cũng được. ## Vị trí và cuộn - [Căn giữa mục được bấm](https://react-horizontal-scrolling-menu.dev/vi/examples/center-on-click.md) — scrollToItem với inline: center — pattern tab cuộn được. - [Cuộn đến một mục theo id](https://react-horizontal-scrolling-menu.dev/vi/examples/scroll-to-item.md) — Với vào trong menu từ bên ngoài bằng apiRef. - [Lưu và khôi phục vị trí cuộn](https://react-horizontal-scrolling-menu.dev/vi/examples/save-restore-position.md) — Giữ độ lệch cuộn qua các lần unmount và tải lại trang. - [Hoạt ảnh cuộn tùy chỉnh](https://react-horizontal-scrolling-menu.dev/vi/examples/custom-transition.md) — Mang easing và thời lượng của riêng bạn cho các lần cuộn lập trình. - [Chỉ báo tiến độ cuộn](https://react-horizontal-scrolling-menu.dev/vi/examples/progress.md) — Một thanh tiến độ chạy theo mục nào đang hiển thị. ## Đầu vào và cử chỉ - [Kéo để cuộn bằng chuột](https://react-horizontal-scrolling-menu.dev/vi/examples/mouse-drag.md) — Kéo chuột mà vẫn để các cú bấm mục hoạt động. - [Vuốt trên desktop](https://react-horizontal-scrolling-menu.dev/vi/examples/swipe-desktop.md) — Vuốt theo quán tính cho người dùng chuột. - [Ẩn mũi tên trên di động](https://react-horizontal-scrolling-menu.dev/vi/examples/mobile-swipe-only.md) — Chỉ cuộn bằng cảm ứng trên màn hình nhỏ, mũi tên trên desktop. - [Ngăn cuộn body](https://react-horizontal-scrolling-menu.dev/vi/examples/prevent-body-scroll.md) — Con lăn trên menu cuộn menu, không phải trang. ## Mục động - [Tải thêm khi thấy điểm cuối](https://react-horizontal-scrolling-menu.dev/vi/examples/add-items.md) — Thêm vô hạn chạy theo khả năng hiển thị của mục cuối. - [Thêm một mục và cuộn đến nó](https://react-horizontal-scrolling-menu.dev/vi/examples/add-item-and-scroll-to-it.md) — Pattern chip bộ lọc: thêm vào, rồi đưa vào view. - [Hoạt ảnh mục vào và ra](https://react-horizontal-scrolling-menu.dev/vi/examples/items-animation.md) — Hoạt ảnh thêm/xóa với @formkit/auto-animate. - [5,000 mục và vẫn nhanh](https://react-horizontal-scrolling-menu.dev/vi/examples/performance.md) — Cuộn gốc mở rộng được — không cần ảo hóa ở đây. ## Bố cục - [Menu dọc](https://react-horizontal-scrolling-menu.dev/vi/examples/vertical.md) — Cùng một menu, cuộn từ trên xuống dưới. - [Phải sang trái](https://react-horizontal-scrolling-menu.dev/vi/examples/rtl.md) — RTL lật hướng; mũi tên và phân trang theo sau. ## Recipe - [Vòng lặp vô hạn](https://react-horizontal-scrolling-menu.dev/vi/examples/infinite-loop.md) — Vòng lặp liền mạch từ API công khai — không thay đổi thư viện. - [Tự phát](https://react-horizontal-scrolling-menu.dev/vi/examples/autoplay.md) — Một vòng lặp tự tiến với hành vi tạm dừng dễ tiếp cận. --- More examples: · Library summary for LLMs: Package: `npm install react-horizontal-scrolling-menu` · MIT ·