Online Sampler

by imehesz

HTML

<script src="https://cdn.jsdelivr.net/g/[email protected](riot.js+compiler.js)"></script>
<web-app />

<script type="riot/tag">  
  <web-app>
    <div>
    	<h1>Web App</h1>
      
      <button data-app='ticketing' onclick={ setActiveApp }>Ticketing</button>
      <button data-app='customers' onclick={ setActiveApp }>Customers</button>
      
      { activeApp }
      
      <ticketing-app show={ activeApp == 'ticketing' } />
      <customer-app show={ activeApp == 'customers' } />
		</div>
    
    this.activeApp = "ticketaaaing";
    this.setActiveApp = (e) => {
      let appToShow = e.target.getAttribute("data-app");
      
      if (appToShow) this.activeApp = appToShow
    };
  </web-app>
  
  <ticketing-app>
  	<div>
    	<h2>Ticketing</h2>
      <input placeholder="some ticket stuff"> 
    </div>
  </ticketing-app>
  
  <customer-app>
  	<div>
    	<h2>Customers</h2>
      <input placeholder="some customers stuff">
    </div>
  </customer-app>
  
</script>

JavaScript

// NOTE: Riot core and compiler included as an external resource
riot.mount('*')