Add translated content property

See the Development process to load a base section in dev mod.

We will add a title property on our section, so that the user can dynamically change the title of the section.

We want this title to change depending on the language of the website.

ww-config.js

The first step is to declare this property on the properties field of the configuration:

properties: {
    // [...]
    title: {
      label: {
        en: "Title",
      },
      type: "Text",
      defaultValue: "My title",
      multiLang: true,
    },
}

Use the value inside the template

<div class="my-element">
    <h1>{{ wwLib.wwLang.getText(content.title) }}</h1>
    <p :style="textStyle">I am a custom element!</p>
  </div>

TIP

Note here that we need to use wwLib.wwLang

TIP

In this use case, it might be better to use a WeWeb text so users can edit the text style.

See Add a element property