Svelte Example: Dynamic

Github StackBlitz CodeSandbox

<script lang="ts">
  import RowVirtualizerDynamic from './RowVirtualizerDynamic.svelte'
  import RowVirtualizerDynamicWindow from './RowVirtualizerDynamicWindow.svelte'
  import ColumnVirtualizerDynamic from './ColumnVirtualizerDynamic.svelte'
  import GridVirtualizerDynamic from './GridVirtualizerDynamic.svelte'

  const pathname = window.location.pathname
</script>

<main>
  <p>
    These components are using <strong>dynamic</strong> sizes. This means that each
    element's exact dimensions are unknown when rendered. An estimated dimension is
    used as the initial measurement, then this measurement is readjusted on the fly
    as each element is rendered.
  </p>
  <nav>
    <ul>
      <li>
        <a href="/">List</a>
      </li>
      <li>
        <a href="/window-list">List - window as scroller</a>
      </li>
      <li>
        <a href="/columns">Column</a>
      </li>
      <li>
        <a href="/grid">Grid</a>
      </li>
    </ul>
  </nav>
  {#if pathname === '/'}
    <RowVirtualizerDynamic />
  {:else if pathname === '/window-list'}
    <RowVirtualizerDynamicWindow />
  {:else if pathname === '/columns'}
    <ColumnVirtualizerDynamic />
  {:else if pathname === '/grid'}
    <GridVirtualizerDynamic />
  {:else}
    <p>Not Found</p>
  {/if}
</main>

<script lang="ts">
  import RowVirtualizerDynamic from './RowVirtualizerDynamic.svelte'
  import RowVirtualizerDynamicWindow from './RowVirtualizerDynamicWindow.svelte'
  import ColumnVirtualizerDynamic from './ColumnVirtualizerDynamic.svelte'
  import GridVirtualizerDynamic from './GridVirtualizerDynamic.svelte'

  const pathname = window.location.pathname
</script>

<main>
  <p>
    These components are using <strong>dynamic</strong> sizes. This means that each
    element's exact dimensions are unknown when rendered. An estimated dimension is
    used as the initial measurement, then this measurement is readjusted on the fly
    as each element is rendered.
  </p>
  <nav>
    <ul>
      <li>
        <a href="/">List</a>
      </li>
      <li>
        <a href="/window-list">List - window as scroller</a>
      </li>
      <li>
        <a href="/columns">Column</a>
      </li>
      <li>
        <a href="/grid">Grid</a>
      </li>
    </ul>
  </nav>
  {#if pathname === '/'}
    <RowVirtualizerDynamic />
  {:else if pathname === '/window-list'}
    <RowVirtualizerDynamicWindow />
  {:else if pathname === '/columns'}
    <ColumnVirtualizerDynamic />
  {:else if pathname === '/grid'}
    <GridVirtualizerDynamic />
  {:else}
    <p>Not Found</p>
  {/if}
</main>