Luân xa css
Mọi thứ người dùng nhìn thấy trong ứng dụng hoặc trình duyệt của họ trước tiên đều được quản lý bởi các nhà phát triển giao diện người dùng. Những nhà phát triển giao diện người dùng này sẽ quản lý thiết kế, phân tích mã và gỡ lỗi ứng dụng. Vì vậy, các nhà phát triển giao diện người dùng chịu trách nhiệm về giao diện, thiết kế và cảm nhận của trang web Show Có nhiều công cụ phát triển giao diện người dùng. Chakra UI và Tailwind CSS là hai công cụ phát triển giao diện người dùng Chakra UI là gì? Giao diện người dùng Chakra đơn giản, theo mô-đun và là một thành phần có thể truy cập để xây dựng các ứng dụng React. Chakra UI được ra mắt vào tháng 9 năm 2019. Tính đơn giản, khả năng truy cập, tính mô đun của nó làm cho nó mạnh mẽ hơn. Nó thuộc danh mục thành phần giao diện người dùng. Chakra UI có 17. 1k sao GitHub hiện tại. (nguồn) CSS Tailwind là gì? Tailwind CSS được sử dụng để xây dựng giao diện người dùng của khách hàng. Nó là một khung CSS đầu tiên về tiện ích. Phiên bản đầu tiên của Tailwind CSS i. e, Khung CSS ưu tiên tiện ích được tạo vào năm 2017. Nó có nhiều mẫu được tạo sẵn và người dùng cũng có thể tạo các thiết kế của riêng mình. CSS Tailwind hiện có 40. 4k sao GitHub. (nguồn) Ưu điểm và nhược điểm của Chakra UI và Tailwind CSS Ưu điểm của Chakra UI
Nhược điểm của Chakra UI
Ưu điểm của Tailwind CSS
Nhược điểm của Tailwind CSS
Phần kết luận Chakra UI là một công cụ mới và nó có nhiều thành phần. Nó giúp bạn tạo bố cục một cách nhanh chóng. Nó đơn giản và dễ tiếp cận Nếu bạn muốn có một thành phần React được chuẩn bị sẵn, bạn có thể sử dụng Chakra UI. (nguồn. Trang web chính thức của Chakra) Tailwind CSS cho chúng ta thấy cách hoạt động khác của CSS. Sử dụng điều này, chúng tôi có thể tạo nhiều giao diện người dùng linh hoạt hơn. Nếu chúng ta thay đổi một phần tử, nó không ảnh hưởng đến phần tử kia. Chúng tôi cũng có thể tạo các mẫu của riêng mình. Tuy nhiên, việc thiết kế sẽ mất một chút thời gian khi sử dụng Tailwind CSS. (nguồn. Trang web chính thức của Tailwind) Rất nhiều điều cần được xem xét trong khi thiết kế bất kỳ ứng dụng phần mềm nào nói chung. Để xây dựng một trang web với phương pháp phát triển dựa trên thành phần, chúng ta sẽ có xu hướng tiếp cận một thiết kế dưới dạng các thành phần riêng lẻ. Ví dụ: hãy xem xét một trang web siêu đơn giản như blog. Nó thường có tiêu đề, bìa bài đăng, nội dung bài đăng, chân trang, liên kết để điều hướng giữa các bài đăng khác nhau, thành phần tìm kiếm để tìm kiếm các bài đăng có sẵn, v.v. Khi chúng tôi được giới thiệu một thiết kế của một trang web, chúng tôi sẽ bắt đầu xây dựng các phần riêng lẻ nhỏ của nó, mà chúng tôi gọi là các thành phần và sau đó kết hợp các thành phần đó lại với nhau để hoàn thành thiết kế cho một trang. Giả sử, nếu chúng ta muốn xây dựng một nút thì nó cực kỳ đơn giản như
Đây là một thẻ HTML đơn giản, một phần tử và cũng là một thành phần. Có thể có rất nhiều thành phần mà chúng tôi sẽ muốn xây dựng cho một ứng dụng khách thực sự. Một số ví dụ là phương thức, ngăn kéo, liên kết, tab, đầu vào, v.v. Khi xây dựng các thành phần này, chúng ta nên cẩn thận rằng chúng ta đang tuân theo cùng một kiến trúc thiết kế xuyên suốt ứng dụng của mình. Tất cả các nút trong ứng dụng của chúng tôi phải trông giống nhau Điều tiếp theo cần được xem xét khi phát triển các ứng dụng web là Khả năng truy cập web. Nếu chúng tôi đang xây dựng một thành phần thả xuống/chọn, thành phần đó phải có thể điều hướng được qua bàn phím, phải có độ tương phản màu phù hợp, có thể truy cập được bằng trình đọc màn hình, v.v. Có thể có nhiều trường hợp khác mà chúng ta thậm chí có thể không biết khi xây dựng một số thành phần phức tạp như tab, lớp phủ, phương thức Để giúp chúng tôi giải quyết những vấn đề này và để dễ dàng bắt đầu phát triển, có rất nhiều Thư viện thành phần giao diện người dùng hiện có. Họ có rất nhiều thành phần đã được thử nghiệm trong trận chiến, điều này sẽ giúp các nhà phát triển như chúng tôi xây dựng ứng dụng của mình một cách nhanh chóng mà không phải hy sinh khả năng truy cập, kiến trúc thiết kế, điều hướng có ý nghĩa, v.v.Một trong những Thư viện thành phần như vậy là giao diện chakra
Hãy nghĩ về những khối xây dựng này giống như bộ xếp hình lego. Chúng ta có thể bắt đầu chọn đúng thứ chúng ta cần và kết hợp chúng lại với nhau để thực hiện dự án mơ ước của mình Giới thiệu lại về CSS trong ReactTrước khi chúng ta tìm hiểu về Chakra UI, hãy xem lại các cách chúng ta có thể tạo kiểu cho các thành phần React của mình bằng css phong cách bên ngoàiTheo cách tiếp cận này, chúng tôi sẽ viết mã thành phần của mình trong tệp JSX hoặc TSX và chúng tôi sẽ tạo một tệp khác bằng css và tham chiếu chúng trong tệp thành phần của chúng tôi
Thách thức với cách tiếp cận này là css chúng tôi đang viết không nằm trong phạm vi thành phần, thay vào đó nó sẽ được áp dụng trên toàn cầu. Khi chúng tôi chọn các thành phần có tên lớp hoặc ID và viết các kiểu cụ thể, chúng tôi nên cẩn thận để không lặp lại các bộ chọn giống nhau. Nếu chúng ta không đủ cẩn thận thì các kiểu sai sẽ được áp dụng cho một phần tử có cùng tên bộ chọn trên một trang khác. Điều này là do toàn bộ tệp css của chúng tôi được nhóm lại với nhau và máy chủ qua dây Một vấn đề đau đầu khác là khi chúng tôi xóa một số thành phần khỏi ứng dụng của mình, rất dễ quên mất các kiểu mà chúng tôi đã viết cho thành phần đó. Vì các kiểu không nằm trong phạm vi thành phần, chúng tôi không có cách nào để tìm ra css chết trong ứng dụng của mình CSS trong JSNhư tên gợi ý, theo cách tiếp cận này, chúng tôi sẽ viết mã CSS bằng Javascript Điều này có rất nhiều lợi ích, như
Khi chúng tôi phạm vi css cho một thành phần cụ thể, chúng tôi không còn phải lo lắng về việc các kiểu của chúng tôi làm rối tung các thành phần khác. Khi chúng tôi xóa một thành phần khỏi ứng dụng, css sẽ biến mất cùng với thành phần đó. Lợi ích chính của nó là chỉ gửi CSS mà chúng ta cần cho trang qua mạng Có rất nhiều thư viện để giúp chúng tôi với cách tiếp cận css-in-js. Những cái nổi tiếng là Styled Components và Emotion Một Bạn có thể thấy sự khác biệt trong vỏ của các thuộc tính css, backgroundColor thay vì background-color và bộ chọn giả cũng vậy. Chúng tôi đang chuyển các kiểu như một đối tượng cho một giá đỡ tùy chỉnh css được suy ra theo cảm xúc và áp dụng các kiểu đó nội tuyến cho div đó
Chúng ta có thể xây dựng ứng dụng phản ứng của mình với các thành phần cảm xúc hoặc kiểu dáng, nhưng thư viện Chakra UI đưa cách tiếp cận này lên một cấp độ cao hơn và đơn giản hơn Bắt đầu với Chakra UIVí dụ trên với css prop của cảm xúc có thể đạt được trong Chakra UI với đoạn mã bên dưới
Ở đây chúng ta đang chuyển trực tiếp các style tới thành phần Chakra UI sử dụng cảm xúc bên trong, vì vậy bạn cũng có thể tạo kiểu cho các thành phần của mình theo cách thuần túy cảm xúc, nhưng bạn sẽ không cần điều này trong phần lớn thời gian Đây là thành phần luân xa được tạo kiểu theo cảm xúc
Cả hai đều hiển thị cùng một kết quả Hãy xem một ví dụ khác, nơi chúng tôi muốn lấy tên người dùng và mật khẩu trong một biểu mẫu có nút gửi Trong React với các phần tử đơn giản, Các kiểu phần tử giống nhau trong Chakra sẽ là Ghi chú. Vui lòng bỏ qua ngữ nghĩa ở đây, vì đây chỉ là để chứng minh sự so sánh về phong cách Nếu hình ảnh không rõ ràng, hãy xem Hộp cát cho Phản ứng đơn giản và với các thành phần Giao diện người dùng Chakra được đề cập ở trên Có rất nhiều thành phần chúng tôi có trong luân xa và thậm chí cả những thành phần cụ thể như 1 và 2 để xử lý riêng các bố cục như thế này Phần tuyệt vời của việc sử dụng các thành phần Chakra là intellisense cho các kiểu luôn có sẵn cho bạn để bạn không cần phải lo lắng về vỏ bọc của các kiểu Vấn đề ở đây là luân xa được ghi lại đầy đủ và bạn có thể dễ dàng xem qua bất kỳ thành phần nào từ repo luân xa ui để tìm hiểu thêm về chúng và tùy chỉnh theo yêu cầu của bạn Trong ví dụ biểu mẫu trên với chakra, chúng ta đã thấy một thành phần 3 chỉ đơn giản là hiển thị HTML 4 nhưng vẻ đẹp là, nó có thể chấp nhận đạo cụ phong cách của chakra. Chúng tôi có thể chuyển đổi bất kỳ thành phần tùy chỉnh nào để nhận đạo cụ luân xa bằng chức năng 5. Tương tự về chức năng với 6 trong cảm xúc
Khả năng tiếp cận ❤️Các thành phần luân xa được chế tạo có tính đến khả năng tiếp cận 🚀. Ví dụ: nếu bạn đang sử dụng phương thức từ chakra, thì đây là bàn phím và quản lý tiêu điểm bạn lấy ra khỏi hộp tuân thủ các tiêu chuẩn có thể truy cập
Có thành phần đặc biệt 0 mà người dùng bình thường không nhìn thấy nhưng có thể truy cập được bằng trình đọc màn hình. Điều này hữu ích để cung cấp các chi tiết bổ sung cho nút biểu tượng hoặc hình ảnh mà người dùng khiếm thị không thể nhận biết được. Mặc dù điều này có thể đạt được với 10 dòng css, nhưng xin cảm ơn nhóm chakra vì đã nghĩ về nó và cung cấp nó như một thành phần 💯 Chế độ tối 🌗Tất cả các thành phần giao diện người dùng luân xa đều tương thích với chế độ tối, màu sắc và kiểu mặc định có thể dễ dàng ghi đè Với sự hỗ trợ và tài liệu tuyệt vời của cộng đồng, bạn có thể xây dựng các thành phần tuyệt vời chỉ với lượng thời gian tối thiểu Chakra CSS là gì?Giao diện người dùng Chakra là thư viện thành phần đơn giản, theo mô-đun và có thể truy cập cung cấp cho bạn các khối xây dựng cần thiết để xây dựng các ứng dụng React của mình .
Chakra CSS có trong JS không?Vì Giao diện người dùng Chakra sử dụng CSS-in-JS dưới vỏ bọc ( cảm xúc + hệ thống kiểu dáng ), tính linh hoạt này đi kèm với một mức giá nhỏ . Dấu chân thời gian chạy này là do tính toán kiểu của styled-system và tạo className theo cảm xúc.
Làm cách nào để thêm CSS vào luân xa?Đính kèm các biến CSS
. pass the cssVarsRoot prop to ChakraProvider and set its value to the css selector of the element you want.
Chakra UI có giống như Bootstrap không?Bootstrap Styled thuộc danh mục "Khung công tác phía trước" của ngăn xếp công nghệ, trong khi Giao diện người dùng Chakra có thể được phân loại chủ yếu trong "Thành phần giao diện người dùng". Chakra UI is an open source tool with 10.1K GitHub stars and 669 GitHub forks. |