Runtime

UnoCSS runtime zagotavlja CDN gradnjo, ki izvaja UnoCSS neposredno v brskalniku. Zaznal bo spremembe DOM in generiral sloge sproti.

Uporaba

Dodajte naslednjo vrstico v vaš index.html:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

Runtime je mogoče konfigurirati z določitvijo konfiguracije pred nalaganjem runtime:

<!-- določite unocss možnosti... -->
<script>
  window.__unocss = {
    rules: [
      // custom rules...
    ],
    presets: [
      // custom presets...
    ],
    // ...
  }
</script>
<!-- ... in nato naložite runtime -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

Privzeto je uporabljena Wind3 prednastavitev.

Runtime ne prihaja s preflighti, če želite imeti ponastavitev slogov, lahko dodate svoje ali uporabite eno iz paketa Reset.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/normalize.min.css" />
<!-- ali -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />

Gradnje

Na voljo je več gradenj za različne primere uporabe.

Uno (privzeto)

S prednastavitvijo @unocss/preset-wind3:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js"></script>

Attributify

S prednastavitvama @unocss/preset-wind3 in @unocss/preset-attributify:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script>

Mini

S prednastavitvama @unocss/preset-mini in @unocss/preset-attributify:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/mini.global.js"></script>

Core

Če potrebujete mešanje in ujemanje prednastavitev, lahko naložite le core runtime in ročno dodelite prednastavitve. Vse uradne prednastavitve iz UnoCSS so na voljo. Naložite tisto, ki jo potrebujete, pred inicializacijo core runtime.

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/preset-icons.global.js"></script>
<script>
  window.__unocss = {
    presets: [
      () =>
        window.__unocss_runtime.presets.presetIcons({
          scale: 1.2,
          cdn: 'https://esm.sh/',
        }),
    ],
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/core.global.js"></script>

Uporaba v paketu

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* možnosti */ })

Konfiguracija UnoCSS je lahko podana z uporabo lastnosti defaults:

import initUnocssRuntime from '@unocss/runtime'
import config from './uno.config'

initUnocssRuntime({ defaults: config })

Prednastavitve so lahko uvožene iz esm.sh:

import { defineConfig } from '@unocss/runtime'
import presetIcons from 'https://esm.sh/@unocss/preset-icons/browser'
import presetWind3 from 'https://esm.sh/@unocss/preset-wind3'

export default defineConfig({
  presets: [presetWind3(), presetIcons({ cdn: 'https://esm.sh/' })],
})

Preprečevanje FOUC

Ker UnoCSS teče, ko je DOM pripravljen, lahko pride do "bliska nestilizirane vsebine" (FOUC), kar lahko povzroči, da uporabnik vidi stran kot nestilizirano.

Uporabite atribut un-cloak s CSS pravili, kot je [un-cloak] { display: none }, da skrijete nestiliziran element, dokler UnoCSS ne uporabi slogov zanj.

css

[un-cloak] {
  display: none;
}

html

<div class="text-blue-500" un-cloak>To besedilo bo vidno le v modri barvi.</div>