Sử dụng Popovers trong react-bootstrap

Bài đăng này đã không được cập nhật trong 8 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ụng Popovers chỉ cần cài đặt react-bootstrap
react-bootstrap được cài đặt rất dễ dàng bằng câu lệnh npm install --save react-bootstrap hoặc thêm vào file package.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ủa tooltips
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ới placement tương tự như thuộc tính của thẻ <Tooltip> và overlaylà 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 dung tooltips khi click ra ngoài hay không.
- trigger cho phép lựa chọn các action để hiện tooltips 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 trong overlay của thẻ <OverlayTrigger>, ta sử dụng <Popover> vừa tạo để hiển thị nội dung như một modal với phần header là nội dung của thuộc tính title và phần body 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ủa Tooltips và được bổ sung thêm các thuộc tính:
- positionLeft, positionTop giúp căn chỉnh position cho Popovers.
- title là phần header cho Popovers được hiển thị, với giá trị có thể là node hoặc string.

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ột Overlay 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:

Cảm ơn đã theo dõi

React Bootstrap