alpinejs

by jpeter06

HTML

<script src="//unpkg.com/alpinejs" defer></script>
<script>
document.addEventListener('alpine:init', ()=>{
	Alpine.data('mainData', () => ({
  	open:true,
    orange:false,
    green:false,
    botones: ['uno','dos','tres','cuatro','aaaa','cinco','seis','siete']
  }))
})
</script>
<!--<div x-data="{open: false, red:false, botones: ['uno','dos','tres']}">-->
<div x-data="mainData">
  <button @click="open = !open">
  Expand
  </button>  
  <button @click="orange = !orange">
  orange color
  </button> 
  <button @click="green = !green">
  green color
  </button>
  <hr/>
  <div class="flex">
    <template x-for="boton in botones">
      <div x-text="boton" class="bg-tan"
        x-transition.duration.500ms
        x-bind:class="green ? 'bg-green' : ''">
      </div>
    </template>
    <div x-show="open" class="bg-gray"
        x-transition.duration.500ms 
        :class="orange ? 'bg-orange' : ''">
      Content ...
    </div>
  </div>
</div>

CSS

.bg-tan.bg-green{
  background:#ada;  
}
.bg-tan{
  background:#ddd;
  transition: all 1s;
}

.bg-gray{  
  background:#ddd;
  transition: all 1s;
}
.bg-gray.bg-orange{
  background:orange;
}

.flex{
  display:flex;
  gap:3px;
  flex-wrap: wrap;
}

.flex div {
  width:150px;
  padding:1px;
  text-align: center;
}