Search code examples
phalconvolt

Dynamic css classes (angular like) in phalcon volt

Is there a way to selectively apply a class in volt (the Phalcon template engine) based on variables?

I have come to working in volt from js libraries like Angular and Vue, which have structure like:

ng-class="{'active':thing >= 1}"

Where a class is applied based on the statement being true. In Volt I could use if blocks to selectively render html but was wondering if there is a similar syntax?

Solution

  • Is this what you are looking for?

    <a class="button {% if something == 12 %}active{% endif %}">Link</a>

    Or you can use ternary operators:

    <a class="button {{ something == 12 ? 'active' : 'disabled' }}">Link</a>