@aparajita/ 尾风- 离子 
此插件用于 尾风 CSS 财务报告和审定财务报表 无线 提供若干特性:
- 帮助您在Ionic应用程序中瞄准特定平台和模式的变量.
- A 类
part以Ionic元件(或使用CSS元件的任何其他元件)为目标CSS部件的变体. - Ionic CSS主题变量被转换为Tailwind颜色.
- 一个
ion-checked变体以瞄准Ionic复选框或无线电按钮的检查状态.
从 v1. x 中突破更改
- V1.x中的非缩写变体(前缀为"离-")已去除.
- 这个
ios财务报告和审定财务报表md变体已更名为mode-ios财务报告和审定财务报表mode-md,并仅适用于mode属性html键.
安装
pnpm add @aparajita/tailwind-ionic
如果您只想要默认的变体和没有Ionic主题颜色, 请将插件添加到您的 tailwind.config.js 文件 :
module.exports = {
plugins: [require('@aparajita/tailwind-ionic')]
}
如果你想配置行为,请阅读.
使用量
平台/模式变体
下表中的平台/模式变体得到支持. 列表中更低的变体更为具体,在列表中更高的变体后适用. 这意味着适用于某一类的较不具体的变体将被适用于同一类的更具体的变体所取代.
注意,不能直接结合变体,但可以结合分化变体的效果.
| 备选案文 | 目标 |
|---|---|
| plt- 桌面 | 桌面模式 |
| 移动 | 类似移动的设备(包括浏览器模拟) |
| 移动网络 | 浏览器中的移动设备模拟模式 |
| 性质 | 使用 CAPacitor 的真正设备 |
| plt- ios 函数 | iOS 设备(包括浏览器模拟) |
| plt- 机器人 | Android 设备(包括浏览器模拟) |
| 模式图标 | App 属于 iOS 样式模式 |
| 模式 md | App 属于材料设计样式模式 |
示例(有缩写变体名称)
<!-- BAD. Can't combine these variants with others directly. -->
<ion-label class="plt-native:plt-ios:text-ion-color-primary" />
<!--
GOOD. Separate variants combine.
On a real iOS device, bold blue color.
On a real Android device, bold yellow color.
-->
<ion-label
class="
plt-native:font-bold
plt-ios:text-blue-500
plt-android:text-yellow-500
"
/>
<!-- GOOD. More specific variant overrides. On a real iOS device, red color. -->
<ion-label class="plt-native:text-blue-500 plt-ios:text-red-500" />
部分变体
这个 part- 变体允许您在Ionic组件(或使用CSS组件的任何其他组件)中瞄准CSS部件. 当前定义的所有组件部分都作为自动完成建议在编辑器中提供。 部分变种可以与其他变种相合并.
实例
<!-- Make a button fully rounded -->
<ion-button class="part-native:rounded-full" />
<!-- Equivalent to: -->
<ion-button class="my-button" />
<style>
.my-button::part(native) {
@apply rounded-full;
}
</style>
已检查的变体
这个 ion-checked 变量允许您瞄准已检查的状态 ion-checkbox 或者说 ion-radio它可与其他变体结合,特别是: part- 变体,以完成复杂的样式 ion-checkbox 财务报告和审定财务报表 ion-radio 组件完全与Tailwind.
实例
这里有一个无线电组 使用图像的无线电按钮。 检查状态以蓝色环表示.
这是标记:
<ion-radio-group
v-model="appearance"
class="flex w-full justify-around pt-5 pb-3"
>
<div
v-for="info in kAppearanceInfo"
:key="info.label"
class="relative flex flex-col items-center"
>
<ion-radio
:value="info.value"
class="m-0 h-[80px] w-[72px] rounded-lg part-container:border-none part-mark:hidden ion-checked:ring ion-checked:ring-blue-500"
/>
<img
:src="info.src"
:alt="info.label"
class="absolute inset-0 h-[80px] w-[72px] rounded-lg border"
:class="info.class"
/>
<p class="mt-2 text-sm text-ion-color-dark">
{{ info.label }}
</p>
</div>
</ion-radio-group>
或者,比如说,如果你想要一个复选框 yellow-500 在不受限制的状态中 indigo-500 带有 indigo-400 在检查状态下的边界,您会这样做:
<ion-checkbox
class="
part-container:!bg-yellow-500
ion-checked:part-container:!bg-indigo-500
ion-checked:part-container:!border-indigo-400
"
/>
请注意: part-container 用于瞄准复选框标记本身和 ! 以取代Ionic样式.
主题颜色
如果您将插件一个或多个有效的路径传递到包含Ionic主题变量的 CSS 文件,它们会被转换为Tailwind主题颜色.
/** @type {import('tailwindcss/types').Config} */
/** @type {import('@aparajita/tailwind-ionic').plugin} */
const ionic = require('@aparajita/tailwind-ionic')
module.exports = {
plugins: [ionic('src/theme/variables.css')]
}
您也可以通过路径作为 .theme 选项对象的属性,或带有一个 .theme 属性。 这使得您可以访问Ionic主题文件以及您自己的定制文件.
/** @type {import('tailwindcss/types').Config} */
/** @type {import('@aparajita/tailwind-ionic').plugin} */
const ionic = require('@aparajita/tailwind-ionic')
module.exports = {
plugins: [ionic({
theme: 'src/theme/variables.css',
})]
}
/** @type {import('tailwindcss/types').Config} */
/** @type {import('@aparajita/tailwind-ionic').plugin} */
const ionic = require('@aparajita/tailwind-ionic')
module.exports = {
plugins: [ionic([
'src/theme/variables.css',
'assets/css/theme.css',
require.resolve('@ionic/vue/css/palettes/dark.class.css'),
)]
}
示例
如果文件 variables.css 这是:
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
/* ...lots more */
}
然后,你有效的 Tailwind 配置 最终是:
module.exports = {
theme: {
extend: {
colors: {
// ...whatever colors you have in your tailwind.config.js
'ion-color-primary': 'var(--ion-color-primary)',
'ion-color-primary-rgb': 'var(--ion-color-primary-rgb)',
'ion-color-primary-contrast': 'var(--ion-color-primary-contrast)',
'ion-color-primary-contrast-rgb': 'var(--ion-color-primary-contrast-rgb)',
'ion-color-primary-shade': 'var(--ion-color-primary-shade)',
'ion-color-primary-tint': 'var(--ion-color-primary-tint)',
// ...and so on
}
}
}
}
由于变量是彩色调色板的一部分,它们被添加到所有的"Tailwind"彩色公用事业中:文本,bg,边框等.
<ion-label class="text-ion-color-primary">My label</ion-label>
<span class="text-ion-color-success">Success!</span>
<div class="bg-ion-color-background">
<!-- content -->
</div>
<div class="border-ion-color-tertiary-tint">
<!-- content -->
</div>