This is an automated email from the git hooks/post-receive script. New commit to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit 0a0af365460f551bb5ced61e0b239c3887515dd7 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:21:06 2020 +0200 Création de composants pour l'affichage en onglets --- web/src/components/common/TabContent.vue | 63 ++++++++++++++++++++++++++++++++ web/src/components/common/Tabs.vue | 60 ++++++++++++++++++++++++++++++ 2 files changed, 123 insertions(+) diff --git a/web/src/components/common/TabContent.vue b/web/src/components/common/TabContent.vue new file mode 100644 index 0000000..9eb9ea1 --- /dev/null +++ b/web/src/components/common/TabContent.vue @@ -0,0 +1,63 @@ +<template> + <div v-if="id == current" class="tab bow-form"> + <h2>{{name}}</h2> + <slot></slot> + </div> +</template> + +<script> +import { Component, Prop, Vue } from 'vue-property-decorator' + +@Component({ + name: 'TabContent', + props: ['id', 'name', 'current'], + components: {} +}) +class TabContent extends Vue { + @Prop id + @Prop name + @Prop current + + created() { + this.$emit('createTab', this.id, this.name) + } +} + +export default TabContent +</script> + +<style lang="less" scoped> +@import '../../assets/less/globals'; + +.bow-form { + display: flex; + flex-direction: column; + width: min-content; + min-width: 90vw; + margin: var(--margin--small) auto; +} + +h2 { + margin-bottom: var(--margin--medium); + + text-align: center; +} +h3 { + margin-bottom: var(--margin--small); + margin-top: var(--margin--medium); + + text-align: center; +} + +@media screen and (min-width: @screen-desktop-low) { + .bow-form { + min-width: 450px; + } +} + +@media screen and (min-width: @screen-desktop-large) { + .bow-form { + min-width: 600px; + } +} +</style> diff --git a/web/src/components/common/Tabs.vue b/web/src/components/common/Tabs.vue new file mode 100644 index 0000000..0e9bf92 --- /dev/null +++ b/web/src/components/common/Tabs.vue @@ -0,0 +1,60 @@ +<template> + <ul class="tabs"> + <li + v-for="tab in tabs" + :key="tab.name" + :class="{'active' : tab.id === current}" + @click="displayTab(tab.id)"> + {{tab.name}} + </li> + </ul> +</template> + +<script> +import { Component, Prop, Vue } from 'vue-property-decorator' + +@Component({ + name: 'Tabs', + props: ['tabs', 'current'], + components: {} +}) +class Tabs extends Vue { + @Prop tabs + @Prop current + + displayTab(tabId) { + this.$emit('changeDisplayedTab', tabId) + } +} + +export default Tabs +</script> + +<style lang="less" scoped> +.tabs { + display: flex; + justify-content: center; + list-style: none; + + margin-bottom: var(--margin--large); + padding-top: var(--margin--medium); + padding-bottom: 6px; + + border-bottom: 1px solid #eee; + + li { + margin: 0 20px; + padding-bottom: 5px; + margin-bottom: -8px; + cursor: pointer; + font-size: 18px; + line-height: 21px; + text-decoration: none; + + &.active { + color: var(--color-main); + border-bottom: 3px solid var(--color-main); + } + } +} +</style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.