Attributify प्रीसेट

यह अन्य प्रीसेट्स के लिए attributify मोड सक्षम करता है।

स्रोत कोड

इंस्टॉलेशन

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({ /* प्रीसेट विकल्प */ }),
    // ...
  ],
})

TIP

यह प्रीसेट unocss पैकेज में शामिल है, आप इसे वहाँ से भी आयात कर सकते हैं:

import { presetAttributify } from 'unocss'

Attributify मोड

कल्पना करें कि आपके पास Tailwind CSS की यूटिलिटीज़ का उपयोग करते हुए यह बटन है। जब सूची लंबी हो जाती है, तो इसे पढ़ना और बनाए रखना वास्तव में कठिन हो जाता है।

<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 मोड के साथ, आप यूटिलिटीज़ को एट्रिब्यूट्स में अलग कर सकते हैं:

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

उदाहरण के लिए, text-sm text-white को एक ही प्रीफ़िक्स को डुप्लिकेट किए बिना text="sm white" में समूहीकृत किया जा सकता है।

प्रीफ़िक्स सेल्फ-रेफ़रेंसिंग

flex, grid, border जैसी यूटिलिटीज़ के लिए, जिनकी यूटिलिटीज़ प्रीफ़िक्स के समान हैं, एक विशेष ~ मान प्रदान किया गया है।

उदाहरण के लिए:

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

इस प्रकार लिखा जा सकता है:

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

वैल्यूलेस attributify

Windi CSS के attributify मोड के अलावा, यह प्रीसेट वैल्यूलेस एट्रिब्यूट्स को भी समर्थित करता है।

उदाहरण के लिए,

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

अब हो सकता है

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

INFO

नोट: यदि आप JSX का उपयोग कर रहे हैं, तो <div foo> को <div foo={true}> में रूपांतरित किया जा सकता है जो UnoCSS से जेनरेट की गई CSS को एट्रिब्यूट्स से मेल खाने में विफल कर देगा। इसे हल करने के लिए, आप इस प्रीसेट के साथ transformer-attributify-jsx आज़मा सकते हैं।

प्रॉपर्टी संघर्ष

यदि कभी एट्रिब्यूट्स मोड का नाम तत्वों या कंपोनेंट्स की प्रॉपर्टी से संघर्ष करता है, तो आप UnoCSS के attributify मोड के लिए विशिष्ट रूप से un- प्रीफ़िक्स जोड़ सकते हैं।

उदाहरण के लिए:

<a text="red">This conflicts with links' `text` prop</a>
<!-- तक -->
<a un-text="red">Text color to red</a>

प्रीफ़िक्स डिफ़ॉल्ट रूप से वैकल्पिक है, यदि आप प्रीफ़िक्स के उपयोग को लागू करना चाहते हैं, तो सेट करें

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

आप निम्न द्वारा कुछ एट्रिब्यूट्स के लिए स्कैनिंग को अक्षम कर सकते हैं:

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

TypeScript समर्थन (JSX/TSX)

निम्न सामग्री के साथ shims.d.ts बनाएं:

डिफ़ॉल्ट रूप से, टाइप में @unocss/preset-wind3 के सामान्य एट्रिब्यूट्स शामिल हैं। यदि आपको कस्टम एट्रिब्यूट्स की आवश्यकता है, तो अपना स्वयं का टाइप लागू करने के लिए टाइप स्रोत देखें।

Vue

Volar 0.36 से, अब यह अज्ञात एट्रिब्यूट्स के लिए सख्त है। बाहर निकलने के लिए, आप अपने प्रोजेक्ट में निम्न फ़ाइल जोड़ सकते हैं:

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

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

type Prefix = 'uno:' // इसे अपने प्रीफ़िक्स में बदलें

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

विकल्प

strict

• प्रकार: boolean
• डिफ़ॉल्ट: false

केवल attributify या क्लास के लिए CSS जेनरेट करें।

prefix

• प्रकार: string
• डिफ़ॉल्ट: 'un-'

attributify मोड के लिए प्रीफ़िक्स।

prefixedOnly

• प्रकार: boolean
• डिफ़ॉल्ट: false

केवल प्रीफ़िक्स वाले एट्रिब्यूट्स के लिए मेल खाएं।

nonValuedAttribute

• प्रकार: boolean
• डिफ़ॉल्ट: true

गैर-मूल्यवान एट्रिब्यूट्स के मेल खाने का समर्थन करें।

ignoreAttributes

• प्रकार: string[]

निकालने से अनदेखा किए जाने वाले एट्रिब्यूट्स की सूची।

trueToNonValued

• प्रकार: boolean
• डिफ़ॉल्ट: false

गैर-मूल्यवान एट्रिब्यूट्स भी मेल खाएंगे यदि DOM में दर्शाया गया वास्तविक मान true है। यह विकल्प उन फ्रेमवर्क्स को समर्थन करने के लिए मौजूद है जो गैर-मूल्यवान एट्रिब्यूट्स को true के रूप में एन्कोड करते हैं। इस विकल्प को सक्षम करने से true से समाप्त होने वाले नियम टूट जाएंगे।

क्रेडिट

प्रारंभिक विचार @Tahul और @antfu द्वारा। @voorjaar द्वारा Windi CSS में पूर्व कार्यान्वयन।