Tails UI: Tạo Ứng dụng React Đẹp với Tailwind CSS

Tails-UI

Các thành phần giao diện React sử dụng tailwindcss

Các thành phần:

• Cảnh báo (Alert)
• Bài viết (Article)
• Hộp (Box)
• Đường dẫn (Breadcrumbs)
• Nút (Button)
• Thẻ (Card)
• Khối mã (CodeBlock)
• HTML Nguy hiểm (DangerousHTML)
• Dropdown
• Flex
• Carousel Hình ảnh (ImageCarousel)
• Loader
• Chân trang lớn (MegaFooter)
• Cửa sổ (Modal)
• Thanh điều hướng (Navbar)
• Bảng điều khiển (Panel)
• Cổng (Portal)
• Thanh tiến trình (ProgressBar)
• Hiển thị nếu (RenderIf)
• Lựa chọn (Select)
• Khoảng trống (Space)
• Tab
• Bảng (Table)
• Thẻ Tab
• Văn bản (Text)
• Vùng văn bản (TextArea)
• Trường văn bản (TextField)
• Giới hạn văn bản (TruncateText)

Cài đặt:

npm i tails-ui

Sử dụng:

• Đảm bảo đã import file css của tails-ui import 'tails-ui/dist/index.css'

• Trang tài liệu sẽ sớm ra mắt với tất cả các api của các thành phần

  import React from ‘react’
  import { Button } from ‘tails-ui’

  const Button = () => (
  <Button
  color=”blue”
  type=”submit”
  fullWidth
  outline

  Submit
  

  
  )

  export default Button

Chạy Ở chế độ Local:

• Bạn có thể chạy lệnh npm link bên trong thư mục tails-ui và sau đó npm link tails-ui trong dự án bạn đã tạo để kiểm tra các thành phần ở chế độ local.
• Bạn có thể chạy lệnh npm start để bắt đầu chạy tails-ui ở chế độ theo dõi và nó sẽ biên dịch bất kỳ thành phần mới nào bạn thêm vào.
• npm test sẽ chạy jest

.gitignore

# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
/node_modules

# testing
/coverage

# production
/build
/dist

# bucklescript
/lib
/types
.merlin
.bsb.lock

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

Thông tin tải về:

Tác giả: mistakenelf
Nguồn: https://github.com/mistakenelf/tails-ui

Giấy phép: MIT license