(Quick Reference)

ui:cssClass

Purpose

Retrieves a symbolic CSS class name from UI Set configuration, or falls back to a default.

UI Sets, themes and applications can define the CSS class to be used for certain UI elements. The UI templates should use these classes so that themes and applications can override this if necessary, without having to rework all the UI templates.

Used by UI tags to supply the appropriate class. Can also be used to extend configurability of UI templates to promote UI template reuse across different UI Sets.

Plugins and the application can override these symbolic CSS class mappings on a per-UI Set basis in configuration using the key platformUi namespace (plugin.platformUi if specifying in Config.groovy):

def doWithConfig = { config ->
    platformUi {
        // Define the symbolic CSS class mappings for Bootstrap UI Set
        ui.Bootstrap.actions.cssClass = 'form-actions'
        ui.Bootstrap.button.cssClass = 'btn'
        ui.Bootstrap.tab.cssClass = 'tab-pane'
        ui.Bootstrap.tabs.cssClass = 'nav nav-tabs'
        ui.Bootstrap.field.cssClass = 'input'
        ui.Bootstrap.invalid.cssClass = 'invalid'
        ui.Bootstrap.table.cssClass = 'table table-striped'
        ui.Bootstrap.tr.cssClass = ''
        ui.Bootstrap.trOdd.cssClass = ''
        ui.Bootstrap.trEven.cssClass = ''
        ui.Bootstrap.carousel.cssClass = 'carousel'
        ui.Bootstrap.slide.cssClass = 'item'
        ui.Bootstrap.form.cssClass = 'form-horizontal'
    }
}

Example

<table class="${ui.cssClass(name:'table')}">
...
</table>

Normally you will not need to use this tag, as the UI tags resolve the CSS class for the UI template automatically and pass it as a model variable.

Attributes

NameRequired?Description
nameYesThe symbolic name of the CSS class. For example the ui:table tag passes "table". All UI tags pass their name as the symbolic name.
defaultNoDefault value to use if no mapping is supplied via Config. If none supplied, defaults to blank.