Design systém gov.cz4.7.0

Použití v čistém HTML

Bez frameworku se komponenty používají jako běžné HTML elementy. Nepotřebujete žádný wrapper ani bundler.

Skeleton

Funkční projekt k naklonování: starters/vanilla.

1. Instalace ​

shell
npm install @gov-design-system-ce/components \
            @gov-design-system-ce/styles \
            @gov-design-system-ce/icons \
            @gov-design-system-ce/fonts

2. Styly, ikony a fonty ​

Postupujte podle stránky Pro vývojáře.

Ikony je nutné zkopírovat se zachováním podadresářů (components, complex, colored) — jinak skončí každá ikona chybou 404, aniž by se cokoli objevilo v konzoli. Podrobně v sekci Ikony.

3. Konfigurace ​

Konfiguraci nastavte před registrací komponent:

html
<script>
  window.GOV_DS_CONFIG = {
    iconsPath: "/assets/icons",
  };
</script>

4. Registrace komponent ​

S bundlerem (Vite, webpack, …) ​

javascript
import { defineCustomElements } from "@gov-design-system-ce/components/loader";

defineCustomElements(window);

Bez bundleru ​

Zkopírujte obsah adresáře dist z balíčku @gov-design-system-ce/components do veřejné části projektu:

shell
npm install copyfiles --save-dev
json
{
  "scripts": {
    "copy:components": "copyfiles -u 4 \"node_modules/@gov-design-system-ce/components/dist/**/*\" public/components"
  }
}

Loader potom načtěte v <head>. Atribut src je veřejná URL zkopírovaného adresáře — v tomto příkladu je public/ webový root, takže public/components je dostupné na /components:

html
<script type="module" src="/components/core/core.esm.js"></script>

5. Použití komponent ​

html
<gov-container>
  <gov-card>
    <h3 slot="headline">Nadpis karty</h3>
    <p>Obsah karty.</p>
  </gov-card>

  <gov-form-control>
    <gov-form-label identifier="jmeno">Jméno</gov-form-label>
    <gov-form-input identifier="jmeno" placeholder="Jan Novák"></gov-form-input>
  </gov-form-control>

  <gov-button type="solid" color="primary" size="m">
    Odeslat
    <gov-icon slot="icon-end" name="chevron-right"></gov-icon>
  </gov-button>
</gov-container>

Na co si dát pozor ​

  • Varianty tlačítka se nastavují přes type a color, nikoli přes variant — atribut variant neexistuje a bude bez upozornění ignorován.
  • Nadpis karty patří do slotu headline, nikoli title. Neexistující název slotu se vykreslí jako běžný obsah na špatném místě.
  • Formulářová pole nemají atribut label — popisek se skládá z gov-form-control a gov-form-label spojených shodným identifier.

Přehled slotů a atributů konkrétní komponenty najdete na její stránce v sekci Komponenty.