Attributify prednastavitev

To omogoča način attributify za druge prednastavitve.

Izvorna koda

Namestitev

pnpm

pnpm add -D @unocss/preset-attributify

yarn

yarn add -D @unocss/preset-attributify

npm

npm install -D @unocss/preset-attributify

bun

bun add -D @unocss/preset-attributify

import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetAttributify({ /* možnosti prednastavitve */ }),
    // ...
  ],
})

TIP

Ta prednastavitev je vključena v paket unocss, lahko jo tudi uvozite od tam:

import { presetAttributify } from 'unocss'

Način Attributify

Predstavljajte si, da imate ta gumb z uporabo pripomočkov Tailwind CSS. Ko seznam postane daljši, postane res težko berljiv in vzdrževan.

<button
  class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600"
>
  Button
</button>

Z načinom attributify lahko ločite pripomočke v atribute:

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

Na primer, text-sm text-white bi lahko združili v text="sm white" brez podvajanja iste predpone.

Predpona samoreferenciranja

Za pripomočke, kot so flex, grid, border, ki imajo pripomočke enake kot predpona, je na voljo posebna vrednost ~.

Na primer:

<button class="border border-red">Button</button>

Lahko zapišete kot:

<button border="~ red">Button</button>

Brez vrednosti attributify

Poleg načina attributify Windi CSS, ta prednastavitev podpira tudi atribute brez vrednosti.

Na primer,

<div class="m-2 rounded text-teal-400" />

zdaj je lahko

<div m-2 rounded text-teal-400 />

INFO

Opomba: Če uporabljate JSX, je morda <div foo> transformirano v <div foo={true}>, kar lahko povzroči, da generirani CSS iz UnoCSS ne bo mogel ujemati atributov. Za rešitev tega lahko poskusite z transformer-attributify-jsx skupaj s to prednastavitvijo.

Konflikti lastnosti

Če se ime načina atributov kdaj spopade z lastnostmi elementov ali komponent, lahko dodate predpono un- za specifično UnoCSS način attributify.

Na primer:

<a text="red">To se spopade z lastnostjo `text` povezav</a>
<!-- na -->
<a un-text="red">Barva besedila rdeča</a>

Predpona je privzeto izbirna, če želite uveljaviti uporabo predpone, nastavite

presetAttributify({
  prefix: 'un-',
  prefixedOnly: true, // <--
})

Prav tako lahko onemogočite iskanje za določene atribute z:

presetAttributify({
  ignoreAttributes: [
    'text'
    // ...
  ]
})

Podpora TypeScript (JSX/TSX)

Ustvarite shims.d.ts z naslednjo vsebino:

Privzeto tip vključuje običajne atribute iz @unocss/preset-wind3. Če potrebujete atribute po meri, si oglejte vir tipov za implementacijo vašega lastnega tipa.

Vue

Od Volar 0.36, zdaj je strog do neznanih atributov. Za izklop lahko dodate naslednjo datoteko v vaš projekt:

declare module '@vue/runtime-dom' {
  interface HTMLAttributes {
    [key: string]: any
  }
}
declare module '@vue/runtime-core' {
  interface AllowedComponentProps {
    [key: string]: any
  }
}
export {}

React

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'react' {
  interface HTMLAttributes<T> extends AttributifyAttributes {}
}

Vue 3

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module '@vue/runtime-dom' {
  interface HTMLAttributes extends AttributifyAttributes {}
}

SolidJS

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'solid-js' {
  namespace JSX {
    interface HTMLAttributes<T> extends AttributifyAttributes {}
  }
}

Svelte & SvelteKit

declare namespace svelteHTML {
  import type { AttributifyAttributes } from '@unocss/preset-attributify'

  type HTMLAttributes = AttributifyAttributes
}

Astro

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare global {
  namespace astroHTML.JSX {
    interface HTMLAttributes extends AttributifyAttributes { }
  }
}

Preact

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'preact' {
  namespace JSX {
    interface HTMLAttributes extends AttributifyAttributes {}
  }
}

Attributify s predpono

import type { AttributifyNames } from '@unocss/preset-attributify'

type Prefix = 'uno:' // spremenite v vašo predpono

interface HTMLAttributes extends Partial<Record<AttributifyNames<Prefix>, string>> {}

Možnosti

strict

• tip: boolean
• privzeto: false

Generiraj CSS le za attributify ali class.

prefix

• tip: string
• privzeto: 'un-'

Predpona za način attributify.

prefixedOnly

• tip: boolean
• privzeto: false

Ujemaj le za atribute s predpono.

nonValuedAttribute

• tip: boolean
• privzeto: true

Podpora za ujemanje atributov brez vrednosti.

ignoreAttributes

• tip: string[]

Seznam atributov, ki naj bodo izključeni iz ekstrakcije.

trueToNonValued

• tip: boolean
• privzeto: false

Atributi brez vrednosti se bodo ujemali tudi, če je dejanska vrednost, predstavljena v DOM, true. Ta možnost obstaja za podporo frameworkom, ki kodirajo atribute brez vrednosti kot true. Omogočanje te možnosti bo prekinilo pravila, ki se končajo s true.

Zahvale

Začetno idejo sta prispevala @Tahul in @antfu. Predhodna implementacija v Windi CSS od @voorjaar.