Link Search Menu Expand Document

Attributes

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

You can set all html-attributes inside the Tag’s content by calling a function of the according name. Every standard html attribute has two functions. One sets a static value every time the element is re-rendered, the second collects dynamic data coming from a Flow. When coming from a Flow, the attribute’s value will be updated in the DOM whenever a new value appears on the Flow without having to re-render the whole element:

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

render {
    input {
        placeholder("some text")
        maxLength(flowOfInts)
        disabled(true)
    }
}

If you want to set a Boolean value, you can set an optional parameter trueValue which will be set as the attribute-value if your data is true:

val isLow = myStore.data.map { i -> i <= 0 }

render {
    button {
        +"My button"
        attr("data-low", isLow, trueValue = "true")
        // isLow == true  -> <button data-low="true">My button</button>
        // isLow == false -> <button>My button</button>
    }
}

This is sometimes needed for CSS-selection or animations.

To set a value for a custom (data-) attribute, use the attr()-function. It works for static and dynamic (from a Flow) values:

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

Working with CSS-Classes

The class attribute of a Tag for working with CSS style-classes is somewhat special. You can set the static values of each Tag for class and id by using the optional parameters of its factory function:

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

Use this one-liner to add styling and meaning to your elements by using semantic CSS class-names. Also, it keeps your code clean when using CSS frameworks like Bootstrap etc.

To dynamically change the styling of a rendered element, 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
        )})
    }
}

fritz2 also offers a function for setting the inline style attribute to your elements:

render {
    p {
        inlineStyle("color: red")
        +"this is red text"
    }
}

However, we do not recommend using inline styling - fritz2 offers integrated styling-functions for dealing with CSS directly in your Kotlin code, as well as a DSL for working with a themed responsive style system. Have a look at Styling for more information.

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


Distributed by a MIT license.