Hướng dẫn sử dụng Navigation trong react-bootstrap
This post hasn't been updated for 7 years
I. Tổng quan về Navigation
Navigation
là 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
Navigation
là một component của bootstrap, vì vậy để sử dụngNavigation
chỉ cần cài đặtreact-bootstrap
react-bootstrap
được cài đặt rất dễ dàng bằng câu lệnhnpm install --save react-bootstrap
hoặc thêm vào filepackage.json
thư viện:
{
"dependencies": {
"react-bootstrap": "0.30.0"
}
}
trước khi chạy câu lệnh npm install
III. Các cách sử dụng Navigation
1. Sử dụng navs dưới dạng pills
và tabs
:
- Sử dụng thẻ
<Nav>
dưới dạngpills
hoặctabs
bằng thuộc tínhbsStyle
với cấu trúc:
<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
<NavItem eventKey={1} href="/home">NavItem 1 content</NavItem>
<NavItem eventKey={2} title="Item">NavItem 2 content</NavItem>
<NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
</Nav>
<Nav bsStyle="pills" onSelect={handleSelect} justified>
<NavItem eventKey={1} href="/home">NavItem 1 content</NavItem>
<NavItem eventKey={2} title="Item">NavItem 2 content</NavItem>
<NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
</Nav>
- Các action được customize trong function
bandleSelect
ở thuộc tínhonSelect
- Có thể disable các
NavItem
bằng cách thêm thuộc tínhdisabled
trong thẻ<NavItem>
- 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
justified
trong thẻ<Nav>
- Với
Nav
, ta dễ dàng style các tab theo chiều dọc bằng các thêm vào thẻ<Nav>
thuộc tínhstacked
- Ngoài ra, với các tab có thêm
sub-menu
dưới dạngdropdown
ta có thể sử dụng thẻ<NavDropdown>
với cấu trúc:
<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
<MenuItem eventKey="4.1">Action</MenuItem>
<MenuItem eventKey="4.2">Another action</MenuItem>
<MenuItem eventKey="4.3">Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4.4">Separated link</MenuItem>
</NavDropdown>
2. Sử dụng Navbars để tạo các header menu:
- Ta có thể dễ dàng tạo một
header menu
bằng cách dùng thẻ<NavBar>
với cấu trúc:
<Navbar>
<Navbar.Header>
<Navbar.Brand>
<a href="#">React-Bootstrap</a>
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.4}>Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
- Có thể thêm thuộc tính
inverse
trong thẻ<Navbar inverse>
để chuyển màu menu sang màu đen. - Thẻ
<Nav>
trongNavbar
được dùng như phần trên. - Với
<NavBar.Header>
để hiển thị logo và link đến trang home của web hoặc app. Trong<NavBar.Header>
, ta có thể dùng thẻ<Navbar.Toggle>
để customize cho button menu trên mobile và dùng thẻ<Navbar.Brand>
để customize cho logo và link đến home. - Khi không có thẻ
<Navbar.Toggle />
, 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ẻ<Navbar.Toggle />
trong<NavBar.Header>
như ví dụ trên, các items trong thẻ<Nav>
sẽ được thu gọn vào 1button
khi chuyển sang chế độ mobile. - Khi dùng thẻ
<Navbar.Toggle />
, tất các các items còn lại được bao trong thẻ<Navbar.Collapse>
. Trong đó, ta có thể customize cácNav
bằng thuộc tínhpullRight
để tạo các items được căn lề phải vàpullLeft
để 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ẻ
<NavBar.Form>
với cấu trúc:
<Navbar>
<Navbar.Header>
<Navbar.Brand>
<a href="#">Brand</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
<Navbar.Form pullLeft>
<FormGroup>
<FormControl type="text" placeholder="Search" />
</FormGroup>
<Button type="submit">Submit</Button>
</Navbar.Form>
</Navbar.Collapse>
</Navbar>
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 react
qua trang chính thức: https://react-bootstrap.github.io/components.html
Tài liệu tham khảo: https://react-bootstrap.github.io/components.html#navigation
Cảm ơn đã theo dõi
All Rights Reserved