Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-21 15:13:50 +00:00
Code Issues Actions Projects Releases Wiki Activity

test modals with vue and modals with bootstrap

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-04-28 20:23:36 +02:00
parent 75becb2294
commit e1dbfdafd7
5 changed files with 181 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<ul class="record_actions">
<slot name="footer"></slot>
<li>
<button class="sc-button grey" @click="$emit('close')">
{{ $t('action.close') }}
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'Modal',
props: ['showModal']
}
</script>

36
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/ModalBootstrap.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<transition name="modal-bootstrap">
<div id="myModal" class="modal"><!-- tabindex="-1" role="dialog" -->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<slot name="header">
<h5 class="modal-title">Modal title</h5>
</slot>
<!--button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button-->
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<!--button type="button" class="sc-button grey" data-dismiss="modal">Close</button>
<button type="button" class="sc-button green">Save changes</button-->
<button class="sc-button grey" @click="$emit('close')">
{{ $t('action.close') }}
</button>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'ModalBootstrap',
props: ['showModal'],
emits: ['close']
}
</script>