GALAXY TECH
Chuyên gia Công nghệ
Thứ sáu, 12/10/2018 | 00:00 GMT+7

Giới thiệu về Bulma CSS với React

Tôi sẽ ra ngoài và nói điều đó, tôi vẫn là một fan hâm mộ của Bootstrap. Như vậy, tôi không quên nhiều lựa chọn thay thế đang trôi nổi xung quanh đó. Một trong những khung CSS được truyền cảm hứng nhiều hơn mà tôi đã xem gần đây là Bulma . Nó thực hiện mọi thứ mà tôi cần một khung CSS để làm và thực hiện rất tốt việc đơn giản hóa một số thứ nhất định đồng thời làm cho chúng trở nên mạnh mẽ hơn. Ồ, và không thiếu các shell bọc React cho nó!

Đối với bài viết này, ta sẽ xem xét react-bulma-components , một trong những cách triển khai phổ biến hơn của khung CSS Bulma trong React.

Thư viện này không chỉ được ghi chép rất tốt mà còn hỗ trợ mọi thứ có sẵn trong Bulma và hiện đang theo dõi bản phát hành mới nhất của Bulma.

Vì vậy, ta hãy đi!

Bắt đầu

Để bắt đầu với react-bulma-components ta cần thêm nó vào dự án của bạn :

Qua npm

$ npm install --save react-bulma-components

Hoặc qua Yarn

$ yarn add react-bulma-components

Với dependencies của ta được thêm vào, tiếp theo, ta cần import .

Điều tôi thấy tuyệt vời về thư viện này là bạn có thể nhập các version "đầy đủ" của các thành phần đi kèm với các kiểu được liên kết và loại bỏ nhu cầu liên kết đến hoặc nhập bất kỳ kiểu bổ sung nào.

Nếu bạn muốn thành phần Button trong tất cả vinh quang về phong cách của nó, chỉ cần:

import { Button } from "react-bulma-components/full";

Các thành phần

Như đã đề cập, thư viện react-bulma-components hỗ trợ mọi thứ mà Bulma cung cấp như các thành phần sẵn sàng cho React. Dưới đây là tóm tắt về những gì bạn sẽ có sẵn khi mở hộp:

  • Box - Box màu trắng có bóng để gói nội dung.
  • Breadcrumb - Menu đường dẫn chuyển .
  • Button - Thứ đó thường thấy trên các biểu mẫu;)
  • Card - Một thành phần giống “thẻ” trang trọng hơn (không chỉ là một chiếc hộp).
  • Column - Bao bọc và các cột cho hệ thống lưới.
  • Vùng Container - Shell bọc nội dung không rườm rà đáp ứng với kích thước màn hình.
  • Content - Một shell bọc chung cho nội dung có chứa HTML.
  • Dropdown - Một server tương tác down menu.
  • Footer - Một shell bọc cho nội dung chân trang, có thể chứa bất cứ thứ gì!
  • Form - Biểu mẫu kiểm soát một Form.Input như vậy và những thứ tương tự.
  • Heading - Không được nhầm lẫn với tiêu đề, điều này dành cho nội dung loại h# .
  • Hero - Bài đăng này cần một anh hùng… a / k / aa jumbotron.
  • Icon - Shell bọc cho bất kỳ phông chữ biểu tượng nào mà bạn thấy phù hợp (Phông chữ Tuyệt vời, v.v.).
  • Image - Shell bọc cho nội dung hình ảnh đáp ứng.
  • Level - Tương tự như cột, cho phép bạn căn chỉnh nội dung theo chiều ngang.
  • Loader - Cá nhân thích, một trình tải đơn giản ( được dùng với Button s!)
  • Media - Khung CSS sẽ không hoàn chỉnh với một đối tượng giao diện user mạng xã hội.
  • Message - Tương tự như một thông báo gầm gừ.
  • Menu - Menu dọc cho mọi nhu cầu menu phụ của bạn!
  • Modal - Thành phần giao diện user phương thức cổ điển có thể chứa bất kỳ nội dung nào bạn muốn.
  • Navbar - Không nên nhầm lẫn với Heading , thành phần này tạo nên một thanh chuyển tiêu đề tốt.
  • Notification - Tương tự như Message nhưng không có thanh tiêu đề.
  • Pagination - Cho tất cả các trang và các trang nội dung của bạn.
  • Panel - Một điều khiển cho các điều khiển nhỏ gọn. Một menu và thẻ kết hợp, siêu mạnh mẽ.
  • Progress - Thanh tiến trình HTML root có thể được tô màu và định kích thước dễ dàng.
  • Section - Vùng chứa để group nội dung trên trang web .
  • Tabs - Một chuyển ngang khác với giao diện "dạng bảng".
  • Table - Theo tài liệu: "Bảng HTML không thể tránh khỏi".
  • Tag - Bạn có thể coi đây là huy hiệu hoặc nhãn.
  • Tile - Một trong những thành phần truyền cảm hứng hơn, một cách đơn giản để triển khai giao diện user lát gạch giống Pinterest / Metro.

