Skip to content
Snippets Groups Projects
Select Git revision
  • 8.x-2.0-alpha13
  • 3.x default
  • 8.x-2.x
  • 8.x-1.x
  • 3.1.0
  • 3.0.2
  • 3.0.1
  • 8.x-2.6
  • 3.0.0
  • 3.0.0-beta5
  • 3.0.0-beta4
  • 3.0.0-beta3
  • 3.0.0-beta1
  • 3.0.0-beta2
  • 3.0.0-alpha2
  • 3.0.0-alpha1
  • 8.x-2.5
  • 8.x-2.4
  • 8.x-2.3
  • 8.x-2.2
  • 8.x-2.1
  • 8.x-2.0
  • 8.x-2.0-beta6
  • 8.x-2.0-beta5
24 results

custom_elements

  • Clone with SSH
  • Clone with HTTPS
  • Custom elements

    Custom elements modules allows to render content entities as custom elements.

    Overview

    Renders entities into custom elements markup that can be picked up for client-side rendering. It renders the data of all visible fields either as attribute to the custom element tag, or as nested tag with a slot attribute.

    Custom element attributes may be picked up as property during client-side rendering.

    Slots are a useful way for content distribution in [Vue.js - thus the rendered slots can be used directly by the Vue.js slot implementation. But the concept can be used with out client-side libraries as well, e.g. see https://github.com/dschnare/react-slot for a React based solution.

    How it works

    The module takes over render for all view-modes that are prefixed with custom_elements - thus to render content entity as custom elements you just need to introduce custom view mode with custom_elements prefix. Every entity render with such a view mode is then automatically processed.

    In order to make client-side rendering possible, the necessary client libraries may be added to the custom_elements/main library, which the module is attaching to custom element markup.

    Example

    Example of rendered paragraph entity of bundle text containing four fields:

    field_list_integer integer list field type (simple/scalar field)

    field_float float field type (simple/scalar field)

    field_link link field type (complex field)

    field_text formatted text field type (complex field)

    Output:

    <pg-text type="text" data-field_list_integer="value-1" data-field_float="1.123">
        <section name="field_link">
            <div class="field field--name-field-link field--type-link field--label-above">
                <div class="field__label">link</div>
                <div class="field__item"><a href="http://google.sk">link text</a></div>
            </div>
        </section>
        <section name="field_text">
            <div class="clearfix text-formatted field field--name-field-text field--type-text-long field--label-above">
                <div class="field__label">Text</div>
                <div class="field__item"><p>test text</p></div>
            </div>
        </section>
    </pg-text>

    Field types considered as simple/scalar

    The following list contains field types which are considered simple (or scalar) and are processed as data attributes:

    General fields:

    Boolean - boolean
    Date - datetime
    Email - email
    Timestamp - timestamp

    Text fields:

    Text (plain) - string
    List (text) - list_string
    Text (plain, long) - string_long

    Numeric fields:

    Number (float) - float
    List (integer) - list_integer
    List (float) - list_float
    Number (decimal) - decimal
    Number (integer) - integer

    Other field types as considered as complex fields and are rendered within <section> tag.

    Credits