Vue-Tailwind
Để biết thêm thông tin, hãy kiểm tra trang web chính thức: https://vue-tailwind.com/.
VueTailwind là một bộ các thành phần Vue được tạo để tùy chỉnh và thích nghi với thiết kế độc đáo của ứng dụng của bạn.
Thư viện UI khác?
Hầu hết các thư viện thành phần phụ thuộc vào các khung CSS với một số lượng kiểu được xác định bởi những người duy trì các thư viện đó.
Những thư viện đó tuyệt vời và giúp công việc của chúng ta dễ dàng hơn, nhưng hey, chúng ta đã tạo ra một thiết kế tùy chỉnh đẹp, phải không?
Vậy các phương án thay thế là gì?
Chúng ta có thể sử dụng một khung là TailwindCss để xác định kiểu của chúng ta, nhưng điều đó sẽ dẫn đến việc viết các lớp CSS dài liên tục, điều này có thể nhanh chóng trở thành việc khó bảo trì. Ngoài ra, việc tạo một số thành phần như hộp thoại, chọn ngày, v.v., là một nhiệm vụ khó khăn, và hãy thừa nhận điều này, không ai có thời gian cho điều đó, phải không?
Tốt nhất của cả hai thế giới
Các thành phần VueTailwind được thiết kế để tùy chỉnh bằng các lớp CSS tùy chỉnh mà bạn có thể xác định khi bạn cài đặt thư viện.
Ngoài ra, hầu hết các cài đặt thành phần có thể được cấu hình, vì vậy việc sử dụng thư viện này giống như bạn có bộ thành phần cá nhân cho các nhu cầu cụ thể của bạn.
Tất cả điều đó có nghĩa là với thư viện này, bạn sẽ có khả năng:
- Xác định giao diện của các thành phần của bạn bằng cách xác định các lớp CSS mặc định tùy chỉnh.
- Thêm các biến thể không giới hạn cho mọi trường hợp sử dụng cụ thể.
- Ghi đè giá trị mặc định của các thuộc tính theo nhu cầu của bạn.
- Tạo ra các phiên bản khác nhau của một thành phần với các cài đặt mặc định khác nhau.
Cài đặt
1. Cài đặt các phụ thuộc
npm install vue-tailwind --save
Hoặc:
yarn add vue-tailwind
2. Cài đặt TailwindCSS (Tùy chọn)
Thư viện này sử dụng các lớp TailwindCSS theo mặc định. Tuy nhiên, nó nên hoạt động với bất kỳ khung CSS nào vì tất cả các lớp CSS đều có thể cấu hình.
Để cài đặt TailwindCSS, hãy tuân theo tài liệu chính thức tại đây: https://tailwindcss.com/docs/installation
2.1 Thêm plugin @tailwindcss/forms
Giao diện mặc định của thư viện này phụ thuộc vào plugin @tailwindcss/forms. Để sử dụng nó, hãy tuân theo các bước trên trang nguồn của plugin. https://github.com/tailwindlabs/tailwindcss-forms
2.1 Thêm biến thể cho lớp giả tưởng bị tắt
Cũng cần thiết cho giao diện mặc định và đề xuất mạnh mẽ vì nó thêm khả năng sử dụng một số lớp như disabled:opacity-50 disabled:cursor-not-allowed cho các ô đầu vào bị tắt.
Xem https://tailwindcss.com/docs/configuring-variants trong tài liệu TailwindCSS để biết thêm thông tin.
Là một tài liệu tham khảo, tệp tailwind.config.js của bạn có thể trông như sau:
module.exports = {
variants: {
extend: {
opacity: ['disabled'],
cursor: ['disabled'],
},
},
plugins: [
require('@tailwindcss/forms'),
],
};
3. Cấu hình Vue để sử dụng vue-tailwind
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
const components = {
// ...You need to add the components you need here (explained above)
}
Vue.use(VueTailwind, components)
3.1 Nhập và cài đặt các thành phần
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import {
TInput,
TTextarea,
TSelect,
TRadio,
TCheckbox,
TButton,
TInputGroup,
TCard,
TAlert,
TModal,
TDropdown,
TRichSelect,
TPagination,
TTag,
TRadioGroup,
TCheckboxGroup,
TTable,
TDatepicker,
TToggle,
TDialog,
} from 'vue-tailwind/dist/components';
const settings = {
// Use the following syntax
// {component-name}: {
// component: {importedComponentObject},
// props: {
// {propToOverride}: {newDefaultValue}
// {propToOverride2}: {newDefaultValue2}
// }
// }
't-input': {
component: TInput,
props: {
classes: 'border-2 block w-full rounded text-gray-800'
// ...More settings
}
},
't-textarea': {
component: TTextarea,
props: {
classes: 'border-2 block w-full rounded text-gray-800'
// ...More settings
}
},
// ...Rest of the components
}
Vue.use(VueTailwind, settings)
3.2 Hoặc, bạn có thể sử dụng cú pháp v1.0
import Vue from 'vue'
// Notice that I am using a different path here:
import VueTailwind from 'vue-tailwind/dist/full'
const settings = {
TInput: {
classes: 'border-2 block w-full rounded text-gray-800',
// ...More settings
},
TButton: {
classes: 'rounded-lg border block inline-flex items-center justify-center',
// ...More settings
},
// ...Rest of the components
}
Vue.use(VueTailwind, settings)
3.3 Hoặc chỉ cài đặt các thành phần bạn cần
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import TInput from 'vue-tailwind/dist/t-input'
import TButton from 'vue-tailwind/dist/t-button'
const settings = {
't-input': {
component: TInput,
props: {
classes: 'block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
// ...More settings
}
},
't-button': {
component: TButton,
props: {
classes: 'block px-4 py-2 text-white transition duration-100 ease-in-out bg-blue-500 border border-transparent rounded shadow-sm hover:bg-blue-600 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
// ...More settings
}
},
}
Vue.use(VueTailwind, settings)
Lưu ý : Sử dụng cú pháp từ điểm 3.3 là cách tốt nhất để ngăn kích thước gói lớn, nhưng chỉ khi bạn nhập một số lượng ít các thành phần. Nếu số lượng thành phần bạn cài đặt tăng lên, cách được đề xuất để cài đặt chúng là sử dụng cú pháp từ các điểm 3.1 hoặc 3.2 để giúp thư viện tái sử dụng một số mã và giữ kích thước gói tối thiểu.
Tạo giao diện
Để áp dụng một giao diện tùy chỉnh, bạn nên tương tác với các thuộc tính classes, fixedClasses, và variants.
Các thuộc tính classes và fixedClasses thường mong đợi một string chứa một lớp CSS cho các thành phần chỉ có một thẻ (như ô đầu vào, nút, v.v.) và một object cho các thành phần phức tạp hơn (hộp thoại, datepicker, v.v.) (xem tài liệu thành phần để biết chi tiết).
Thuộc tính variants mong đợi một đối tượng trong đó mỗi khóa đại diện cho tên biến thể và mỗi giá trị là các lớp sẽ được sử dụng khi biến thể đó được áp dụng.
Ví dụ cho một thành phần chỉ có một thẻ:
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import TButton from 'vue-tailwind/dist/t-button'
const settings = {
't-button': {
component: TButton,
props: {
// The fixed classes will never change and will be merged with the `classes` value or the active variant
fixedClasses: 'focus:outline-none focus:shadow-outline inline-flex items-center transition ease-in-out duration-150',
// Classes used when any variant is active
classes: 'text-white bg-blue-600 hover:bg-blue-500 focus:border-blue-700 active:bg-blue-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
variants: {
// A red variant of the button (applied when `<t-button variant="error" />`)
error: 'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 active:bg-red-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
// A green variant of the button (applied when `<t-button variant="success" />`)
success: 'text-white bg-green-600 hover:bg-green-500 focus:border-green-700 active:bg-green-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
// ...unlimited variants
}
// ...More settings
}
},
}
Vue.use(VueTailwind, settings)
Ví dụ cho một thành phần phức tạp:
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import TAlert from 'vue-tailwind/dist/t-alert'
const settings = {
't-alert': {
component: TAlert,
props: {
// The fixed classes will never change and will be merged with the `classes` value or the active variant
fixedClasses: {
wrapper: 'rounded p-4 flex text-sm border-l-4',
body: 'flex-grow',
close: 'ml-4 rounded',
closeIcon: 'h-5 w-5 fill-current'
},
classes: {
wrapper: 'bg-blue-100 border-blue-500',
body: 'text-blue-700',
close: 'text-blue-700 hover:text-blue-500 hover:bg-blue-200',
closeIcon: 'h-5 w-5 fill-current'
},
variants: {
danger: {
wrapper: 'bg-red-100 border-red-500',
body: 'text-red-700',
close: 'text-red-700 hover:text-red-500 hover:bg-red-200'
// Notice that I am not defining the `closeIcon` class since we only
// need to write the classes we want to override
},
}
}
},
}
Vue.use(VueTailwind, settings)
Ghi đè cài đặt
Tất cả các thành phần trong thư viện này đều có cài đặt mặc định được thêm vào dưới dạng thuộc tính thành phần dựa trên cách chúng tôi hiểu cách sử dụng phổ biến nhất cho các cài đặt đó.
Tôi nhận thấy rằng trong nhiều trường hợp, việc thay đổi giá trị mặc định là hữu ích, vì vậy bạn không cần thêm thuộc tính điều này lặp đi lặp lại khi cần.
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import TDatepicker from 'vue-tailwind/dist/t-datepicker'
import TButton from 'vue-tailwind/dist/t-button'
import TModal from 'vue-tailwind/dist/t-modal'
// Locale to eventually replace the default Datepicker locale
import Spanish from 'vue-tailwind/dist/l10n/es'
const settings = {
't-button': {
component: TButton,
props: {
// classes: '...',
// variants: '...',
// ...
// Originally it defaults to `undefined` that means is considered a submit
// button if the button is inside a form.
type: 'button',
}
},
't-datepicker': {
component: TDatepicker,
props: {
// classes: '...',
// variants: '...',
// ...
// Originally a locale object with English values
locale: Spanish,
}
},
't-modal': {
component: TModal,
props: {
// classes: '...',
// variants: '...',
// ...
// Originally `true`
escToClose: false,
}
},
}
Vue.use(VueTailwind, settings)
Bạn cũng có thể sử dụng tính năng này để tạo ra các phiên bản khác nhau của cùng một thành phần.
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import TButton from 'vue-tailwind/dist/t-button'
import TTag from 'vue-tailwind/dist/t-tag'
const settings = {
// What about one <t-button /> for normal button and a `<t-submit />` for a submit button
't-button': {
component: TButton,
props: {
type: 'button',
}
},
't-submit': {
component: TButton,
props: {
type: 'submit',
}
},
// I love this use case for the TTag component and will let you guess what
// is doing: 👇
'blog-title': { // Used like <blog-title>Title of a blog post</blog-title>
component: TTag,
props: {
tag: 'h1',
classes: 'font-semibold text-xl leading-6',
}
},
'blog-subtitle': { // Used like <blog-title>subtitle of a blog post</blog-title>
component: TTag,
props: {
tag: 'h2',
classes: 'font-semibold text-xl leading-6',
}
},
't-link': { // Used like <t-link href="">Open site</t-link>
component: TTag,
props: {
tag: 'a',
classes: 'text-blue-500 underline hover:text-blue-600',
}
}
}
Vue.use(VueTailwind, settings)
Quy trình làm việc
Khi các biến thể khác nhau của bạn đã được xác định, bạn có thể sử dụng thuộc tính variant để xác định biến thể nào sẽ được áp dụng:
<t-input variant="error" />
Thuộc tính biến thể cũng chấp nhận một đối tượng lấy thuộc tính đầu tiên có giá trị truthy.
<t-input
:variant="{
error: inputIsNotValid,
success: inputIsValid,
}"
/>
Có gì mới trong phiên bản 2.x
- Cài đặt chỉ các thành phần bạn cần để giảm kích thước gói nhỏ hơn
- Tên tùy chỉnh cho các thành phần
- Khả năng cài đặt cùng một thành phần nhiều lần với các cài đặt mặc định và tên khác nhau
- Giao diện mặc định mới
Kế hoạch cho phiên bản 3.x
- Xây dựng lại với Vue 3
- Nhiều cải tiến TypeScript mạnh mẽ
- Bao phủ kiểm tra mạnh hơn
- Ưu tiên tính khả dụng trước hết
- Thương hiệu mới
Đóng góp
Dự án này có hữu ích cho bạn không? Hãy xem xét việc tài trợ cho tôi https://github.com/sponsors/alfonsobries.
Tất nhiên, mọi hình thức giúp đỡ khác cũng được hoan nghênh, thậm chí nếu bạn thấy có một số lỗi ngữ pháp (Tiếng Anh không phải là ngôn ngữ chính của tôi), xem contribute page để biết chi tiết.
Lịch sử thay đổi
Vui lòng xem Release notes để biết thêm thông tin về những thay đổi gần đây.
Bảo mật
Nếu bạn phát hiện bất kỳ vấn đề liên quan đến bảo mật nào, vui lòng gửi email đến alfonso@vexilo.com thay vì sử dụng theo dõi vấn đề.
Người đóng góp
Giấy phép
Giấy phép MIT (MIT). Vui lòng xem License File để biết thêm thông tin.
Được tạo ra với tình yêu bởi @alfonsobries
Thông tin tải về:
Tác giả: alfonsobries
Nguồn: https://github.com/alfonsobries/vue-tailwind
Giấy phép: MIT license
