Components in Davinc HTML

components

Conditionally Displayed Components

You can create HTML that will be displayed only if global state takes a given value. The following HTML displays two divs, neither will be displayed by default. If the value of teh "data" dataset (accessible by calling $val("data")) is equal to the specified item (toString() is called on the datavalue and then compared) the corresponding div will be displayed.
        
<div data-if="data=item1"></div>
<div data-if="data=item2"></div>
        
    

Toggle Buttons

The davinci HTML component provides a simple way to create a set of toggle buttons. To do so, add a data-group attribute to each button in the toggle group, with the same group name. The data-selected attribute specifies the CSS class to apply to the most recently clicked button. The data-value attribute will push the specified value into the global data cache when the button is pushed.
        
<style>
    .selected{
        color:black;
        background-color: white;
    }
</style>
<button class="btn-default btn-davinci" data-group="group1" data-selected="selected" data-name="btn" data-value="value1">push1</button>
<button class="btn-default btn-davinci" data-group="group1" data-selected="selected" data-name="btn" data-value="value2">push2</button>