# Widgety v CMS Total.js: použite ich na stránke a napíšte vlastné
> Ako sa widget zobrazuje v HTML stránky (atribút data-cms a jeho JSON), časti súboru widgetu, zástupný symbol CLASS, vykresľovanie widgetu na serveri cez exports.render a inštalácia widgetov cez API.
Framework: cms
Product: CMS (cms@8071e48)
Language: sk
Content-SHA256: f77452e925e44d7c9e3dad2b5597181d0934da10e69d4978819d420ca54e9c1f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
**Widget** je blok, ktorý umiestnite na stránku: nadpis, upozornenie, galériu. Nesie vlastný štýl, formulár na jeho nastavenie v editore a voliteľne kód, ktorý ho vykreslí na serveri. Widget je jeden súbor HTML, ako komponent [Flow](/en/flow/write-a-component/), a CMS ho ukladá do svojich metadát.
## Widget na stránke
V HTML stránky je widget `div` s dvoma atribútmi:
```html
```
- `data-cms` je `__`, kde konfigurácia je objekt JSON zapísaný cez `encodeURIComponent`. Zapisuje ho editor; môžete ho zapísať aj sami, keď generujete stránky.
- `data-cms-id` je identifikátor inštancie na stránke.
Keď sa stránka obslúži, CMS odstráni atribút `data-cms`, ponechá HTML vo vnútri a do hlavičky pridá štýl každého widgetu stránky. Ak widget nie je nainštalovaný, jeho blok sa vynechá.
## Časti súboru widgetu
| Časť | Na čo slúži |
|---|---|
| `
Hello world
```
`opt.config` je konfigurácia inštancie, `opt.html` HTML, ktoré bolo vo vnútri bloku, a `opt.id`, `opt.uid` a `opt.body` ho opisujú. `next(html, replace)` odovzdá HTML, ktoré sa obslúži; s `true` ako druhým argumentom nahradí celý blok. Tento súbor sme uložili do lokálneho CMS a stránka s `data-cms="hello__..."` a `{"text":"mundo"}` vyšla ako `Hello MUNDO
` s `.w-hello{color:#07c}` v hlavičke. Oficiálny widget `picture` používa rovnakú funkciu na pridanie `loading="lazy"` k obrázku a `code` na vypísanie kódu zo svojich nastavení.
`exports.install` a `exports.uninstall` sa spustia s databázou CMS, keď sa widget pridá, zmení alebo odstráni.
## Inštalácia a odstránenie widgetov
Plugin *Widgets* administrácie importuje súbor; cez API je to `widgets_save` s `{ "html": "", "singleton": true }` (`singleton` vynechá widget, ak už existuje), `widgets_list`, `widgets_read`, `widgets_detail` a `widgets_remove`. Vyžadujú oprávnenie `widgets` (pozri [API administrácie](/en/cms/the-admin-api/)). 43 oficiálnych widgetov je v [repozitári widgetov](/en/cms/the-widgets-repository/).