Visibility

Show Hide Toggle

Some Content <button onclick="swd.query('#toggable').show()">Show</button>
<button onclick="swd.query('#toggable').hide()">Hide</button>
<button onclick="swd.query('#toggable').toggle()">Toggle</button>

<swd-card id="toggable">Some Content</swd-card>

Object Read and Write (Databinding)

Two-Way Databinding

Hello World <input id="example-input" type="text" name="name" value="Hello World" oninput="swd.query('#example-text').writeObject(swd.query('#example-input').readObject())">
<span id="example-text" name="name">Hello World</span> <input id="example-input-1" type="text" name="text" value="Hello World" oninput="swd.query('#example-input-2').writeObject(swd.query('#example-input-1').readObject())">
<input id="example-input-2" name-placeholder="text" placeholder="Hello World">

Read And Write

Name Street City Note

John Doe

Somestreet 5

New York

Some Note

<button onclick="readAndWrite()">Read And Write</button>

<swd-card id="object-1">
    <swd-input>
        <label for="example-input-1">Name</label>
        <input id="example-input-1" type="text" name="name" value="Some Person">
    </swd-input>
    <swd-input>
        <label for="example-input-2">Street</label>
        <input id="example-input-2" type="text" name="address.street" value="Designstreet 17">
    </swd-input>
    <swd-input>
        <label for="example-input-3">City</label>
        <input id="example-input-3" type="text" name="address.city" value="Los Angeles">
    </swd-input>
    <swd-input>
        <label for="example-input-4">Note</label>
        <input id="example-input-4" type="text" name="note[0]" value="It is a text">
    </swd-input>
</swd-card>

<swd-card id="object-2">
    <h3 name="name">John Doe</h3>
    <div class="margin-bottom">
        <div name="address.street">Somestreet 5</div>
        <div name="address.city">New York</div>
    </div>
    <p name="note[0]">Some Note</p>
</swd-card>

<swd-card id="object-3"></swd-card>

<script>
    function readAndWrite() {
        const object = swd.query('#object-1').readObject();
        swd.query('#object-2').writeObject(object);
        swd.query('#object-3').innerHTML = JSON.stringify(object, undefined, '    ').replace(/\n/g, '<br>');
    }
</script>

One-Way Databinding With Functions

HELLO WORLD <input id="example-input" type="text" name="name" value="Hello World" oninput="swd.query('#example-text').writeObject(swd.query('#example-input').readObject())">
<span id="example-text" bind="(text || '').toUpperCase()">HELLO WORLD</span>

One-Way Databinding with Arrays

<swd-for swd-for="entry of array" id="example-5">
    <swd-chip name="entry"></swd-chip>
</swd-for>

<script>
    swd.query('#example-5').writeObject({ array: ['Test1', 'Test2', 'Test3', 'Test4']})
</script>

Localization

English Deutsch Español

...

<script>
    swd.configureLanguages({
            languages: [
                { locale: 'en', src: 'i18n/en.properties' },
                { locale: 'de', src: 'i18n/de.properties' },
                { locale: 'es', src: 'i18n/es.properties' }
        ],
        fallback: 'en'
    })
    swd.setLanguage(navigator.language); //Load browser language or use fallback
</script>
<div class="grid-cols-md-3 grid-cols-sm-2 grid-cols-1 margin-bottom">
    <button onclick="swd.setLanguage('en')">English</button>
    <button onclick="swd.setLanguage('de')">Deutsch</button>
    <button onclick="swd.setLanguage('es')">Español</button>
</div>
<div class="grid-cols-sm-2 grid-cols-1">
    <div><span i18n="greeting.hello"></span> ... <span i18n="greeting.bye"></span></div>
    <input i18n-placeholder="placeholder">
</div> en.properties greeting.hello = Hello
greeting.bye = Bye
placeholder = Placeholder de.properties greeting.hello = Hallo
greeting.bye = Auf Wiedersehen
placeholder = Platzhalter es.properties greeting.hello = Hola
greeting.bye = Adios
placeholder = Marcador de posición