Home

Accessing and setting values

All input components have a .setValue and .getValue function:

<st-input id="myInput" label="Input"></st-input>

let v = "myValue";
//set value
document.querySelector("#myInput").setValue(v);
//read value
document.querySelector("#myInput").getValue();

Additionally you can also use the value attribute:

<st-input value="myValue" id="myInput" label="Input" ></st-input>

Events

You can listen for events using the .event function which just calls the standard addEventListener function. For example:

<st-input value="myValue" id="myInput" label="Input" ></st-input>

document.querySelector("#myInput").event("keyup", (e)=>{
    console.log(e.code)
})

Styling

There's 3 ways you can style your components

extraStyles attribute

<st-checkbox label="Checkbox" extraStyles="
        .input-label {
            color:red;
        }
    ">
</st-checkbox>

customStyle attribute

<st-checkbox label="Checkbox" customStyle="link/to/your/css/file.css"></st-checkbox>

Global __$STAK variable

Create a global javascript variable named __$STAK with the following structure:

__$STAK = {
   styles : {
      checkbox: `
            .input-label {
                color:red;
            }
        `
   }

}

This will apply globally for all labels of all <st-checkbox> components. This variable is read for all components as long as you follow this structure:

__$STAK = {
   styles : {
      input: "<css here>", //for st-input,
      checkbox: "<css here>", //for st-checkbox
      accordion:"<css here>", //for st-accordion
      accordionTab:"<css here>", //for st-accordion-tab
      combo:"<css here>", //for st-combo
      datepicker:"<css here>", //for st-datepicker,
      textarea:"<css here>", //for st-textarea,
      timepicker:"<css here>", //for st-timepicker
      tabs:"<css here>", //for st-tabs
      tab:"<css here>", //for st-tab
      grouplist:"<css here>" //for st-grouplist
   }

}