Quá đủ để thực sự gây ra một số thiệt hại cho dự án tiếp theo của bạn!

Những thứ cơ bản

Giống như hầu hết các khung CSS ngoài kia, Bulma đi kèm với các kiểu cho các thành phần chung của bạn và một loạt các tùy chỉnh có thể được thực hiện bằng cách thêm các lớp khác nhau vào các phần tử của bạn.

react-bulma-components đơn giản hóa mọi thứ hơn nữa bằng cách cung cấp các thành phần cho từng phần tử chính và loại bỏ sự cần thiết phải ghép nối các tên lớp để chuyển các thuộc tính cho các thành phần của bạn.

Bạn muốn tạo một nút lớn sử dụng màu nguy hiểm , có các góc tròn và là một đường viền? Không vấn đề gì:

<Button color="danger" size="large" rounded outlined>Wowza!</Button>

Điều này là tốt và tốt nhưng điều gì sẽ xảy ra nếu ta muốn nút đó là một liên kết (tức là một phần tử neo)?

May mắn là tất cả các react-bulma-components đều có thể chấp nhận renderAs tính renderAs cho phép bạn xác định loại phần tử nào nên được sử dụng để kết xuất thành phần.

Nếu không có thuộc tính renderAs , Button nói trên sẽ được hiển thị như… bạn đoán! Một phần tử button .

Cùng với thuộc tính renderAs ta cũng nên bao gồm một href để cho biết nơi gửi mọi người khi họ nhấp vào liên kết:

<Button
  renderAs="a"
  href="https://alligator.io"
  color="danger"
  size="large"
  rounded
  outlined
>
  Wowza, it's a link!
</Button>

Trên thực tế, tất cả các thành phần Bulma của ta có thể chấp nhận bất kỳ thuộc tính nào mà bạn có thể ném chúng. Điều đó nghĩa là bạn luôn có thể thực hiện một số kiểu nâng cao với thuộc tính style hoặc thêm một số lớp CSS bổ sung với className .

Khi sử dụng className , bất kỳ lớp nào bạn cung cấp sẽ được thêm vào danh sách tên lớp Bulma do thư viện tạo.

Màu sắc

Tương tự như hầu hết các khung CSS hiện đại, Bulma đi kèm với một chủ đề màu sử dụng một số quy ước đặt tên theo ngữ nghĩa.

Các màu chủ đề này bao gồm primary , link , info , success , warning và danger .

Ngoài ra, cũng có thêm một số màu theo nghĩa đen: black , dark , light và white .

Các thành phần hỗ trợ màu sắc chấp nhận một thuộc tính color :

<Button color="success">Alligators are the best!</Button>

Điều này sẽ chỉ định đúng lớp màu cho phần tử được kết xuất. Vì thuộc tính màu này gán các lớp trở lại phần tử được hiển thị, bạn không thể chỉ định một giá trị màu tùy ý.

Kích thước

Làm việc với các kích thước với Bulma thực sự ít đơn giản hơn một chút so với làm việc với màu sắc. Điều này là do một số thành phần (như Button ) sử dụng tên văn bản cho các kích thước trong khi những thành phần khác (như Heading ) sử dụng các giá trị số:

<Heading size={1}>Large Heading</Heading>
<Heading size={2}>Not So Large Heading</Heading>

<Button size="large">Large Button</Button>
<Button size="small">Small Button</Button>

Đối với các thành phần chấp nhận kích thước văn bản, bạn có small , normal , medium và large . Kích thước normal là kích thước được sử dụng theo mặc định khi không có size nào được chỉ định.

Lưới “Chỉ hoạt động”

Điều mà tiếp thị Bulma giới thiệu là hệ thống lưới của họ là "hệ thống lưới đơn giản nhất".

