Sử dụng Popovers trong react-bootstrap
Bài đăng này đã không được cập nhật trong 7 năm
I. Tổng quan về Popovers
Popovers
là một meta component của bootstrap hỗ trợ tạo một popup nhỏ có nội dung như một chú thích của một phần tử trong trang.Popovers
được sử dụng rất dễ dàng với cấu trúc đơn giản như dạng html.
II. Cài đặt
Popovers
là một component của bootstrap, vì vậy để sử dụngPopovers
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 Popovers
1. Một ví dụ đơn giản nhất về Popovers - Tooltips:
- Tooltips có thể coi như một dạng Popovers đơn giản nhất với chỉ một
title
. - Hiển thị
tooltips
bằng thẻ<Tooltip>
với cấu trúc:
<Tooltip placement="right" className="in" id="tooltip-right">
Tooltip right
</Tooltip>
- Trong đó
placement
là thuộc tính cho phép tùy chỉnh hướng hiển thị của tooltips bao gồm các giá trịleft
,top
,bottom
,right
, default là giá trịright
. id
là thuộc tính bắt buộc củatooltips
- Ngoài ra, nội dung của
tooltips
cũng có thể tùy chỉnh thêm bằng các thẻ<b></b>
,<strong></strong>
... - Nếu có thuộc tính
className="in"
thìtooltips
sẽ luôn hiển thị trên trang. - Để
tooltips
chỉ xuất hiện khi tác động vào một phần tử khác, cần sử dụng thẻ<OverlayTrigger>
với cấu trúc:
<OverlayTrigger placement="right" overlay={tooltip}>
<Button bsStyle="default">Holy guacamole!</Button>
</OverlayTrigger>
- Cấu trúc của thẻ
<OverlayTrigger>
tương đối đơn giản vớiplacement
tương tự như thuộc tính của thẻ<Tooltip>
vàoverlay
là thuộc tính bắt buộc, có nội dung là thẻ<Tooltip>
đã tạo như trên. - Ngoài ra, một số thuộc tính hay được sử dụng có thể kể đến như:
rootClose
với thuộc tính default làfalse
để xác định xem có ẩn nội dungtooltips
khi click ra ngoài hay không.trigger
cho phép lựa chọn các action để hiệntooltips
nhưclick
,hover
,focus
... giá trị default của thuộc tính này là ['hover', 'focus']
Như vậy là ta đã tạo được một Popovers đơn giản nhất dưới dạng tooltips. Tiếp theo ta sẽ tìm hiểu cách tạo một Popovers chuẩn với nội dung đầy đủ hơn.
2. Ví dụ về Popovers:
- Một
Popovers
được tạo ra bằng thẻ<Popover>
với cấu trúc:
<Popover id="popover-basic" placement="right" positionLeft={200} positionTop={50} title="Popover right">
And here's some <strong>amazing</strong> content. It's very engaging. right?
</Popover>
- Thay vì sử dụng
tooltip
trongoverlay
của thẻ<OverlayTrigger>
, ta sử dụng<Popover>
vừa tạo để hiển thị nội dung như mộtmodal
với phầnheader
là nội dung của thuộc tínhtitle
và phầnbody
là content của phần tử này. - Các thuộc tính của
Popovers
tương tự như các thuộc tính củaTooltips
và được bổ sung thêm các thuộc tính:positionLeft
,positionTop
giúp căn chỉnhposition
choPopovers
.title
là phầnheader
choPopovers
được hiển thị, với giá trị có thể lànode
hoặcstring
.
Như vậy là ta đã tạo được một Popovers đơn giản với nhiều tùy chỉnh. Tiếp theo ta sẽ tìm hiểu cách tạo một Popovers nâng cao.
3. Ví dụ về Popovers nâng cao - customize Overlay:
- Ta có thể tạo một
Popovers
bằng cách customize mộtOverlay
như sau:
<Overlay
show={this.state.show}
onHide={() => this.setState({ show: false })}
placement="right"
container={this}
target={() => ReactDOM.findDOMNode(this.refs.target)}
>
content
</Overlay>
- Thay vì sử dụng thẻ
<OverlayTrigger>
bao ngoài đối tượng được sử dụng action thì ta dùng thẻ<Overlay>
với content là một<Tooltip>
,<Popover>
, hoặc một node tự customize cho việc hiển thị nội dung chú thích. - Ta có thể custom thẻ
<Overlay>
với các thuộc tính thông dụng như:show
để hiển thịOverlay
hay không với giá trịtrue
vàfalse
.rootClose
vàplacement
tương tựPopovers
.container
vàtarget
là trường bắt buộc.
V. Kết luận
Trên đây là những ví dụ từ cơ bản đến nâng cao trong việc sử dụng Popovers
của react-bootstrap
để tạo ra các chú thích cho một phần tử. 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 và demo:
- https://react-bootstrap.github.io/components.html#tooltips
- https://react-bootstrap.github.io/components.html#popovers
- https://react-bootstrap.github.io/components.html#custom-overlays
Cảm ơn đã theo dõi
All rights reserved