Rebass
Các thành phần giao diện người dùng nguyên thủy React được xây dựng với Styled System. https://rebassjs.org
npm i rebass
Bắt đầu
import React from 'react'
import { Box, Heading, Button } from 'rebass'
export default props =>
<Box>
<Heading>Hello</Heading>
<Button>Rebass</Button>
</Box>
Tính năng
- Bắt đầu hệ thống thiết kế của bạn mà không phải làm quá nhiều công việc
- Xây dựng giao diện người dùng nhất quán với các ràng buộc thiết kế và tỷ lệ do người dùng xác định
- Trải nghiệm phát triển tốt nhất với các thuộc tính Styled System
- Hỗ trợ đẳng cấp cho việc tạo chủ đề & hoàn toàn tương thích với Theme UI
- Kiểu dáng nhanh, đáp ứng trước trên di động với cú pháp dựa trên mảng
- Bố cục Flexbox với các thành phần Box và Flex
- Khả năng linh hoạt tích hợp cho tốc độ thiết kế & phát triển cao
- Dấu vết tối thiểu khoảng 4KB
“Một trong những thư viện thành phần React tốt nhất hiện nay”
“Rebass là Bootstrap của React.”
“Một thư viện thành phần lớn được xây dựng trên styled-components. Linh hoạt, có hệ thống, có khả năng mở rộng… thật là tuyệt vời!”
Nguyên tắc
Rebass được thiết kế để:
- Tối thiểu hóa
- Hữu ích
- Không có quan điểm cứng đầu
- Linhhọat
- Nhất quán
- Có khả năng mở rộng
- Có khả năng tạo chủ đề
Làm một việc, và làm nó tốt
Xem Patterns for Style Composition in React để biết thêm về một số ý tưởng đằng sau Rebass.
Tài liệu
CodeSandbox
Hãy thử nó: https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox
Liên quan
Nâng cấp từ phiên bản v3
Xem Migration Guide.
Các phiên bản trước đó
Thông tin tải về:
Tác giả: rebassjs
Mã nguồn: https://github.com/rebassjs/rebass
Giấy phép: MIT license