Tailwind CSS tables: Tạo bảng Bootstrap đáp ứng và truy cập

Plugin Bảng Tailwind CSS

Plugin này tạo ra các bảng được thiết kế theo kiểu Bootstrap trong Tailwind CSS. Bất cứ điều gì ở trong bootstrap tables documentation nên hoạt động.

Cài đặt

# With NPM
npm install tailwindcss-tables --save

# With Yarn
yarn add tailwindcss-tables

# Manually
# Create a /plugins/tailwindcss-tables folder in your project and drop 'index.js' inside of it.

Sử dụng

Để sử dụng plugin, chỉ cần yêu cầu nó trong tệp cấu hình Tailwind của bạn.

plugins: [
  // Other plugins...
  require('tailwindcss-tables')(),

  // If pulled in manually...
  require('./plugins/tailwindcss-tables')(),
],

Bây giờ bạn có thể sử dụng bất kỳ bootstrap’s table classes nào trong dự án của bạn.

Ví dụ

Ví dụ cơ bản từ tài liệu Bootstrap:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Sử dụng tiện ích của Tailwind

Bạn có thể tự do sử dụng tiện ích của Tailwind để tùy chỉnh bảng. Hoạt động với Tailwind v1.0 hoặc trước Tailwind v1.0. Chỉ cần điều chỉnh tên lớp của bạn.

<table class="table">
  <thead class="bg-blue-500 text-white">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td class="bg-red-500 text-white">Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Tùy chỉnh

Tôi đã tiết lộ một số tùy chọn mà việc thay đổi bằng cách sử dụng tiện ích có phần phức tạp.

plugins: [
  // Other plugins...
  require('tailwindcss-tables')({
    cellPadding: '.75rem',  // default: .75rem
    tableBorderColor: '#dee2e6',  // default: #dee2e6
    tableStripedBackgroundColor: 'rgba(0,0,0,.05)',  // default: rgba(0,0,0,.05)
    tableHoverBackgroundColor: 'rgba(0,0,0,.075)',  // default: rgba(0,0,0,.075)
    tableBodyBorder: true, // default: true. If set to false, borders for the table body will be removed. Only works for normal tables (i.e. does not apply to .table-bordered)
    verticalAlign: 'top', // default: 'top'
  }),
],

Một lần nữa, hãy xem bootstrap’s tables documentation để biết các tùy chọn khác. Ví dụ, bọc bảng của bạn trong một lớp div.table-responsive và bảng của bạn sẽ đáp ứng.

Thưởng thức!

Chi tiết tải về:

Tác giả: drehimself
Nguồn: https://github.com/drehimself/tailwindcss-tables

Giấy phép: MIT license