public/MagicoPagebuilder
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add simple ui fetures to test it

Browse Source
This commit is contained in:
Szymon Haczyk
2022-06-24 12:13:50 +02:00
parent 5fd3d9c9ba
commit 57930b1c50
16 changed files with 539 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/DropdownSectionSection.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<div>
<div class="row col-md-12 pagebuilder_section">
<div v-for="(item, index) in $pagebuilder.items" :key="index" class="col-md-2">
<template v-if="!item.type || item.type != 'custom'">
<div class="my-check v2">
<label @click="$emit('input', index)" :for="'pos_' + index">
<div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
<img v-else style="width:100%"
:src="'assets/images/pagebuilder/' + index + '.jpg'" alt="1 kolumna">
<span style="cursor: pointer" class="d-inline-block w-100 text-center mt-1 mb-1">{{
item.label
}}</span>
</label>
</div>
</template>
</div>
</div>
<!-- <div class="col-md-12 text-center">
<h3>DESIGN SYSTEM</h3>
<div>
<div class="row col-md-12 pagebuilder_section">
<div v-for="(item, index) in items" class="col-md-2" v-if="item.type && item.type == 'custom'">
<div class="form-check v2">
<input @input="event => { $emit('input', index) }" type="radio" :id="'pos_' + index"
name="pos">
<label :for="'pos_' + index">
<div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
<img v-else style="width:100%"
:src="'`+ BASE_URL +`' + 'assets/images/pagebuilder/' + index + '.jpg'"
alt="1 kolumna">
<span style="cursor: pointer" class="d-inline-block w-100 text-center mt-1 mb-1">{{
item.label
}}</span>
</label>
</div>
</div>
</div>
</div>
</div> -->
</div>
</template>
<script>
export default {
methods: {},
props:['value'],
data: function () {
return {
items: {}, //{'core_pagebuilder_section_naglowek':'core_pagebuilder_section_naglowek', 'core_pagebuilder_section_tresc':'core_pagebuilder_section_tresc', 'core_pagebuilder_section_widget_jakis':'core_pagebuilder_section_widget_jakis'},
}
},
mounted() {
}
}
</script>
<style>
.my-check input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.my-check label {
cursor: pointer;
}
</style>