@windicss/plugin-heropatterns

优化 windicss 和 heropatterns 之间的集成。该插件基于 tailwind-heropatterns 修改而来以适配 Windi CSS。

安装

将此插件添加到你的项目：

npm install --save-dev @windicss/plugin-heropatterns

用法

heropatterns 插件通过暴露选项来配置生成的类。下面是将其添加到项目插件的示例。

require('@windicss/plugin-heropatterns')({
  // the list of patterns you want to generate a class for
  // the names must be in kebab-case
  // an empty array will generate all 87 patterns
  patterns: ['polka-dots', 'signal'],

  // The foreground colors of the pattern
  colors: {
    'default': '#9C92AC',
    'blue-dark': '#000044', // also works with rgb(0,0,205)
  },

  // The foreground opacity
  opacity: {
    default: '0.4',
    100: '1.0',
  },
})

该配置将创建下面的类：

.bg-hero-polka-dots-100 {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='1.0' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-hero-signal-100 {
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%239C92AC' fill-opacity='1.0' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.bg-hero-polka-dots-blue-dark-100 {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000044' fill-opacity='1.0' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-hero-signal-blue-dark-100 {
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%23000044' fill-opacity='1.0' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.bg-hero-polka-dots {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-hero-signal {
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.bg-hero-polka-dots-blue-dark {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000044' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-hero-signal-blue-dark {
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%23000044' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

正如你所见，当你对颜色或者不透明度使用 default 时，它在类中会被省略。

因此如下配置：

require('@windicss/plugin-heropatterns')({
  patterns: ['polka-dots', 'signal'],
  colors: {
    default: '#9C92AC',
  },
  opacity: {
    default: '0.4',
  },
})

将生成如下的类

.bg-hero-polka-dots {
  /**/
}
.bg-hero-signal {
  /**/
}

默认值

默认配置如下。它将生成 heropatterns.com 默认颜色的所有模式。

config = {
  patterns: [],
  colors: {
    default: '#9C92AC',
  },
  opacity: {
    default: 0.4,
  },
}

模式名称列表：

anchors-away
architect
autumn
aztec
bamboo
bank-note
bathroom-floor
bevel-circle
boxes
brick-wall
bubbles
cage
charlie-brown
church-on-sunday
circles-squares
circuit-board
connections
cork-screw
current
curtain
cutout
death-star
diagonal-lines
diagonal-stripes
dominos
endless-clouds
eyes
falling-triangles
fancy-rectangles
flipped-diamonds
floating-cogs
floor-tile
formal-invitation
four-point-stars
glamorous
graph-paper
groovy
happy-intersection
heavy-rain
hexagons
hideout
houndstooth
i-like-food
intersecting-circles
jigsaw
jupiter
kiwi
leaf
lines-in-motion
lips
lisbon
melt
moroccan
morphing-diamonds
overcast
overlapping-circles
overlapping-diamonds
overlapping-hexagons
parkay-floor
piano-man
pie-factory
pixel-dots
plus
polka-dots
rails
rain
random-shapes
rounded-plus-connected
signal
skulls
slanted-stars
squares
squares-in-squares
stamp-collection
steel-beams
stripes
temple
texture
tic-tac-toe
tiny-checkers
topography
volcano-lamp
wallpaper
wiggle
x-equals
yyy
zig-zag

@windicss/plugin-heropatterns #

安装 #

用法 #

默认值 #

模式名称列表： #

@windicss/plugin-heropatterns

安装

用法

默认值

模式名称列表：