# Add a responsive content property

See 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 depends on the breakpoints

# wwDefaultContent

First step is to add the default content value

wwDefaultContent: {
    textColor: "#BC1010",
    titleFontSize: wwLib.responsive("32px"),
},

TIP

Note that here titleFontSize need to be wrap with wwLib.responsive

# Use the value inside the template

export default {
    name: "__COMPONENT_NAME__",
    wwDefaultContent: {
        textColor: "#BC1010",
        titleFontSize: wwLib.responsive("32px"),
    },
    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.io resolve 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 on the Style pannel

{
    "componentPath": "./src/wwSection.vue",
    "editor": {
        "label": {
            "en": "My Section"
        },
        "styleOptions": {
            "textColor": {
                "label": {
                    "en": "Text color"
                },
                "type": "Color"
            },
            "titleFontSize": {
                "label": {
                    "en": "Title font size"
                },
                "type": "Length",
                "options": {
                    "unitChoices": [{ "value": "px", "label": "px", "min": 1, "max": 100 }]
                }
            }
        }
    }
}

WARNING

You need to restart your dev server so that the config is load correctly

# Test it

Change the breakpoint on right-top of the editor navbar, and change the value for the different breakpoints