# Add a dropzone

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

See 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...

# wwDefaultContent

First step is to add the default content value

wwDefaultContent: {
    textColor: "#BC1010",
    header: [],
},

TIP

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

# 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"/>
    <h1 :style="textStyle">{{ content.title }}</h1>
    <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 can also add some style

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

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 describe the path inside content to access our previous created array, and give a direction so that the drop zone appears in the right way.

TIP

We don't need to update ww-config.json because we do not want an interface inside edit panel to change it.

# Customize the item

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

TIP

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

Here is an example

wwDefaultContent: {
    textColor: "#BC1010",
    cards: [],
},
<div class="my-section">
    <h1 :style="textStyle">My title</h1>
    <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>
    <wwLayout path="cards" direction="row" class="cards">
        <template v-slot="{ item }">
            <wwLayoutItem class="card">
                <wwObject v-bind="item">
            </wwLayoutItem>
        </template>
    </wwLayout>
</div>
.my-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 200px;
    .cards {
        display: flex;
        justify-content: space-around;
    }
    .card {
        border: 1px solid dashed;
        padding: 4px;
        border-radius: 8px;
        min-width: 100px;
    }
    h1 {
         font-size: 32px;
    }
    p {
        margin-top: 12px;
    }
}

# Bind the content

WARNING

Binding is only available for element

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

When you do that, wwLayout will repeat its first element for each data binded to him, and will set a binding context for each item.

Because you do not want to have this property appearing in your edit panel elsewhere than in the data panel, you can use the otherOptions key

{
    "componentPath": "./src/wwSection.vue",
    "editor": {
        "label": {
            "en": "My Section"
        },
        "styleOptions": {
            "textColor": {
                "label": {
                    "en": "Text color"
                },
                "type": "Color"
            }
        },
        "otherOptions": {
            "cards": {
                "label": {
                    "en": "Cards"
                },
                "bindable": "repeatable",
            }
        }
    }
}