Đã đăng vào thg 3 27, 2017 3:33 SA 3 phút đọc 3 phút đọc
I. Tổng quan về Navigation
Navigationlà một meta component của bootstrap hỗ trợ tạo một menu tiêu đề điều hướng trong app hoặc website.Navigationđược sử dụng rất dễ dàng bằng cách dùng camelCase thay cho css class trong tag.
II. Cài đặt
Navigationlà một component của bootstrap, vì vậy để sử dụngNavigationchỉ cần cài đặtreact-bootstrapreact-bootstrapđược cài đặt rất dễ dàng bằng câu lệnh
1 hoặc thêm vào fileNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
2 thư viện:NavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
{
"dependencies": {
"react-bootstrap": "0.30.0"
}
}
trước khi chạy câu lệnh
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
III. Các cách sử dụng Navigation
1. Sử dụng navs dưới dạng
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
4 và
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
5:
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
- Sử dụng thẻ
6 dưới dạngNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
4 hoặcNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
5 bằng thuộc tínhNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
9 với cấu trúc:NavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
NavItem 1 content
NavItem 2 content
NavItem 3 content
- Các action được customize trong function
0 ở thuộc tínhAction Another action Something else here Separated link
1Action Another action Something else here Separated link - Có thể disable các
2 bằng cách thêm thuộc tínhAction Another action Something else here Separated link
3 trong thẻAction Another action Something else here Separated link
4Action Another action Something else here Separated link - Ta cũng có thể căn chỉnh các tabs thành dạng full-width bằng các thêm vào thuộc tính
5 trong thẻAction Another action Something else here Separated link
6NavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content - Với
7, ta dễ dàng style các tab theo chiều dọc bằng các thêm vào thẻAction Another action Something else here Separated link
6 thuộc tínhNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
9Action Another action Something else here Separated link - Ngoài ra, với các tab có thêm
0 dưới dạngReact-Bootstrap Link Link Action Another action Something else here Separated link
1 ta có thể sử dụng thẻReact-Bootstrap Link Link Action Another action Something else here Separated link
2 với cấu trúc:React-Bootstrap Link Link Action Another action Something else here Separated link
Action
Another action
Something else here
Separated link
2. Sử dụng Navbars để tạo các header menu:
- Ta có thể dễ dàng tạo một
3 bằng cách dùng thẻReact-Bootstrap Link Link Action Another action Something else here Separated link
4 với cấu trúc:React-Bootstrap Link Link Action Another action Something else here Separated link
React-Bootstrap
Link
Link
Action
Another action
Something else here
Separated link
- Có thể thêm thuộc tính
5 trong thẻReact-Bootstrap Link Link Action Another action Something else here Separated link
6 để chuyển màu menu sang màu đen.React-Bootstrap Link Link Action Another action Something else here Separated link - Thẻ
6 trongNavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
8 được dùng như phần trên.React-Bootstrap Link Link Action Another action Something else here Separated link - Với
9 để hiển thị logo và link đến trang home của web hoặc app. TrongReact-Bootstrap Link Link Action Another action Something else here Separated link
9, ta có thể dùng thẻReact-Bootstrap Link Link Action Another action Something else here Separated link
1 để customize cho button menu trên mobile và dùng thẻBrand Link Link Link Right Link Right Submit
2 để customize cho logo và link đến home.Brand Link Link Link Right Link Right Submit - Khi không có thẻ
3, các items trong menu sẽ không thay đổi khi chuyển sang chế độ mobile, ngược lại, khi ta thêm thẻBrand Link Link Link Right Link Right Submit
3 trongBrand Link Link Link Right Link Right Submit
9 như ví dụ trên, các items trong thẻReact-Bootstrap Link Link Action Another action Something else here Separated link
6 sẽ được thu gọn vào 1NavItem 1 content NavItem 2 content NavItem 3 content NavItem 1 content NavItem 2 content NavItem 3 content
7 khi chuyển sang chế độ mobile.Brand Link Link Link Right Link Right Submit - Khi dùng thẻ
3, tất các các items còn lại được bao trong thẻBrand Link Link Link Right Link Right Submit
9. Trong đó, ta có thể customize cácBrand Link Link Link Right Link Right Submit
7 bằng thuộc tínhAction Another action Something else here Separated linkNavigation1 để tạo các items được căn lề phải vàNavigation2 để căn lề trái. - Ngoài các item dưới dạng link, ta cũng có thể tạo các form trong header menu bằng thẻ
Navigation3 với cấu trúc:
Brand
Link
Link
Link Right
Link Right
Submit
V. Kết luận
Trên đây là những ví dụ cơ bản nhất trong việc sử dụng Navigation của react-bootstrap để tạo ra các menu điều hướng trang. Hi vọng bài viết có thể cung cấp cách nhìn tổng quan, dễ hiểu nhất cho những bạn mới tiếp xúc với các components đơn giản của thư viện react-bootstrap. Chúng ta có thể tìm hiểu rất nhiều components khác rất tiện dụng trong thư viện react-bootstrap của Navigation8 qua trang chính thức: //react-bootstrap.github.io/components.html Tài liệu tham khảo: //react-bootstrap.github.io/components.html#navigation
Cảm ơn đã theo dõi
All rights reserved