Skip to content

Instantly share code, notes, and snippets.

@drnic
Last active Jul 6, 2020
Embed
What would you like to do?
Vue component for some alignment buttons. Demo at https://share.getcloudapp.com/2Nu5bL1B
<template>
<span class="p-1 inline-flex items-center rounded-lg bg-gray-200">
<button
@click="alignmentSelected = 'left'"
:class="alignmentSelected == 'left' ? 'bg-white shadow' : 'hover:bg-gray-400'"
class="p-1 rounded-lg"
>
<svg class="h-6 w-6 text-gray-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 333 333">
<path
stroke="currentColor"
d="M323 31.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM230 114.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h220c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 198.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM151 281.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h141c5.5 0 10-4.5 10-10s-4.5-10-10-10z"
/>
</svg>
</button>
<button
@click="alignmentSelected = 'center'"
:class="alignmentSelected == 'center' ? 'bg-white shadow' : 'hover:bg-gray-400'"
class="p-1 rounded-lg"
>
<svg
class="h-6 w-6 text-gray-200"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 334.367 334.367"
>
<path
stroke="currentColor"
d="M10.449 52.245h313.469c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449H10.449C4.678 31.347 0 36.025 0 41.796s4.678 10.449 10.449 10.449zM57.469 114.939c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h219.429c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449H57.469zM323.918 198.531H10.449C4.678 198.531 0 203.209 0 208.98s4.678 10.449 10.449 10.449h313.469c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449zM237.714 282.122H96.653c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h141.061c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449z"
/>
</svg>
</button>
<button
@click="alignmentSelected = 'right'"
:class="alignmentSelected == 'right' ? 'bg-white shadow' : 'hover:bg-gray-400'"
class="p-1 rounded-lg"
>
<svg class="h-6 w-6 text-gray-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 333 333">
<path
stroke="currentColor"
d="M323 31.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 114.5H104c-5.5 0-10 4.5-10 10s4.5 10 10 10h219c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 198.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 281.5H182c-5.5 0-10 4.5-10 10s4.5 10 10 10h141c5.5 0 10-4.5 10-10s-4.5-10-10-10z"
/>
</svg>
</button>
<button
@click="alignmentSelected = 'justified'"
:class="alignmentSelected == 'justified' ? 'bg-white shadow' : 'hover:bg-gray-400'"
class="p-1 rounded-lg"
>
<svg class="h-6 w-6 text-gray-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 333 333">
<path
stroke="currentColor"
d="M323 31.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 114.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 198.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 281.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10z"
/>
</svg>
</button>
</span>
</template>
<script>
export default {
data() {
return {
alignmentSelected: 'left',
}
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment