Đã đăng vào thg 6 27, 2017 4:22 CH 4 phút đọc 4 phút đọc
I. Tổng quan- Ngoài các components lớn như Overlays, Navigation, Form, ... react-bootstrap còn hỗ trợ các components nhỏ phải kế đến như Glyphicons, Labels, Badges, Alert messages, Progress bars...
- Glyphicons được sử dụng để tạo các icon nhỏ trong các button.
- Labels được sử dụng để tạo highlight cho các thông tin cần nhấn mạnh.
- Badges được sử dụng để highlight cho các items mới hoặc chưa đọc.
- Alerts giúp tạo các messages thông báo.
- Progress bars tạo các thanh hiển thị tiến độ.
II. Cài đặt- Các component của bootstrap được sử dụng khi cài đặt
react-bootstrap. react-bootstrap được cài đặt rất dễ dàng bằng câu lệnh <ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
0 hoặc thêm vào file <ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
1 thư viện:
{
"dependencies": {
"react-bootstrap": "0.30.0"
}
}
trước khi chạy câu lệnh <ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
2.III. Hướng dẫn sử dụng1. Sử dụng Glyphicons:<ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
- Ta sẽ có kết quả:
- Thuộc tính
<ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
4 là bắt buộc, có thể tham khảo danh sách các icon tại <ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
5.
Vậy là ta đã thấy tạo một icon cho button thật dễ dàng với react-bootstrap 2. Sử dụng Labels:- Labels cũng được sử dụng rất dễ dàng với cấu trúc:
<Label bsStyle="default">Default</Label>
<ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
6 là không bắt buộc, nếu không khai báo thì mặc định sẽ là <ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
7.- Khi sử dụng
<ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
6, ta có thể khai báo với các giá trị: <ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
9. - Kết quả tương ứng với các giá trị của
<ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
6:
Như vậy, sử dụng label cũng thật dễ dàng. 3. Sử dụng Badges:- Tương tự như
<Label bsStyle="default">Default</Label>
1, <Label bsStyle="default">Default</Label>
2 được thiết kế riêng để hiển thị cho các con số đặc biệt như số items mới, số thông báo... <Label bsStyle="default">Default</Label>
2 được sử dụng đơn giản như <Label bsStyle="default">Default</Label>
1:
<p>Badges <Badge>42</Badge></p>
- Kết quả thu được như sau:
<Label bsStyle="default">Default</Label>
2 còn có thuộc tính <Label bsStyle="default">Default</Label>
6 không bắt buộc với giá trị default là <Label bsStyle="default">Default</Label>
7.
4. Cách tạo Alert messages:<Alert bsStyle="warning">
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</Alert>
- Thuộc tính
<ButtonToolbar>
<ButtonGroup>
<Button><Glyphicon glyph="align-left" /></Button>
<Button><Glyphicon glyph="align-center" /></Button>
<Button><Glyphicon glyph="align-right" /></Button>
<Button><Glyphicon glyph="align-justify" /></Button>
</ButtonGroup>
</ButtonToolbar>
6 có thể bao gồm các giá trị <p>Badges <Badge>42</Badge></p>
0 với <p>Badges <Badge>42</Badge></p>
1 là giá trị default. - Ngoài ra còn có các thuộc tính
<p>Badges <Badge>42</Badge></p>
2 với giá trị mặc định <p>Badges <Badge>42</Badge></p>
3 và <p>Badges <Badge>42</Badge></p>
4 được sử dụng khi tạo các <p>Badges <Badge>42</Badge></p>
5 phức tạp, có close button như:
<Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<Button bsStyle="danger">Take this action</Button>
<span> or </span>
<Button onClick={this.handleAlertDismiss}>Hide Alert</Button>
</p>
</Alert>
5. Sử dụng ProgressBar:<ProgressBar now={60} label={60} />
<ProgressBar>
<ProgressBar striped bsStyle="success" now={35} key={1} />
<ProgressBar bsStyle="warning" now={20} key={2} />
<ProgressBar active bsStyle="danger" now={10} key={3} />
</ProgressBar>
- Sẽ thu được kết quả
- Ta cũng có thể sử dụng
<p>Badges <Badge>42</Badge></p>
8 để ẩn label của progress. - Ngoài ra còn một số thuộc tính khác có thể dùng đơn giản:
<p>Badges <Badge>42</Badge></p>
9, <Alert bsStyle="warning">
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</Alert>
0, <Alert bsStyle="warning">
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</Alert>
1
IV. Kết luậnTrên đây là cách dùng một số components nhỏ của react-bootstrap. 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 <Alert bsStyle="warning">
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</Alert>
5 qua trang chính thức: https://react-bootstrap.github.io/components.html Tài liệu tham khảo và demo:- https://react-bootstrap.github.io/components.html#misc
Cảm ơn đã theo dõi All rights reserved | 
