Extended conditionals

Example Index

• Select one option in a select list
• Preselect options in select list
• Preselected toggle buttons & adding classes

Select one option in select list

HTML:

    <select>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="tre">Three</option>
    </select>

TSS:

option[value=data(option)]:attr(selected) {
    content: "selected";
}

PHP data:

$data["option"] = "two";

$template = new Transphporm\Builder($xml, $tss);
$output = $template->output($data)->body;

Output:

    <select>
        <option value="one">One</option>
        <option value="two" selected>Two</option>
        <option value="tre">Three</option>
    </select>

Preselected options in select list

With the following HTML:

<select name="email">
    <option value="Y" selected="">Yes</option>
    <option value="N" selected="">No</option>
</select>

Note that each <option> contains a selected attribute, which we remove via the TSS except on the active option.

Use the following TSS:

option[value="Y"]:data(email="N"):attr(selected) {
    display: none;
}

option[value="N"]:data(email="Y"):attr(selected) {
    display: none;
}

Preselected active toggle buttons in Bootstrap CSS

With the following HTML:

<div class="btn-group" data-toggle="buttons">
  <label id="label1" class="btn btn-primary">
    <input id="opt1" type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label id="label2" class="btn btn-primary">
    <input id="opt2" type="checkbox" autocomplete="off" checked> Checkbox 2
  </label>
</div>

Similar to above, we include a checked attribute on each button, and then remove it from all but the active buttons. But we also need to add a .active class to the label element for the active buttons. The TSS below illustrates both, and the class-adding technique is one which can be used anywhere a class needs to be added conditionally based on data passed to Transphporm.

#opt1:data(option!="1"):attr(checked) {
   display: none;
}

#opt2:data(option="2"):attr(checked) {
    display: none;
}

#label1:data(option="1"):attr(class):after {
    content: " active";
}

#label2:data(option="2"):attr(class):after {
    content: " active";
}