Logo Windi CSS

@windicss/plugin-heropatterns

Оптимизированная интеграция между windicss и heropatterns. Этот плагин модифицирован на основе tailwind-heropatterns для адаптации к Windi CSS.

Установка

Добавьте этот плагин в свой проект:

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

Использование

Плагин heropatterns предоставляет некоторые параметры для настройки сгенерированных классов. Вот пример его добавления в плагины вашего проекта

require('@windicss/plugin-heropatterns')({
  // список шаблонов, для которых вы хотите создать класс
  // имена должны быть в кебаб-регистре
  // пустой массив сгенерирует все 87 паттернов
  patterns: ['polka-dots', 'signal'],

  // Цвета переднего плана узора
  colors: {
    'default': '#9C92AC',
    'blue-dark': '#000044', // also works with rgb(0,0,205)
  },

  // Непрозрачность переднего плана
  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,
  },
}

Список названий паттернов:

  1. anchors-away
  2. architect
  3. autumn
  4. aztec
  5. bamboo
  6. bank-note
  7. bathroom-floor
  8. bevel-circle
  9. boxes
  10. brick-wall
  11. bubbles
  12. cage
  13. charlie-brown
  14. church-on-sunday
  15. circles-squares
  16. circuit-board
  17. connections
  18. cork-screw
  19. current
  20. curtain
  21. cutout
  22. death-star
  23. diagonal-lines
  24. diagonal-stripes
  25. dominos
  26. endless-clouds
  27. eyes
  28. falling-triangles
  29. fancy-rectangles
  30. flipped-diamonds
  31. floating-cogs
  32. floor-tile
  33. formal-invitation
  34. four-point-stars
  35. glamorous
  36. graph-paper
  37. groovy
  38. happy-intersection
  39. heavy-rain
  40. hexagons
  41. hideout
  42. houndstooth
  43. i-like-food
  44. intersecting-circles
  45. jigsaw
  46. jupiter
  47. kiwi
  48. leaf
  49. lines-in-motion
  50. lips
  51. lisbon
  52. melt
  53. moroccan
  54. morphing-diamonds
  55. overcast
  56. overlapping-circles
  57. overlapping-diamonds
  58. overlapping-hexagons
  59. parkay-floor
  60. piano-man
  61. pie-factory
  62. pixel-dots
  63. plus
  64. polka-dots
  65. rails
  66. rain
  67. random-shapes
  68. rounded-plus-connected
  69. signal
  70. skulls
  71. slanted-stars
  72. squares
  73. squares-in-squares
  74. stamp-collection
  75. steel-beams
  76. stripes
  77. temple
  78. texture
  79. tic-tac-toe
  80. tiny-checkers
  81. topography
  82. volcano-lamp
  83. wallpaper
  84. wiggle
  85. x-equals
  86. yyy
  87. zig-zag