Add Alpine.js directives to any HTML tag

A generic modifier that appends Alpine.js attributes to an existing htmltools::tags object. Works with any HTML element.

Usage

x_set(tag, data = NULL, text = NULL, show = NULL, on = NULL, bind = NULL)

Arguments

tag

An htmltools::tags object to modify.

data

JS object string for x-data.

text

JS expression for x-text.

show

JS expression for x-show.

on

Named list of event handlers, mapped to x-on:<event> attributes. For example, on = list(click = "count++") produces x-on:click="count++". Modifiers are supported: on = list("click.prevent" = "submit()").

bind

Named list of attribute bindings, mapped to x-bind:<attr>. For example, bind = list(class = "{ active: open }") produces x-bind:class="{ active: open }".

Value

The input tag with Alpine.js attributes appended.

Examples

tags$div() |> x_set(data = "{ open: false }")
#> <div x-data="{ open: false }"></div>
tags$span() |> x_set(text = "message")
#> <span x-text="message"></span>
tags$button() |> x_set(on = list(click = "count++"))
#> <button x-on:click="count++"></button>
tags$div() |> x_set(bind = list(class = "{ active: open }"))
#> <div x-bind:class="{ active: open }"></div>