Needless UI

Các component

Mỗi component đều dựa trên phần tử native và có tài liệu kèm ví dụ trực tiếp, API và cách hoạt động với bàn phím.

  • Avatar

    Ảnh của một người, hoặc chữ cái đầu tên của họ trên một màu luôn dành riêng cho họ.

  • Breadcrumbs

    Chuỗi trang dẫn đến trang hiện tại.

  • Button

    Nút hành động và liên kết, tạo kiểu trên phần tử button và anchor native.

  • Lịch

    Chọn một ngày, một khoảng hoặc nhiều ngày, kể cả bằng bàn phím.

  • Carousel

    Một hàng slide cuộn và dừng đúng từng slide, kèm nút, chấm và tự động chuyển.

  • Chat

    Trò chuyện với mô hình: phản hồi dạng stream, công cụ, phiên bản và tệp.

  • Bộ chọn màu

    Một màu trong OKLCH, trên vùng màu hoặc bánh xe màu, với mẫu màu, công cụ hút màu và kiểm tra độ tương phản.

  • Combobox

    Ô nhập văn bản gợi ý các tùy chọn khi bạn gõ.

  • Bảng lệnh

    Mọi lệnh trong ứng dụng, chỉ cách một lần bấm phím.

  • Bộ chọn ngày

    Gõ ngày hoặc giờ theo từng phân đoạn, hoặc chọn trên lịch.

  • Dialog

    Cửa sổ modal dựa trên phần tử dialog native, focus do trình duyệt quản lý.

  • Vùng thả tệp

    Thả hoặc chọn tệp, kèm kiểm tra, xem trước và tải lên có hiển thị tiến trình.

  • Trình soạn thảo văn bản

    Tiêu đề, danh sách, liên kết và định dạng, có thanh công cụ và Markdown ngay khi gõ.

  • Trạng thái trống

    Hiển thị gì khi không có gì để hiển thị, và nên làm gì tiếp theo.

  • Bảng dữ liệu

    Sắp xếp, lọc, nhóm, chỉnh sửa và xuất bao nhiêu dòng cũng được.

  • Markdown

    Render Markdown an toàn, kể cả khi nội dung đang được stream.

  • Mặt nạ nhập liệu

    Ô văn bản tự định dạng ngay khi gõ: ngày tháng, số thẻ, IBAN, các loại mã.

  • Menu

    Danh sách hành động dạng popup, có menu con, mục có thể đánh dấu và hỗ trợ bàn phím đầy đủ.

  • Ô nhập số

    Ô nhập số có nút tăng giảm, định dạng theo từng locale.

  • Ô nhập OTP

    Mã xác minh trong các ô riêng biệt, trên một ô nhập thật duy nhất.

  • Ô nhập số điện thoại

    Bộ chọn quốc gia và số điện thoại, được chia nhóm theo cách viết của quốc gia đó.

  • Popover

    Bảng nổi cạnh một nút, và tooltip nâng cao khi di chuột qua.

  • Đánh giá

    Những ngôi sao để đánh giá, dựa trên các nút radio thật.

  • Bộ lập lịch

    Xem sự kiện theo tháng, tuần, ngày, lịch biểu hoặc timeline của phòng và người, và kéo chúng vào đúng chỗ.

  • Select

    Chọn một hoặc nhiều tùy chọn, từ danh sách ngắn hay cực dài.

  • Skeleton

    Phần giữ chỗ giữ nguyên bố cục trong khi nội dung đang tải.

  • Bộ chia ngăn

    Các ngăn nằm cạnh nhau hoặc xếp chồng, với tay nắm để đổi kích thước.

  • Toast

    Thông báo ngắn xếp chồng, vuốt để bỏ và không bao giờ cướp focus.

  • Tour hướng dẫn

    Mỗi bước là một thẻ nằm cạnh phần được giới thiệu, phần còn lại của trang được làm tối.