Add a responsive content property

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

We will add a titleFontSize property on our section, so that the user can dynamically change the font size of the title. We want this size to depend on the breakpoints.

ww-config.js

The first step is to add the default content value:

properties: {
    // [...]
    titleFontSize: {
        label: {
            en: "Title font size",
        },
        type: "Length",
        options: {
            unitChoices: [{ "value": "px", "label": "px", "min": 1, "max": 100 }]
        },
        responsive: true,
        defaultValue: "16px"
    },
}

Use the value inside the template

export default {
    props: {
        content: { type: "Object", required: true },
    },
    computed: {
        textStyle() {
            return {
                color: this.content.textColor,
                fontSize: this.content.titleFontSize,
            };
        },
    },
};

TIP

Note here that we don't need anything to handle responsive. WeWeb resolves the inheritance of the different breakpoints for you.

We also comment the css style:

.my-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 200px;
    // h1 {
    //     font-size: 32px;
    // }
    p {
        margin-top: 12px;
    }
}

Change the ww-config.json

We will add a property inside ww-config.json to add a fontSize length input in the Style panel.

Test it

Change the breakpoint in the top right of the Editor navbar, and change the values of the different breakpoints.

TIP

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

See Add a element property