Style

Style Structure

style { } has 1 required parameter, the lambda. It changes the style of the root of the ekho that is currently in scope. It has very simple syntax, thanks to keywords. To make the ekho be red and bold, it would be as simple as this:

ekho("some styled text") {
    style {
        red
        bold
    }
}

The style method can also be called inside a component's lambda, and even sub(sub)(sub)(...)components' lambdas.

Formatting

Formatting (bold/italics/etc.) can be changed by simply passing in formatting keywords.

Example:

ekho {
    "bold text"() {
        style { bold }
    }
    "Minecraft green text" {
        style { italics }
    }
}

Color

The style method accepts the color keywords listed in Keywords, as well as custom colors by using the color { } method. The lambda parameter of color { } must return an Int, and for proper conversion to color, it should be in hexadecimal.

Example:

ekho {
    style {
        color { 0x00FF00 }
    }
    "Bright green text"()
    "Minecraft green text" {
        style { green }
    }
}

Events

Click events and hover events have their own builders that can be used within the style { } method. For more information about both of them, check out Hover/Click Events

Inheritance

Style, by default, is inherited by components. However, when invoking a component, passing in false will make it not inherit any styles, and that only affects the one component that has false passed in to it.

Example of cancelling style inheritance:

ekho {
    style {
        yellow
        italics
    }
    "yellow, italicized text"()
    "no style inherited text"(false)
    "back to original yellow/italics text"()
}

Inherited styles can be overridden, property by property. If the component inherits the color red and the format italics, but only the color is wanted to remain, using the noItalics keyword in the component's style will override the root's italic style, without affecting the other inherited styles.

Example of inheriting some, but overriding other styles:

ekho {
    style {
        green
        bold
        underline
    }
    "green, bold, and underlined text"()
    "green, underlined, and not bold text" {  // The green color style is inherited
        style {                               // along with the bold and underline 
            noBold                            // formats. To remove just the bold, 
        }                                     // noBold is used.
    }
}

The style Method

Below is the code for the method found in Ekho.kt

fun style(method: StyleBuilder.() -> Unit) {
    root.style = StyleBuilder(root.style.let { if (inherit) { it } else { Style.EMPTY } }).apply(method).create()
}