ui:ref
Generates a reference to a part of a component.
This is used to mark parts of a component for JavaScript interaction or styling. It generates data attributes that can be used to identify the part within the component's scope.
Example
<div {ui:ref(name: 'button')}">Click me</div>
This will generate:
<div data-scope="my-component" data-part="button" data-hydrate-my-component="«uniqueRootId»">Click me</div>
You can also pass additional data attributes:
<div {ui:ref(name: 'button', data: { action: 'submit', id: '123' })}">Click me</div>
This will generate:
<div data-scope="my-component" data-part="button" data-hydrate-my-component="«uniqueRootId»" data-action="submit" data-id="123">Click me</div>
Arguments
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
name |
string | Name of the ref | Yes | null |
asArray |
boolean | If true, the ref will be rendered as an array instead of a string of data-attributes | No | false |
data |
array | No | 'Additional data attributes to include in the ref. Associative array with key-value pairs. Each key is prefixed with "data-".', false, [] |