Conditional Rendering

n-if

Simple values

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

const App = Component('my-component', () => {
  const isOpen = false;
  return  () => html`
    <n-if condition=${isOpen}>
       <p>Is open</p>
    <n-if>
  `;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)

result

Reactive values

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

const App = Component('my-component', () => {
  const isOpen = signal(false);
  
  return  () => html`
    <n-if condition=${isOpen()}>
       <p>Is open</p>
    <n-if>
  `;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)

result

n-else

Simple values

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

const App = Component('my-component', () => {
  const isOpen = signal(false);
  
  return  () => html`
    <n-if condition=${isOpen()}>
       <p>Is open</p>
    <n-if>
    <n-else>
       <p>Is closed</p>   
    </n-else>
  `;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)

result

Reactive values

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

const App = Component('my-component', () => {
  const isOpen = signal(false);
  
  return  () => html`
    <n-if condition=${isOpen()}>
       <p>Is open</p>
    <n-if>
    <n-else>
       <p>Is closed</p>   
    </n-else>
  `;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)

result

n-switch

Simple values

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

const App = Component('my-component', () => {  
  const country = 'brazil';
  
  return () => html`
    <n-switch value="${country}">
      <n-case is="brazil">Brazil</n-case>
      <n-case is="france">France</n-case>
      <n-case default>United Kingdom</n-case>
    </n-switch>
  `;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)  

result

Reactive values

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

const App = Component('my-component', () => {  
  const country = signal('brazil');
  
  return () => html`
    <n-switch value="${country()}">
      <n-case is="brazil">Brazil</n-case>
      <n-case is="france">France</n-case>
      <n-case default>United Kingdom</n-case>
    </n-switch>
  `;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)  

result