Giới thiệu Yumma UI

Chúng tôi đã gợi ý về điều này trong một thời gian, nhưng hôm nay, cuối cùng chúng tôi cũng đã giới thiệu Yumma UI! Đây là một bộ các thành phần React được xây dựng dựa trên Yumma CSS và Base UI.

Nội dung trong Yumma UI

Bạn có thể kiểm tra phần thành phần để tìm hiểu thêm về các thành phần có sẵn, nhưng dưới đây là danh sách các thành phần hiện có:

import { 
    Alert, 
    Avatar, 
    Badge, 
    Button, 
    Card, 
    Checkbox, 
    Input, 
    Radio, 
    Select, 
    Tabs 
} from "@yummacss/ui";

Hỗ trợ TypeScript

Nếu bạn sử dụng TypeScript, bạn có thể nhập các kiểu từ @yummacss/ui. Bạn cũng có thể kích hoạt intellisense cho các props của từng thành phần trong bất kỳ trình soạn thảo mã nào hỗ trợ nó.

import type { ButtonProps } from "@yummacss/ui";

Tree Shaking

Tất cả các thành phần trong @yummacss/ui đều có khả năng tree-shake. Điều này có nghĩa là bạn chỉ gửi đi mã mà bạn thực sự sử dụng.

import { Button } from "@yummacss/ui";
import { Button, Card, Input } from "@yummacss/ui";

Bắt đầu với Yumma UI

Yumma UI có sẵn dưới dạng gói trên npm. Bạn có thể cài đặt nó bằng cách sử dụng trình quản lý gói yêu thích của bạn:

1. Cài đặt Yumma UI

   bash Copy

   npm install @yummacss/ui

2. Nhập styles

   Nhập các style của Yumma UI vào dự án của bạn.

   javascript Copy

   import "@yummacss/ui/styles.css";
   import "./globals.css";

3. Nhập các thành phần

   Đó là tất cả những gì bạn cần làm.

   javascript Copy

   import { Button } from "@yummacss/ui";
   
   export default function App() {
       return <Button variant="base">Đăng nhập</Button>;
   }

Những điều tiếp theo

Phiên bản 0.1.0 này chỉ là khởi đầu. Chúng tôi rất có thể sẽ thêm 10 thành phần mới cho mỗi bản phát hành nhỏ, nhưng chúng tôi cũng rất sẵn lòng nhận phản hồi từ cộng đồng. Vì vậy, nếu bạn có bất kỳ ý tưởng nào, hãy mở một vấn đề hoặc gửi cho chúng tôi một tweet.

• Thêm các thành phần: Combobox, Toast, Tooltip, Menubar và nhiều hơn nữa
• Thành phần tùy chỉnh: Tùy chỉnh màu sắc, kiểu chữ, độ tròn và các lựa chọn thiết kế khác
• Hỗ trợ framework: Hỗ trợ cho các framework khác như Astro
• Và nhiều hơn nữa...

Những suy nghĩ cuối cùng

Chúng tôi không thể chờ đợi để xem bạn xây dựng gì với Yumma UI! Hãy nhớ rằng, đây là bản phát hành đầu tiên của chúng tôi và hiện tại chỉ dành cho các framework React, nhưng chúng tôi đang làm việc để hỗ trợ cho các framework khác.

Thực hành tốt nhất

• Sử dụng các thành phần đã được tối ưu hóa: Chỉ sử dụng các thành phần mà bạn cần để giảm tải mã.
• Tùy chỉnh mạnh mẽ: Sử dụng các props để điều chỉnh các thành phần theo nhu cầu thiết kế của bạn.
• Kiểm tra tính tương thích: Đảm bảo rằng các thành phần hoạt động tốt với các trình duyệt mà bạn nhắm đến.

Những cạm bẫy thường gặp

• Không sử dụng tree shaking: Đảm bảo bạn chỉ nhập các thành phần bạn cần để tối ưu hóa kích thước gói.
• Không kiểm tra các kiểu trong TypeScript: Sử dụng TypeScript để có trải nghiệm phát triển tốt hơn và giảm thiểu lỗi.

Mẹo hiệu suất

• Tối ưu hóa CSS: Sử dụng các lớp CSS của Yumma để có hiệu suất tốt hơn trong việc tải trang.
• Sử dụng lazy loading cho các thành phần nặng: Giúp tối ưu hóa thời gian tải trang.

Giải quyết sự cố

• Nếu gặp vấn đề với việc cài đặt, hãy kiểm tra phiên bản của React và đảm bảo rằng nó tương thích với Yumma UI.
• Kiểm tra các lỗi console trong trình duyệt để tìm hiểu thêm về các vấn đề xảy ra khi sử dụng các thành phần.

Câu hỏi thường gặp (FAQ)

1. Yumma UI có hỗ trợ các framework khác không?
   Hiện tại chỉ hỗ trợ React nhưng chúng tôi đang làm việc để mở rộng hỗ trợ cho các framework khác.
2. Có thể tùy chỉnh các thành phần không?
   Có, bạn có thể tùy chỉnh màu sắc, kiểu chữ và nhiều hơn nữa thông qua các props.
3. Yumma UI có miễn phí không?
   Có, Yumma UI là mã nguồn mở và hoàn toàn miễn phí sử dụng.

Kết luận

Hãy tham gia vào cộng đồng Yumma UI và chia sẻ những dự án của bạn! Chúng tôi rất mong nhận được phản hồi và ý kiến từ bạn để cải thiện sản phẩm này. Hãy bắt đầu xây dựng với Yumma UI ngay hôm nay!