Новые возможности в v3.1 #

Это сводная версия, в которой суммируются улучшения и добавленные функции с версии v3.0.6 до версии v3.1.0.

Функции #

Новый синтаксис обработчика непрозрачности #

Цвет и прозрачность обычно являются обычным сочетанием. Раньше у нас было text-green-500 text-opacity-50. Теперь вы можете использовать следующие сокращения.

• text-green-500/50
• underline-green-500/50
• placeholder-green-500/50
• bg-indigo-500/$primary-opacity
• bg-green-500/[0.17]
• ...

Новый цвет стороны границы и непрозрачность стороны границы #

Новые утилиты цвета стороны границы позволяют вам установить различный цвет границы для разных сторон

• border-t-green-200
• border-t-green-200/50
• border-b-green-200
• border-l-yellow-300
• border-r-blue-400

Утилита для нового контента #

Утилиты контента генерируют соответствующий контент css, такой как content: '', который может быть очень полезен во многих случаях.

• content-👍
• before:content-["👍"]
• content-open-quote
• after:content-[attr(value)]
• content

Добавить другие значения по умолчанию для цвета градиента #

Создание цветов градиента всегда было проблемой, и вы не можете быть уверены, что полученный цвет градиента будет хорошо выглядеть. Поэтому мы добавили больше настроек цвета градиента по умолчанию, чтобы пользователям было проще его использовать. Цвета градиента из coolhue.

• bg-gradient-1
• bg-gradient-2
• ...
• bg-gradient-60

Новые утилиты анимации #

Предыдущие утилиты анимации не обладали интерактивностью, поэтому мы добавили новый набор анимаций (благодаря упорной работе animate.css) и добавили соответствующие служебные утилиты.

Анимации #

• animate-none
• animate-spin
• animate-ping
• animate-pulse
• animate-bounce
• animate-shock
• animate-flash
• animate-bubble
• animate-rubber-band
• animate-shake-x
• animate-shake-y
• ...для получения дополнительной информации, пожалуйста, обратитесь к https://github.com/windicss/windicss/blob/main/src/config/base.ts#L92-L209

Запуск анимации #

• animated

Вам нужно использовать анимацию для запуска анимации(animated animate-flash), как и с filter blur-sm. Если вам нужно, чтобы анимация воспроизводилась бесконечно, вам также необходимо использовать animate-loop. Это для улучшения настраиваемости. В большинстве случаев нам, вероятно, нужно просто запустить его один раз, а не цикл.

animate-spin animate-ping animate-pulse animate-bounce - особые случаи, вы можете запускать их без использования animated, и они будут зацикливаться одновременно. Поскольку это уже существующие утилиты, внезапное их изменение может вызвать множество проблем для пользователей. Понять, как они работают, можно через файл конфигурации.

export default {
  animation: {
    'spin': 'spin 1s linear infinite',
    'ping': 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
    'pulse': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
    'bounce': 'bounce 1s infinite',
    'shock': {
      animation: 'shock',
      transformOrigin: 'center bottom',
    },
    'flash': 'flash',
    'bubble': 'bubble',
    'rubber-band': 'rubberBand',
    'shake-x': 'shakeX',
    // ...
  },
}

Задержка анимации #

Утилита animation-delay определяет задержку начала анимации.

• animate-delay-100
• animate-delay-1500
• animate-delay-[1s]
• animate-delay-$time-delay
• animate-delay-1.5s
• animate-delay-200ms

Направление анимации #

Утилита animation-direction определяет, следует ли воспроизводить анимацию вперед, назад или в альтернативных циклах.

• animate-reverse
• animate-alternate
• animate-alternate-reverse

Продолжительность анимации #

Утилита animation-duration определяет, сколько времени должно занять анимация для завершения одного цикла.

• animate-duration-100
• animate-duration-1500
• animate-duration-1.5s
• animate-duration-[1.3s]
• animate-duration-$time-duration

Режим заливки анимацией #

Утилита animation-fill-mode задает стиль для элемента, когда анимация не воспроизводится (до начала, после окончания или и то, и другое).

• animate-fill-none
• animate-fill-forwards
• animate-fill-backwards
• animate-fill-both

Количество итераций анимации #

Утилита animation-iteration-count указывает, сколько раз должна воспроизводиться анимация.

• animate-loop
• animate-repeat-1
• animate-repeat-12
• animate-repeat-[23]

Состояние воспроизведения анимации #

Утилита animation-play-state указывает, запущена или приостановлена анимация.

• animate-paused
• animate-running

Функция анимации времени #

Функция animation-timing-function определяет кривую скорости анимации.

• animate-ease
• animate-ease-in
• animate-ease-linear
• animate-ease-out
• animate-ease-in-out
• animate-ease-[cubic-bezier(0.25,0.1,0.25,1)]

Новый обработчик времени #

Мы также добавили новый обработчик времени, который позволяет использовать соответствующее время, например s и ms, непосредственно в className. duration-{time} delay-{time} animate-duration-{time} animate-delay-{time}.

  <div class="duration-1.5s delay-200ms animate-duration-1.3s">...</div>

Вы можете управлять его переключателем, настроив handlers.time

export default {
  theme: {
    // ...
  },
  handlers: {
    static: true,
    time: false,
  },
}

Поддержка темного режима для типографики #

Мы добавили красивый темный режим для плагина типографики, вы можете включить эту функцию через конфигурацию dark, которая добавит соответствующий темный режим css на основе вашей конфигурации darkMode.

import typography from 'windicss/plugin/typography'
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  darkMode: 'class',
  plugins: [
    typography({
      dark: true,
    }),
  ],
})

Поддержка RTL для типографики #

Раньше типографика плохо поддерживала rtl, мы решили эту проблему.

import typography from 'windicss/plugin/typography'
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  plugins: [
    typography({
      rtl: true,
    }),
  ],
})

Библиотека иконок для Windi #

Добавлена библиотека значков для windicss, работающая на css.gg.

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

Давайте просто создадим кнопку или меню закрытия. Это полностью чистый css и создается по запросу.

<div class="bg-gray-200 text-gray-800 hover:bg-gray-300 rounded-full w-8 h-8 flex items-center justify-center">
  <i class="icon-close"></i>
</div>

<div class="bg-gray-200 text-gray-800 hover:bg-gray-300 rounded w-12 h-12 flex items-center justify-center">
  <i class="icon-menu"></i>
</div>

Больше улучшений #

• better square brackets support
• support include and exclude option in config file
• support attributify prefix
• support safelist in cli
• support watch config file in cli

API #

Новый API для проверки того, является ли утилита утилитой windi #

Processor.test('bg-red-500') // -> boolean
Processor.validate('font-bold text-green-300 sm:dark:hover:text-lg') // -> boolean

Поддержка добавления завершения в API addDynamic #

addDynamic('line-clamp', ({ Utility, Property, Style }) => {
  // ...
}, {
  group: 'lineClamp',
  completions: [
    'line-clamp-none',
    'line-clamp-{int}',
  ],
})