Dynamic/Custom attributes of tags in kotlinx.html Builders

JavaScript
1

When using toolkits like SemanticUI ( https://semantic-ui.com ) they introduce custom attributes in otherwise seemingly HTML tags. eg data-tab in case of tab panel (expand the very first example at Tab | Semantic UI )

<div class="ui top attached tabular menu">
  <a class="active item" data-tab="first">First</a>
  <a class="item" data-tab="second">Second</a>
  <a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">
  First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
  Second
</div>
<div class="ui bottom attached tab segment" data-tab="third">
  Third
</div>

or data-value in case of a drop down (expand example titled Selection at Dropdown | Semantic UI )

<div class="ui selection dropdown">
  <input name="gender" type="hidden">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">
    <div class="item" data-value="1">Male</div>
    <div class="item" data-value="0">Female</div>
  </div>
</div>

Is there a way to reuse the kotlinx.html DSL builders but pass in the custom attribute name value pairs? If not what would be a good compact way to extend the DSL elements in kotlinx.html?

2

I have personally not tried this, but as far as I understand each Html tag has a property called attributes which is a mutable map. You should be able to add any attribute you want to it. For attributes you use often I suggest you override the div function to create a div tag with the attributes set ( adjust for whichever tag you nee)

fun <T, C : TagConsumer<T>> C.div(classes : String? = null, yourAttribute: String?, block : DIV.() -> Unit = {}){
    this.div(classes) {
        attributes.put("yourAttribute", yourAttribute)
        this.block()
    }
}
1 Like
3

Thank you very much … that solved it. eg.

a("active item") {
    attrs["data-tab"] ="first"
    +"First"
}
2 Likes