Attributify preset

Bu, diğer preset'ler için attributify modunu etkinleştirir.

Kaynak Kodu

Installation

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({ /* preset seçenekleri */ }),
    // ...
  ],
})

TIP

Bu preset unocss paketine dahildir, oradan da içe aktarabilirsiniz:

import { presetAttributify } from 'unocss'

Attributify Mode

Tailwind CSS'in yardımcı programlarını kullanan bu düğmeyi hayal edin. Liste uzadıkça, okumak ve sürdürmek gerçekten zorlaşır.

<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>

Attributify modu ile, yardımcı programları özniteliklere ayırabilirsiniz:

<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>

Örneğin, text-sm text-white aynı ön eki tekrarlamadan text="sm white" olarak gruplanabilir.

Prefix self-referencing

flex, grid, border gibi ön ek ile aynı yardımcı programlara sahip yardımcı programlar için özel bir ~ değeri sağlanır.

Örneğin:

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

Şöyle yazılabilir:

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

Valueless attributify

Bu preset, Windi CSS'in attributify moduna ek olarak, değersiz öznitelikleri de destekler.

Örneğin,

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

şimdi şöyle olabilir

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

INFO

Not: JSX kullanıyorsanız, <div foo> <div foo={true}>'ya dönüştürülebilir ve bu UnoCSS'ten oluşturulan CSS'in öznitelikleri eşleştirememesine neden olabilir. Bunu çözmek için, bu preset ile birlikte transformer-attributify-jsx kullanmayı düşünebilirsiniz.

Properties conflicts

Öznitelik modunun adı öğelerin veya bileşenlerin özellikleriyle çakışırsa, UnoCSS'in attributify moduna özgü olmak için un- ön eki ekleyebilirsiniz.

Örneğin:

<a text="red">Bu, bağlantıların `text` özelliğiyle çakışır</a>
<!-- şuna -->
<a un-text="red">Metin rengini kırmızı yap</a>

Ön ek varsayılan olarak isteğe bağlıdır, ön ek kullanımını zorunlu kılmak istiyorsanız, şunu ayarlayın

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

Ayrıca belirli öznitelikler için taramayı şu şekilde devre dışı bırakabilirsiniz:

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

TypeScript support (JSX/TSX)

Aşağıdaki içerikle shims.d.ts oluşturun:

Varsayılan olarak, tür @unocss/preset-wind3'ten ortak öznitelikleri içerir. Özel özniteliklere ihtiyacınız varsa, kendi türünüzü uygulamak için tür kaynağına bakın.

Vue

Volar 0.36'dan beri, bilinmeyen özniteliklere karşı artık katı. Devre dışı bırakmak için, projenize aşağıdaki dosyayı ekleyebilirsiniz:

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 with Prefix

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

type Prefix = 'uno:' // ön ekinizi buraya değiştirin

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

Options

strict

• type: boolean
• default: false

Yalnızca attributify veya class için CSS oluştur.

prefix

• type: string
• default: 'un-'

Attributify modu için ön ek.

prefixedOnly

• type: boolean
• default: false

Yalnızca ön ekli öznitelikleri eşleştir.

nonValuedAttribute

• type: boolean
• default: true

Değersiz öznitelikleri eşleştirmeyi destekle.

ignoreAttributes

• type: string[]

Çıkarmadan hariç tutulacak öznitelik listesi.

trueToNonValued

• type: boolean
• default: false

DOM'da temsil edilen gerçek değer true ise değersiz öznitelikler de eşleşir. Bu seçenek, değersiz öznitelikleri true olarak kodlayan çerçeveleri desteklemek için vardır. Bu seçeneği etkinleştirmek true ile biten kuralları bozacaktır.

Credits

İlk fikir @Tahul ve @antfu tarafından. Önceki Windi CSS uygulaması @voorjaar tarafından.