Skip to content

Instantly share code, notes, and snippets.

@CalyCherkaoui

CalyCherkaoui/index.html.slim

Forked from ryenski/index.html.slim
Created October 6, 2020 00:37
Show Gist options
  • Save CalyCherkaoui/d9a5a1884349c982b51fd4cf4e2bcef8 to your computer and use it in GitHub Desktop.
Save CalyCherkaoui/d9a5a1884349c982b51fd4cf4e2bcef8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ryenski ryenski revised this gist Feb 9, 2018. No changes.
  2. @ryenski ryenski created this gist Feb 8, 2018.
    10 changes: 10 additions & 0 deletions index.html.slim
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    div data-controller='tabs' data-tabs-index='1'
    .tabs.is-boxed.is-marginless
    ul
    li data-target='tabs.tab'
    a data={action: "tabs#change"} Tab 1
    li data-target='tabs.tab'
    a data={action: "tabs#change"} Tab 2

    .tab.box data={target: 'tabs.tabPanel'} Tab panel 1
    .tab.box data={target: 'tabs.tabPanel'} Tab panel 2
    43 changes: 43 additions & 0 deletions tabs_controller.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    import { Controller } from "stimulus"

    export default class extends Controller {

    static targets = [ "tab", "tabPanel" ]

    initialize() {
    this.showTab()
    }

    change(e){
    this.index = this.tabTargets.indexOf(e.target.parentNode)
    this.showTab(this.index)
    }

    showTab() {
    this.tabPanelTargets.forEach((el, i) => {
    if(i==this.index){
    el.classList.remove('is-hidden')
    } else {
    el.classList.add('is-hidden')
    }
    })

    this.tabTargets.forEach((el, i) => {
    if(i==this.index){
    el.classList.add('is-active')
    } else {
    el.classList.remove('is-active')
    }
    })
    }

    get index() {
    return parseInt(this.data.get('index'))
    }

    set index(value) {
    this.data.set("index", value)
    this.showTab()
    }

    }