Add a dropzone

In WeWeb you can easily create a dropzone, an area where the user will be able to drop in any element. It's useful to build very flexible components.

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

We will add a header dropzone instead of our title. The user will be able to drop containers, icons, etc...

ww-config.js

The first step is to declare a new property which will hold the references to all the elements dropped.

We declare this property on the properties field of the configuration:

properties: {
    // [...]
    header: {
      hidden: true,
      defaultValue: []
    },
}

TIP

A dropzone needs an array of elements, this is why we initialize it with an empty array.

TIP

We use hidden: true because there is no way to edit this list on the side panel.

Use the value inside the template

We will use a special component: wwLayout.

Full documentation for wwLayout possibilities here

<div class="my-section">
    <wwLayout path="header" direction="column" class="header"/>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
        ea commodo consequat.
    </p>
</div>

We also need to add some style

.my-section {
    // [...]
    .header {
        min-height: 20px;
        display: flex;
        flex-direction: column;
    }
}

WARNING

Be sure to give your wwLayout a minimal width and height or the user will not be able to drop elements inside.

This is the simpliest way to use wwLayout.

We just need to provide the path property which is the path inside the content to access our previously created array.

We also give a direction so that the drop zone appears in the right way.

Customize the item

wwLayout by default just repeats the elements. But it also has a scoped slot you can customize to add extra style or property. This is useful to create a card for example or for the editing experience.

TIP

ww-container for example heavily uses this pattern to add handles for defining the grid.

Here is an example:

// ww-config.js
properties: {
    // [...]
    cards: {
      hidden: true,
      defaultValue: []
    },
}

<div class="my-section">
    <wwLayout path="cards" direction="row" class="cards">
        <template v-slot="{ item }">
            <wwLayoutItem class="card">
                <wwObject v-bind="item">
            </wwLayoutItem>
        </template>
    </wwLayout>
</div>

.my-section {
    .cards {
        display: flex;
        justify-content: space-around;
    }
    .card {
        border: 1px solid dashed;
        padding: 4px;
        border-radius: 8px;
        min-width: 100px;
    }
}

You can see more options of wwLayout here

Bind the content

If you want, you can mark your content property linked to your dropzone as bindable, with a special binding: repeatable

When you do that, wwLayout will repeat its first child element for each item in the collection list bound to it, and it will set a binding context for each item.

// ww-config.js
properties: {
    // [...]
    cards: {
      hidden: true,
      bindable: 'repeatable',
      defaultValue: []
    },
}

You can learn more about binding here