Lucid.Alpine

Documentation

xData_ :: Text -> Attribute

x-data Declare a new Alpine component and its data for a block of HTML

xBind_

Arguments

:: Text

Attribute name

-> Text

-> Attribute

x-bind Dynamically set HTML attributes on an element

xHtml_ :: Text -> Attribute

x-html Set the inner HTML of an element

xCloak_ :: Attribute

x-cloak Hide a block of HTML until after Alpine is finished initializing its contents

xEffect_ :: Text -> Attribute

x-effect Execute a script each time one of its dependancies change

xFor_ :: Text -> Attribute

x-for Repeat a block of HTML based on a data set

xForKey_ :: Text -> Attribute

xIf_ :: Text -> Attribute

x-if Conditionally add/remove a block of HTML from the page entirely.

xIgnore_ :: Attribute

x-ignore Prevent a block of HTML from being initialized by Alpine

xInit_ :: Text -> Attribute

x-init Run code when an element is initialized by Alpine

xModel_

Arguments

:: [Text]

List of x-model modifiers

-> Text

-> Attribute

x-model Synchronize a piece of data with an input element

xOn_

Arguments

:: Text

Event name

-> Text

-> Attribute

x-on Listen for browser events on an element

xRef_ :: Text -> Attribute

x-ref Reference elements directly by their specified keys using the $refs magic property

xShow_ :: Text -> Attribute

x-show Toggle the visibility of an element

xText_ :: Text -> Attribute

x-text Set the text content of an element

xTransition_

Arguments

:: Maybe Text

Transition directive

-> [Text]

List of x-transition modifiers

-> Text

-> Attribute

x-transition Transition an element in and out using CSS transitions

useAlpine :: Monad m => HtmlT m ()

Use this value in your head_ tag to use Alpine.js in your lucid templates

useAlpineVersion :: Monad m => (Int, Int, Int) -> HtmlT m ()

Choose the version of Alpine.js to use using a 3-tuple representing semantic versioning