Jamie Carter jamiecarter7
jamiecarter7
/ segmentcontrol.vue
Created
September 19, 2020 13:14
iOS 14 Segmented Control with Vue and TailwindCSS - Complete Template (4 segments)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div class="bg-gray-200 rounded-lg" style="padding: 2px;"> | |
| <div class="relative flex items-center"> | |
| <!-- tab dividers --> | |
| <div class="absolute w-full"> | |
| <div class="w-1/2 flex justify-between m-auto"> | |
| <div class="h-3 w-px bg-gray-400 rounded-full opacity-0 transition-opacity duration-100 ease-in-out" :class="{ 'opacity-100': selectedTab !== 'segment1' && selectedTab !== 'segment2'}"></div> | |
| <div class="h-3 w-px bg-gray-400 rounded-full opacity-0 transition-opacity duration-100 ease-in-out" :class="{ 'opacity-100': selectedTab !== 'segment2' && selectedTab !== 'segment3'}"></div> | |
| <div class="h-3 w-px bg-gray-400 rounded-full opacity-0 transition-opacity duration-100 ease-in-out" :class="{ 'opacity-100': selectedTab !== 'segment3' && selectedTab !== 'segment4'}"></div> |
jamiecarter7
/ tailwind.config.js
Last active
September 19, 2020 13:17
iOS 14 Segmented Control with Vue and TailwindCSS - Tailwind Config JS (4 segments)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| /* other settings */ | |
| theme: { | |
| extend: { | |
| translate: { | |
| 'fullx2': '200%', | |
| 'fullx3': '300%' | |
| } | |
| } | |
| }, |
jamiecarter7
/ segmentcontrol.vue
Created
September 19, 2020 12:49
iOS 14 Segmented Control with Vue and TailwindCSS - Complete Template (2 segments)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div class="bg-gray-200 rounded-lg" style="padding: 2px;"> | |
| <div class="relative flex items-center"> | |
| <!-- tab dividers --> | |
| <div class="absolute w-full"> | |
| <div class="w-1/2 flex justify-between m-auto"> | |
| <div class="h-3 w-px bg-gray-400 rounded-full opacity-0 transition-opacity duration-100 ease-in-out" :class="{ 'opacity-100': selectedTab === 'segment3'}"></div> | |
| <div class="h-3 w-px bg-gray-400 rounded-full opacity-0 transition-opacity duration-100 ease-in-out" :class="{ 'opacity-100': selectedTab === 'segment1'}"></div> | |
| </div> |
jamiecarter7
/ tailwind.config.js
Last active
September 19, 2020 13:07
iOS 14 Segmented Control with Vue and TailwindCSS - Tailwind Config JS (3 segments)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| /* other settings */ | |
| theme: { | |
| extend: { | |
| translate: { | |
| 'fullx2': '200%' | |
| } | |
| } |
jamiecarter7
/ segmentcontrol.vue
Last active
July 10, 2024 03:11
iOS 14 Segmented Control with Vue and TailwindCSS - Complete Template (3 Segments)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div class="bg-gray-200 rounded-lg" style="padding: 2px;"> | |
| <div class="relative flex items-center"> | |
| <!-- tab dividers --> | |
| <div class="absolute w-full"> | |
| <div class="w-1/3 flex justify-between m-auto"> | |
| <div class="h-3 w-px bg-gray-400 rounded-full opacity-0 transition-opacity duration-100 ease-in-out" :class="{ 'opacity-100': selectedTab === 'segment3'}"></div> | |
| <div class="h-3 w-px bg-gray-400 rounded-full opacity-0 transition-opacity duration-100 ease-in-out" :class="{ 'opacity-100': selectedTab === 'segment1'}"></div> | |
| </div> |
jamiecarter7
/ segmentcontrolscript.vue
Created
September 19, 2020 11:30
iOS 14 Segmented Control with Vue and TailwindCSS - Vue Script Template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| export default { | |
| data() { | |
| return { | |
| selectedTab: 'segment1' | |
| } | |
| }, | |
| } | |
| </script> |
jamiecarter7
/ segmentcontrol.html
Last active
September 19, 2020 12:35
iOS 14 Segmented Control with Vue and TailwindCSS - HTML Template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="bg-gray-200 rounded-lg" style="padding: 2px;"> | |
| <div class="relative flex items-center"> | |
| <!-- tab dividers --> | |
| <div class="absolute w-full"> | |
| <div class="w-1/3 flex justify-between m-auto"> | |
| <div class="h-3 w-px bg-gray-400 rounded-full opacity-0 transition-opacity duration-100 ease-in-out" :class="{ 'opacity-100': selectedTab === 'segment3'}"></div> | |
| <div class="h-3 w-px bg-gray-400 rounded-full opacity-0 transition-opacity duration-100 ease-in-out" :class="{ 'opacity-100': selectedTab === 'segment1'}"></div> | |
| </div> | |
| </div> |