Đã từng sử dụng một số hệ thống lưới, và thậm chí viết lại của riêng tôi trong ngày, tôi sẽ thừa nhận rằng nó khá đơn giản để sử dụng.

Mặc dù nó đơn giản, nó vẫn có nhiều tính năng với những thứ như điểm ngắt đáp ứng, hiệu ứng cột và lồng nhau.

Điều tôi thấy rất ấn tượng là mặc dù hệ thống lưới Bulma hoạt động khá tốt trong bố cục 12 cột tiêu chuẩn, nhưng nó không buộc bạn phải theo mô hình đã nói.

Tính linh hoạt này cũng là nơi mà thuộc tính size thay đổi. Không giống như một Button sử dụng quy ước đặt tên small … large , các thành phần Column sử dụng một bộ tên size khác nhau tương ứng với bao nhiêu không gian mà cột sẽ chiếm.

Kích thước cột cũng được chia thành hai loại, tỷ lệ phần trăm và theo số lượng cột trong bố cục 12 cột.

Đối với định cỡ dựa trên phần trăm, bạn có thể đặt size thành one-fifth , one-quarter , one-third , half , two-thirds hoặc three-quarters :

<Columns>
  <Columns.Column size="one-fifth">20%</Columns.Column>
  <Columns.Column>80%</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size="one-quarter">25%</Columns.Column>
  <Columns.Column>75%</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size="one-third">33.333333333%</Columns.Column>
  <Columns.Column>66.666666667%</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size="half">50%</Columns.Column>
  <Columns.Column>Also 50%</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size="two-thirds">66.666666667%</Columns.Column>
  <Columns.Column>33.333333333%</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size="three-quarters">75%</Columns.Column>
  <Columns.Column>25%</Columns.Column>
</Columns>

Và đối với các kích thước dựa trên bố cục 12 cột, bạn đặt size thành giá trị số từ 1 đến 12 :

<Columns>
  <Columns.Column size={1}>One</Columns.Column>
  <Columns.Column>Eleven</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size={2}>Two</Columns.Column>
  <Columns.Column>Ten</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size={3}>Three</Columns.Column>
  <Columns.Column>Nine</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size={4}>Four</Columns.Column>
  <Columns.Column>Eight</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size={5}>Five</Columns.Column>
  <Columns.Column>Seven</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size={6}>Six</Columns.Column>
  <Columns.Column>Six</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size={7}>Seven</Columns.Column>
  <Columns.Column>Five</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size={8}>Eight</Columns.Column>
  <Columns.Column>Four</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size={9}>Nine</Columns.Column>
  <Columns.Column>Three</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size={10}>Ten</Columns.Column>
  <Columns.Column>Two</Columns.Column>
</Columns>
<Columns>
  <Columns.Column size={11}>Eleven</Columns.Column>
  <Columns.Column>One</Columns.Column>
</Columns>

Kết luận

Với hơn 30.000 sao trên GitHub, thật khó để coi Bulma chỉ là một khung CSS khác trong một không gian vốn đã đông đúc.

Cá nhân tôi thấy nó khá quen thuộc đến từ các khung CSS khác nhưng nó cũng mang lại mức độ đơn giản và linh hoạt riêng giúp bạn dễ dàng tiếp nhận.

Kết hợp sự đơn giản này với các ràng buộc React được cung cấp bởi react-bulma-components , tôi chắc chắn sẽ xem xét nó cho dự án tiếp theo của bạn .

Tôi hy vọng bạn đã tìm thấy tổng quan cấp cao về Bulma và react-bulma-components đủ thông tin và hữu ích, chúc mừng!

Tags:

Các tin liên quan

Media query CSS: Tham khảo và hướng dẫn nhanh
2018-06-07
Mẹo CSS: Bóng đổ nhiều màu & cắt bỏ
2018-04-02
Cách hiện đại để xử lý CSS trong React
2018-02-22
CSS-in-JS Roundup: Tạo kiểu cho các thành phần React
2017-08-21
Đặt lại CSS tối thiểu
2017-06-21
Hàm CSS color-mod
2017-01-12
CSS Grid: Holy Grail Layout
2016-12-28
Bố cục lưới CSS: Ký hiệu lặp lại
2016-12-23
Bố cục lưới CSS: Từ khóa Span
2016-12-21
Bố cục lưới CSS: Giới thiệu
2016-12-15