• Giới thiệu
  • Bảo mật và Quyền riêng tư
  • Liên hệ
Monday, December 11, 2023
Thế giới JS & VPS
  • Trang chủ
  • Thế Giới Javascript
    • Full tài liệu học JS Free từ A-Z
    • Học javascript miễn phí
    • Javascript
    • News and Tutorial JS
    • ReactJS
    • Tips vs Tricks JS
    • VueJS
    • NodeJS
  • Thế giới VPS
    • VPS for Developer
  • Top IT
No Result
View All Result
  • Trang chủ
  • Thế Giới Javascript
    • Full tài liệu học JS Free từ A-Z
    • Học javascript miễn phí
    • Javascript
    • News and Tutorial JS
    • ReactJS
    • Tips vs Tricks JS
    • VueJS
    • NodeJS
  • Thế giới VPS
    • VPS for Developer
  • Top IT
No Result
View All Result
Thế giới JS & VPS
No Result
View All Result
Home Thế Giới Javascript Javascript

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

by Joker
October 2, 2023
in Javascript, Thế Giới Javascript
0
2
SHARES
6
VIEWS
Share on FacebookShare on TwitterShare on Pin

Nội dung chính

  • Rebass
  • Bắt đầu
  • Tính năng
  • Nguyên tắc
  • Tài liệu
  • CodeSandbox
    • Liên quan
    • Nâng cấp từ phiên bản v3
      • Các phiên bản trước đó
  • Thông tin tải về:

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”

– Max Stoiber

“Rebass là Bootstrap của React.”

– Jori Lallo

“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!”

– Colm Tuite

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

– Unix philosophy

Xem Patterns for Style Composition in React để biết thêm về một số ý tưởng đằng sau Rebass.

Tài liệu

  • Docs
  • Getting Started
  • Props
  • Extending
  • Theming
  • Reflexbox
  • Text
  • Heading
  • Button
  • Link
  • Image
  • Card

CodeSandbox

Hãy thử nó: https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox

Liên quan

  • Styled System
  • Theme UI
  • Emotion
  • Styled Components

Nâng cấp từ phiên bản v3

Xem Migration Guide.

Các phiên bản trước đó

  • v3.2.2 – v3 Docs
  • v2.3.2 – Docs for Rebass v2
  • v1.0.7

Thông tin tải về:

Tác giả: rebassjs
Mã nguồn: https://github.com/rebassjs/rebass
Giấy phép: MIT license

Tags: colorcssgridjavascript
Previous Post

Cách Dễ Dàng để Thêm Một Lưới 24 Cột vào Ứng Dụng React Native Của Bạn

Next Post

Cách Tạo Một Đồng Hồ Bấm Đơn Giản bằng JavaScript

Next Post

Cách Tạo Một Đồng Hồ Bấm Đơn Giản bằng JavaScript

  • Trending
  • Comments
  • Latest
Học javascript miễn phí | Giới thiệu về toàn tập về JavaScript là gì một cách đơn giản nhất

Học javascript miễn phí | Tìm hiểu cực chi tiết và dễ hiểu về đối tượng(Objects) trong JavaScript

July 2, 2023
Học javascript miễn phí | Giới thiệu về toàn tập về JavaScript là gì một cách đơn giản nhất

Học javascript miễn phí | Tìm hiểu cực chi tiết và dễ hiểu về Hàm(function) trong JavaScript

June 28, 2023
Học javascript miễn phí | Giới thiệu về toàn tập về JavaScript là gì một cách đơn giản nhất

Học javascript miễn phí | Tìm hiểu cực chi tiết và dễ hiểu về Toán tử số học và ví dụ trong JavaScript

July 4, 2023
Học javascript miễn phí | Giới thiệu về toàn tập về JavaScript là gì một cách đơn giản nhất

Học javascript miễn phí | Tìm hiểu cực chi tiết và dễ hiểu về Toán tử bậc ba và ví dụ trong JavaScript

July 5, 2023
Top IT | Top 5 xu hướng DevOps đang thịnh hành hiện nay mà các developer nên biết

Top IT | Top 5 xu hướng DevOps đang thịnh hành hiện nay mà các developer nên biết

0
TopIT | Chọn Python để phát triển web – Top 16 ưu và nhược điểm hàng đầu bạn cần biết

TopIT | Chọn Python để phát triển web – Top 16 ưu và nhược điểm hàng đầu bạn cần biết

0
TopIT | Top 16 thư viện React mà các developer nên biết

TopIT | Top 16 thư viện React mà các developer nên biết

0
TopIT | Top 17 ứng dụng web cực hay developer nên sử dụng để tăng năng suất

TopIT | Top 17 ứng dụng web cực hay developer nên sử dụng để tăng năng suất

0

ReactPy: Xây dựng giao diện người dùng đẹp bằng Python mà không cần JavaScript

October 26, 2023

Xây dựng một Trang web Đẹp với Eleventy, ESBuild, TailwindCSS, PostCSS

October 26, 2023

Semantic UI React: Xây dựng Ứng dụng Web Đẹp và Truy cập với React

October 26, 2023

Hướng dẫn Thêm Hộp thoại vào Ứng dụng React Native của Bạn

October 26, 2023

Recent News

ReactPy: Xây dựng giao diện người dùng đẹp bằng Python mà không cần JavaScript

October 26, 2023

Xây dựng một Trang web Đẹp với Eleventy, ESBuild, TailwindCSS, PostCSS

October 26, 2023

Semantic UI React: Xây dựng Ứng dụng Web Đẹp và Truy cập với React

October 26, 2023

Hướng dẫn Thêm Hộp thoại vào Ứng dụng React Native của Bạn

October 26, 2023

Thế giới Javascript vs VPS

We bring you the best News, Tutorial, Tips.v..v about Javascript language and VPS that perfect for developer full stack, Web, Backend, Newbie...to learn.

Follow Us

Top trending

  • Học javascript miễn phí
  • Javascript
  • Lập trình web
  • News and Tutorial JS
  • Thế Giới Javascript
  • Tip vs Tricks HTML/CSS
  • Tips vs Tricks JS
  • Top IT

Bài đang hot

ReactPy: Xây dựng giao diện người dùng đẹp bằng Python mà không cần JavaScript

October 26, 2023

Xây dựng một Trang web Đẹp với Eleventy, ESBuild, TailwindCSS, PostCSS

October 26, 2023
  • Giới thiệu
  • Bảo mật và Quyền riêng tư
  • Liên hệ

© 2020 VPSUS - Share everything about Javascript and VPS by JSTEAM.

No Result
View All Result
  • Thế Giới Javascript
    • Học javascript miễn phí
    • Javascript
    • News and Tutorial JS
    • ReactJS
    • Tips vs Tricks JS
  • Thế giới VPS
    • VPS for Developer
  • Top IT

© 2020 VPSUS - Share everything about Javascript and VPS by JSTEAM.