Component Properties
Component properties are key-value pairs accessible within the local scope of a component template. They enable customization and dynamic rendering of components. The default properties object is named props
, but this can be changed as needed.
Creating a Button Component
Here is an example of defining a button
component:
<component Button props>
<button class="btn" type="{{ props.type }}">
<Render content />
</button>
</component>
Using the Button Component
To use the button
component in another template, such as form.html
, you can import and render it as follows:
{% import {Button} from '/components/button'; %}
<X:Button type="button">My Button</X:Button>
Output:
<button class="btn" type="button">My Button</button>
Changing the Properties Identifier
The default properties identifier is props
, but you can use any valid identifier by specifying it in the component definition.
Example:
<component default Button myProps>
<button>{{{ myProps.content }}}</button>
</component>
Built-in Component Attributes
Components include several predefined attributes that provide flexibility and ease of use:
Name | Type | Description |
---|---|---|
content | string | Represents the inner content of the component |
attributes | object | Contains processed attributes of the component |
stringAttributes | string | Contains attribute strings of the component |
1. Content
The content
property is a shorthand for props.content
, representing the inner content of the component.
Example:
Creating the component:
<component default Button props>
<button class="btn" type="{{ props.type }}">
<Render content />
</button>
</component>
Using the component:
{% import '/components/button'; %}
<X:Button type="button">Click Me!</X:Button>
Output:
<button class="btn" type="button">Click Me!</button>
2. Attributes
The attributes
property contains processed attributes for the component, useful for passing dynamic values.
Example:
Creating the component:
<component default Button props>
<button class="btn" type="{{ attributes.type }}">
<Render content />
</button>
</component>
Using the component:
{% import Button from '/components/button'; %}
<X:Button type="button">Submit</X:Button>
Output:
<button class="btn" type="button">Submit</button>
3. Raw Attributes
The stringAttributes
property provides raw strings for directly applying attributes to the component.
Example:
Creating the component:
<component default Button props>
<button class="btn" {{{ props.stringAttributes }}}>
<Render content />
</button>
</component>
Using the component:
{% import Button from '/components/button'; %}
<x:Button id="uniqueButton" type="submit">Send</x:Button>
Output:
<button class="btn" id="uniqueButton" type="submit">Send</button>
When your attribute contains template code, use the Render
tag to ensure proper content rendering.
Passing Dynamic Values
To pass dynamic variables as attribute values, use a colon (:
) or at symbol (@
) before the attribute name:
import Button from "/components/button"
{% const addNumber = 1+1 %}
<X:Button :value="addNumber" type="submit">Send</X:Button>
You can also use valid expressions:
import Button from "/components/button"
<X:Button :value="1+1" type="submit">Send</X:Button>
<X:Button :value="condition ? true : false" type="submit">Send</X:Button>
<X:Button :value="validMethodName()" type="submit">Send</X:Button>
Additionally, you can use globally declared variables within your template, typically passed through the context or plugins or native javascript code:
import Button from "/components/button"
<X:Button @value="appName" type="submit">Send</X:Button>
Summary
Component properties in Alapa enable:
- Flexible customization using
props
and its variations. - Dynamic rendering with
content
,attributes
, andrawAttributes
. - Simplified component reuse and integration across templates.
Experiment with these attributes to unlock the full potential of your component design.