high_mountains - v1.0.0

high_mountains

Values

bind

</> 
pub fn bind(
  attribute attr: String,
  js js: String,
) -> @internal Attribute(a)

x-bind allows you to set HTML attributes on elements based on the result of JavaScript expressions.

cloak

</> 
pub fn cloak() -> @internal Attribute(a)

Sometimes, when you’re using AlpineJS for a part of your template, there is a “blip” where you might see your uninitialized template after the page loads, but before Alpine loads.

x-cloak addresses this scenario by hiding the element it’s attached to until Alpine is fully loaded on the page.

For x-cloak to work however, you must add the following CSS to the page.

[x-cloak] { display: none !important; }

data

</> 
pub fn data(js_object: String) -> @internal Attribute(a)

Everything in Alpine starts with the x-data directive.

x-data defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference.

effect

</> 
pub fn effect(js: String) -> @internal Attribute(a)

x-effect is a useful directive for re-evaluating an expression when one of its dependencies change. You can think of it as a watcher where you don’t have to specify what property to watch, it will watch all properties used within it.

for

</> 
pub fn for(key: String, value: String) -> @internal Attribute(a)

x-for directive allows you to create DOM elements by iterating through a list

html

</> 
pub fn html(js: String) -> @internal Attribute(a)

x-html sets the “innerHTML” property of an element to the result of a given expression

id

</> 
pub fn id(js: String) -> @internal Attribute(a)

x-id allows you to declare a new “scope” for any new IDs generated using $id(). It accepts an array of strings (ID names) and adds a suffix to each $id(‘…’) generated within it that is unique to other IDs on the page.

x-id is meant to be used in conjunction with the $id(…) magic.

ignore

</> 
pub fn ignore() -> @internal Attribute(a)

By default, Alpine will crawl and initialize the entire DOM tree of an element containing x-init or x-data.

If for some reason, you don’t want Alpine to touch a specific section of your HTML, you can prevent it from doing so using x-ignore.

init

</> 
pub fn init(js: String) -> @internal Attribute(a)

The x-init directive allows you to hook into the initialization phase of any element in Alpine.

key

</> 
pub fn key(js: String) -> @internal Attribute(a)

It is important to specify unique keys for each x-for iteration if you are going to be re-ordering items. Without dynamic keys, Alpine may have a hard time keeping track of what re-orders and will cause odd side-effects.

model

</> 
pub fn model(
  modifiers: List(model_modifier.ModelModifier),
  js: String,
) -> @internal Attribute(a)

x-model allows you to bind the value of an input element to Alpine data.

x-model is two-way bound, meaning it both “sets” and “gets”. In addition to changing data, if the data itself changes, the element will reflect the change.

x-model works with the following input elements:

  • input type=“text”
  • textarea
  • input type=“checkbox”
  • input type=“radio”
  • select
  • input type=“range”

modelable

</> 
pub fn modelable(js: String) -> @internal Attribute(a)

x-modelable allows you to expose any Alpine property as the target of the x-model directive.

on

</> 
pub fn on(
  event: String,
  modifiers: List(event_modifier.EventModifier),
  js: String,
) -> @internal Attribute(a)

x-on allows you to easily run code on dispatched DOM events.

ref

</> 
pub fn ref(id: String) -> @internal Attribute(a)

x-ref allows you to reference an element in your Alpine component by a unique name.

show

</> 
pub fn show(js: String) -> @internal Attribute(a)

x-show is one of the most useful and powerful directives in Alpine. It provides an expressive way to show and hide DOM elements.

If the “default” state of an x-show on page load is “false”, you may want to use x-cloak on the page to avoid “page flicker” (The effect that happens when the browser renders your content before Alpine is finished initializing and hiding it.) You can learn more about x-cloak in its documentation.

show_important

</> 
pub fn show_important(js: String) -> @internal Attribute(a)

Sometimes you need to apply a little more force to actually hide an element. In cases where a CSS selector applies the display property with the !important flag, it will take precedence over the inline style set by Alpine.

teleport

</> 
pub fn teleport(css_selector: String) -> @internal Attribute(a)

The x-teleport directive allows you to transport part of your Alpine template to another part of the DOM on the page entirely.

This is useful for things like modals (especially nesting them), where it’s helpful to break out of the z-index of the current Alpine component.

By attaching x-teleport to a