Hai Form

Instalace a použití - Vanilla JS

Stáhněte si soubory knihovny z adresáře 'dist' na GitHubu. Můžete si vybrat mezi základní verzí (adresář "basic") a verzí se zahrnutými externími knihovnami (adresář "with-dependencies").

Po stažení knihovny ji importujte a vložte její CSS styly.


<script type='module'>
   import { HaiInput } from "/your-path/hai-input-class.esm.min.js";
</script>

<link rel='stylesheet' href='/your-path/hai-input.css'>

<!-- If you want, you can also use styles with a dark theme (but the basic hai-input.css is always necessary) -->
<link rel='stylesheet' href='/your-path/hai-input-dark.css' media='(prefers-color-scheme: dark)'>

Poté můžete nastavit jazyk upozornění a chybových hlášení pro uživatele.


<!-- Either you can specify the language code corresponding to one of the supported languages (the files are located in the /src/classes/languages directory): -->
<script>
    HaiInput.changeLanguage({
           newLangCode: 'cs'
    });
</script>

<!-- Or you can provide the URL to your own dictionary: -->
<script>
    HaiInput.changeLanguage({
        filePath: '/path/to/your/dictionary.js'
    });
</script>

<!-- Or you can directly use a translation object: -->
<script>
    HaiInput.changeLanguage({
       dictionary: {
            'port-forbidden': `We do not allow this port.`,
            'path-forbidden': `This part of the url is not allowed.`,
       }
    });
</script>

Knihovnu posléze můžete začít používat prostřednictvím funkce HaiInput.create(). První parametr určuje typ formulářového pole, které chcete použít, druhý je element, který má být transformován, a třetí obsahuje konkrétní nastavení pro dané pole.


<script async>
    let field = document.getElementById('name');
    let parameters = {mask: '000 - AAA', label: 'Code', placeholder: '000 - AAA'};
    await HaiInput.create('text', field, parameters);
</script>

Instalace a použití - Vue.js

Stáhněte si soubory knihovny z adresáře 'dist' na GitHubu a umístěte do adresáře na svém webu. Posléze stáhněte ještě soubor hai-input-vue.css a umístěte ho do svého kořenového adresáře.

Po stažení knihovny je třeba nejprve importovat funkci defineCustomElement z Vue a taky HaiInputElement ze stažené knihovny. Poté vytvořte konstantu HaiInput a definujte nový vlastní element.


<script type='module'>
    import { defineCustomElement } from 'https://cdn.jsdelivr.net/npm/vue@3.2.19/dist/vue.esm-browser.js';
    import HaiInputElement from '/your-path/hai-input-element.js';

    const HaiInput = defineCustomElement(HaiInputElement);

    customElements.define('hai-input', HaiInput);
</script>

Pak můžete jednoduše začít používat element hai-input místo tradičních inputů.


<hai-input
        label='Code'
        type='url'
        name='code'
        mask='000 - AAA'
        placeholder='000 - AAA'>
</hai-input>