Link Search Menu Expand Document

Attributes and CSS

To create rich HTML-interfaces you will want to use a variety of attributes. In fritz2 there are several ways to easily achieve this depending on your use case.

You can set static values for each Tag for class and id by using the optional parameters of its factory function:

render {
    div("some-static-css-class") {
        button(id = "someId")
    }
}

You can set all other attributes inside the Tag’s content by assigning a Flow of the according type to it. The attribute’s value will be updated in the DOM whenever a new value appears on the Flow. Wrap a constant with the const()-function:

val flowOfInts = ... //i.e. get it from some store

render {
    input {
        placeholder = const("some text")
        maxLength = flowOfInts
    }
}

To set a static value for a custom (data-) attribute, use the attr()-function:

render {
    div {
        attr("data-something", "someValue")
    }
}

You can also bind dynamic values (from a Flow) to a custom attribute:

render {
    div {
        someFlowOfString.bindAttr("data-something")
        someFlowOfBoolean.bindAttr("data-visible")        
    }
}

The class of a Tag is a special attribute. As seen above, you can set a static base-class using the parameter of the Tag’s factory-function. This can be used to add meaning to your html elements by using semantic CSS classnames. Also, it keeps your code cleaner when using CSS frameworks like Bootstrap etc.

You can add dynamic classes by assigning a Flow of strings to the className-attribute like with any other attribute. The same works for List<String>s with the classList-attribute.

Additionally, you can build a Map<String, Boolean> from your model data that enables and disables single classes dynamically:

render {
    div {
        classMap = toDoStore.data.map { mapOf(
            "completed" to it.completed, // a boolean-attribute in the data-model
            "editing" to it.editing
        )}
    }
}

Now you can build what you want in your templates, let’s create some Components with it.


Distributed by an MIT license.