• Tiếng Việt

      • Thành phần dùng chung

      NocoBase client v2 tích hợp sẵn một nhóm thành phần dùng chung. Khi xây dựng trang plugin, trang thiết lập hoặc biểu mẫu, bạn có thể dùng trực tiếp các thành phần này để tái sử dụng UI và tương tác đã được NocoBase chuẩn bị.

      Phần này sắp xếp các thành phần theo tình huống sử dụng. Mỗi trang chỉ giới thiệu một thành phần: dùng khi nào, API thường dùng và có thể xem trước trong tài liệu hay không.

      Tra cứu nhanh

      Tôi muốn...Xem ở đâu
      Điều khiển trình quét toàn màn hình cấp thấpCodeScanner
      Đặt biểu mẫu chuẩn trong dialogDialogFormLayout
      Đặt biểu mẫu chuẩn trong drawerDrawerFormLayout
      Chỉ cho phép biến môi trường $envEnvVariableInput
      Nhập kích thước tệp và lưu dưới dạng byteFileSizeInput
      Chỉnh sửa cấu hình JSON / JSON5JsonTextArea
      Nhập mật khẩu kèm chỉ báo độ mạnhPasswordInput
      Tải tùy chọn Select bất đồng bộ từ APIRemoteSelect
      Thêm hỗ trợ quét vào ô nhậpScanInput
      Cho phép trường nhận cả hằng số và biếnTypedVariableInput
      Cho phép trường một dòng nhận biến như {{ $env.X }} và {{ $user.name }}VariableInput
      Chèn biến vào cấu hình JSON / JSON5VariableJsonTextArea
      Cho phép văn bản nhiều dòng nhận biếnVariableTextArea
      Lọc Collection bằng nhiều điều kiệnCollectionFilter
      Nhúng panel lọc Collection vào trangCollectionFilterPanel
      Tùy chỉnh hàng có thể kéo của antd TableSortableRow
      Tùy chỉnh cột tay nắm kéo của TableSortHandle
      Hiển thị danh sách, chọn hàng và sắp xếp kéo thả trong trang thiết lậpTable
      Dùng biểu tượng Ant Design hoặc đăng ký biểu tượng tùy chỉnhIcon
      Tạo registry nội bộ cho mục mở rộng plugincreateFormRegistry

      Cách dùng

      Nhập các thành phần cần dùng trong plugin phía client, rồi dùng như các thành phần React thông thường:

      import { RemoteSelect, Table } from '@nocobase/client-v2';

function SettingsPage() {
  return (
    <>
      <RemoteSelect request={loadOptions} />
      <Table rowKey="id" columns={columns} dataSource={records} />
    </>
  );
}

      Gợi ý lựa chọn

      Mặc định dùng React + Antd là đủ. Với các tình huống phổ biến trong plugin NocoBase, hãy kiểm tra các thành phần này trước:

      • Mở biểu mẫu drawer hoặc dialog trong trang thiết lập
      • Chèn biến, chỉnh sửa JSON, nhập kích thước tệp hoặc quét mã trong trường biểu mẫu
      • Dùng bộ lọc Collection hoặc sắp xếp kéo thả trong trang danh sách
      • Dùng điểm vào biểu tượng thống nhất của NocoBase

      Với input, nút và thông báo thông thường, thành phần Antd thường rõ ràng hơn.

      Liên kết liên quan