Skip to content

Instantly share code, notes, and snippets.

@maxmonax
Last active August 9, 2023 13:10
Show Gist options
  • Save maxmonax/d80098eb3b304357cc76242cc2c4c630 to your computer and use it in GitHub Desktop.
Save maxmonax/d80098eb3b304357cc76242cc2c4c630 to your computer and use it in GitHub Desktop.
Toggle Vue Component
<template>
<div class="GameLeftMenu">
<ToggleSwitch v-model:isAuto="isAutoState" />
<div v-if="isAutoState">
<div class="MenuContentGreen">
auto
</div>
</div>
<div v-else>
<div class="MenuContentRed">
manual
</div>
</div>
</div>
</template>
<script lang="ts">
import { ToggleSwitch } from "../ToggleSwitch";
export default {
name: 'GameLeftMenu',
data() {
return {
isAutoState: false
}
},
components: {
ToggleSwitch
}
}
</script>
<style scoped>
.GameLeftMenu {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
padding: 14px 10px 10px 10px;
}
.MenuContentGreen {
background-color: green;
width: 100%;
height: 100px;
}
.MenuContentRed {
background-color: red;
width: 100%;
height: 100px;
}
</style>
<template>
<div class="ToggleSwitch" @click="onClicked">
<div class="bg">
<div class="slider" :class="{ 'auto': isAuto }"></div>
<div class="labels">
<div class="label">Manual</div>
<div class="label">Auto</div>
</div>
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'ToggleSwitch',
props: {
isAuto: {
type: Boolean,
default: false
},
},
emits: ['update:isAuto'],
methods: {
onClicked() {
this.$emit('update:isAuto', !this.isAuto);
},
}
}
</script>
<style scoped>
.ToggleSwitch {
width: 100%;
display: flex;
align-items: center;
}
.bg {
width: 100%;
height: 50px;
background-color: #000;
border-radius: 28px;
padding: 2%;
position: relative;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
cursor: pointer;
}
.slider {
width: 50%;
height: 80%;
background-color: #2f4553;
border-radius: 22px;
position: absolute;
top: 10%;
left: 2.4%;
transition: transform 0.3s ease;
box-shadow: 0px 0px 2px #2f4553;
}
.auto {
transform: translateX(90%);
}
.labels {
display: flex;
width: 96%;
height: 100%;
padding-left: 2%;
align-items: center;
text-transform: uppercase;
color: white;
font-family: 'GalanoClassicBold';
font-size: 14px;
position: absolute;
top: 50%;
transform: translateY(-50%);
user-select: none;
}
.label {
flex: 1;
text-align: center;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment