Những thư viện thành phần chưa được định kiểu để xây dựng app React có thể tùy biến

Kandy parfume

• 0

  1. Radix UI

  Radix UI là một thư viện thành phần chưa tạo kiểu, tập trung vào khả năng truy cập. Nó cung cấp một tập hợp các thành phần giao diện được thiết kế để tất cả người dùng có thể truy cập được. Bạn có thể xây dựng các ứng dụng React đẹp mắt bằng Radix UI.

  Radix UI

  Khi làm việc với Radix UI, bạn có thể cài đặt từng thành phần cần thiết thay vì toàn bộ thư viện. Điều này đảm bảo bạn giữ cho ứng dụng luôn gọn nhẹ.

  Ví dụ, nếu chỉ cần một thành phần accordion, bạn có thể cài đặt nó trong ứng dụng bằng cách chạy lệnh:

  npm install @radix-ui/react-accordion

  Sau khi cài đặt thành phần accordion, bạn có thể tạo chúng trong app React.

  Ví dụ về cách dùng thành phần accordion:

  import React from "react"
  import * as Accordion from "@radix-ui/react-accordion"
  
  export default function App() {
    return (
      <div>
        <Accordion.Root type="single" defaultValue="item-1" collapsible>
          <Accordion.Item value="item-1">
            <Accordion.Trigger>Is this accordion unstyled?</Accordion.Trigger>
            <Accordion.Content>Yes. It is unstyled.</Accordion.Content>
          </Accordion.Item>
        </Accordion.Root>
      </div>
    )
  }

  Khối code trên thiết lập thành phần accordion chưa được tạo kiểu bằng thư viện @radix-ui/react-accordion, cho phép thu gọn các mục với nội dung có thể tùy biến.
  Code này sẽ tạo một accordion như sau:

  

• 0

  2. React Aria

  Thư viện React Aria là một nhóm hook xây dựng giao diện người dùng trong React. Thư viện này khiến việc tạo ứng dụng web có thể truy cập dễ hơn bằng cách cung cấp một bộ sưu tập thành phần tuân thủ những phương pháp hay nhất về khả năng truy cập.

  React Aria

  Adobe đã phát triển và duy trì thư viện React Aria. Thư viện này là một phần của Adobe Spectrum Design System mở rộng hơn, cung cấp một tập hướng dẫn thiết kế toàn diện và tài nguyên cho việc xây dựng giao diện người dùng dễ truy cập. Các thành phần này được cung cấp bởi thư viện React Aria chưa được tạo kiểu, cho phép bạn tùy biến các thành phần theo nhu cầu.

  Để dùng React Aria trong ứng dụng React, cài đặt nó bằng cách chạy lệnh sau:

  npm install react-aria

  Đây là ví dụ về cách tạo một thành phần nút bấm bằng hook useButton:

  import React from 'react'
  import {useButton} from 'react-aria';
  
  function Button(props: any) {
    let ref = React.useRef(null);
    let { buttonProps } = useButton(props, ref);
  
    return (
      <button {...buttonProps} ref={ref}>
        {props.children}
      </button>
    );
  }
  
  export default Button;

  Giờ bạn có thể nhập và hiện thành phần button ở bất kỳ thành phần khác đã chọn.

  Ví dụ:

  import React from 'react'
  import Button from './Button';
  
  function App() {
    return (
      <Button>Click Me</Button>
    );
  }
  
  export default App;

  Khi hiện khối code trên, nó sẽ tạo một nút bấm đơn giản trông giống như thế này:

  

  Nếu dùng React Aria không thoải mái do hook, thay vào đó, hãy dùng React Aria Components. Thư viện này cung cấp các thành phần được tạo trước mà mặc định có thể truy cập. Nó là một layer mỏng nằm ở phía trên thư viện React Aria. Các thành phần được cung cấp chưa được tạo kiểu, vì thế hai thư viện này tương tự nhau.

• 0

  3. Base UI

  Base UI là một thư viện React UI chưa được tạo kiểu. Đội Material UI đã tạo Base UI với một nhóm thành phần cơ bản mà bạn có thể dùng để xây dựng ứng dụng React tùy chỉnh riêng. Họ xây dựng thư viện Base UI dựa trên kỹ thuật mạnh mẽ giống như của Material UI, nhưng Base UI không triển khai Material Design.

  Base UI

  Bạn có thể cài đặt Base UI trong ứng dụng React bằng lệnh này:

  npm install @mui/base

  Base UI cung cấp các thành phần nhanh chóng, nghĩa là bạn có thể trực tiếp nhập và sử dụng các thành phần từ thư viện. Nó cũng cung cấp hook mà bạn có thể dùng để tạo & cấu hình các thành phần.

  Đây là ví dụ về cách dùng các thành phần Base UI:

  import React from "react";
  import Button from "@mui/base/Button";
  
  export default function App() {
    return (
      <div>
        <Button>Click Me</Button>
      </div>
    );
  }

  Code này tạo một nút bấm đơn giản bằng thành phần Button của thư viện Base UI. Bạn cũng có thể dùng hook useButton để triển khai cùng nhiệm vụ này.

  import React from "react";
  import useButton from "@mui/base/useButton";
  
  export default function App() {
    const { getRootProps } = useButton();
  
    return (
      <div>
        <button {...getRootProps()}>Click Me</button>
      </div>
    );
  }

  Hook useButton và Button sẽ tạo một nút bấm chưa được tạo kiểu như ảnh ở hình bên dưới.

  

• 0

  4. Headless UI

  Thư viện khác mà bạn có thể khám phá là Headless UI, cung cấp các thành phần UI chưa được tạo kiểu, cho bạn thoải mái tùy biến giao diện và hành vi của các thành phần UI như ý muốn.

  Headless UI

  Bạn có thể cài đặt thư viện này bằng lệnh sau:

  npm install @headlessui/react

  Sau khi cài đặt thư viện này, bạn có thể dùng một số thành phần mà thư viện cung cấp trong ứng dụng React.

  Ví dụ:

  import React from "react";
  import { Popover } from "@headlessui/react";
  
  export default function App() {
    return (
      <div>
        <Popover>
          <Popover.Button>Popover</Popover.Button>
  
          <Popover.Panel>
            <p>This is a Popover</p>
          </Popover.Panel>
        </Popover>
      </div>
    );
  }

  Ở ví dụ này, bạn tạo một cửa sổ bật lên bằng thành phần Popover từ thư viện Headless UI. Khối code trên sẽ tạo một popover như sau:

  

• Hi vọng bài viết có lựa chọn phù hợp với bạn!

0 Bình luận

Sắp xếp theo Mặc địnhMới nhấtCũ nhất

Xóa Đăng nhập để Gửi

Lập trình

• SQL
• Python
• Cơ sở dữ liệu
• AngularJS
• Cấu trúc dữ liệu và giải thuật