react-native-label-select
LabelSelect là một thành phần được sử dụng để tạo lựa chọn nhiều. Modal giống như một hộp kiểm như trong HTML.
Ví dụ
Sử dụng
npm install --save react-native-label-select
import LabelSelect from 'react-native-label-select';
<LabelSelect
ref="labelSelect"
title="Make Choices"
enable={true}
readOnly={false}
enableAddBtn={true}
style={yourStyle}
onConfirm={(list) => {...}}>
<LabelSelect.Label
key={...}
data={itemA}
onCancel={func}>selected ItemA</LabelSelect.Label>
<LabelSelect.ModalItem
key={...}
data={itemB}>Item B</LabelSelect.ModalItem>
</LabelSelect>
Thuộc tính
LabelSelect
| Thuộc tính | Mặc định | Kiểu | Mô tả |
|---|---|---|---|
| style | – | đối tượng | Xác định kiểu cho LabelSelect |
| title | – | chuỗi | Văn bản tiêu đề của modal |
| readOnly | false | bool | thành phần có phải chỉ đọc không |
| enable | true | bool | thành phần có phải tương tác không |
| enableAddBtn | true | bool | có nên hiển thị nút thêm không |
| onConfirm | – | hàm | Kích hoạt khi nút xác nhận của modal được nhấn với danh sách các mục đã chọn mới được truyền làm đối số duy nhất |
| confirmText | – | chuỗi | Văn bản của nút xác nhận. |
| cancelText | – | chuỗi | Văn bản của nút hủy. |
| customStyle | – | đối tượng | Bạn có thể tùy chỉnh kiểu của modal / buttonView / confirmButton / confirmText / cancelButton / cancelText bằng `customStyle. |
LabelSelect.Label
| Thuộc tính | Mặc định | Kiểu | Mô tả |
|---|---|---|---|
| onCancel | – | hàm | Kích hoạt khi nút đóng của Label được nhấn. |
| data | – | bất kỳ | Dữ liệu được gắn với Label |
| customStyle | – | đối tượng | Bạn có thể tùy chỉnh kiểu của text bằng `customStyle. |
LabelSelect.ModalItem
| Thuộc tính | Mặc định | Kiểu | Mô tả |
|---|---|---|---|
| data | – | bất kỳ | Dữ liệu được gắn với ModalItem. Sau khi xác nhận các mục đã chọn trên modal, dữ liệu sẽ được chuyển đến danh sách đã chọn. |
Các Phương thức Thể hiện
| Phương thức | Tham số | Mô tả |
|---|---|---|
| openModal | – | Mở modal lựa chọn |
| cancelSelect | – | Đóng modal lựa chọn. Cũng kích hoạt khi nút hủy của modal được nhấn. |
| customStyle | – | đối tượng |
Sử dụng thuộc tính ref như một mối nối để gọi các phương thức bên trong.
<LabelSelect ref="select">...</LabelSelect>
this.ref.select.openModal()
this.ref.select.cancelSelect()
Thông tin tải về:
Tác giả: xgfe
Nguồn: https://github.com/xgfe/react-native-label-select
Giấy phép: MIT license
