Element

A component for embedding arbitrary HTML elements into a pane.

Any children wrapped in this component will be rendered into the pane. Any content larger than the pane in the horizontal axis will be clipped.

Useful for quickly prototyping UIs, or adding content to a pane that's not easily represented by the built-in components.

This component does not have a direct analog in the vanilla Tweakpane universe.

Think of <Element> as an escape hatch for getting something into the pane that you couldn't otherwise. Generally, it's recommended to abstract new functionality for reuse by extending one of the internal component types in Svelte Tweakpane UI, or better yet by creating a new Tweakpane Plugin — but sometimes you just need to get something into the pane quickly.

In many cases, this component should not be necessary because Svelte Tweakpane UI already makes it easy to combine tweakpane components with other inline elements simply by using stand-alone components or a <Pane position="inline"> component. <Element> should generally be the most useful when you're using <Pane position="draggable"> or <Pane position="fixed"> and you want a custom element embedded in the pane.

Usage outside of a <Pane> component doesn't make a ton of sense, but in such a case the <Element> will be implicitly wrapped in <Pane position="inline">.

<script lang="ts">
  import { Button, Element, Pane, Wheel } from 'svelte-tweakpane-ui';

  let gradientAngle = 45;
  let textAngle = 0;
</script>

<Pane position="inline" title="Element Demo">
  <Wheel
    bind:value={gradientAngle}
    format={(v) => `${(Math.abs(v) % 360).toFixed(0)}°`}
    label="Gradient Angle"
    pointerScale={-5}
  />
  <Wheel
    bind:value={textAngle}
    format={(v) => `${(Math.abs(v) % 360).toFixed(0)}°`}
    label="Text Angle"
    pointerScale={-2}
  />
  <Element>
    <div class="demo" style:--a="{gradientAngle}deg">
      <p style:rotate="{textAngle}deg">
        <code>&lt;Pane&gt;</code><br />
        <code>&lt;Element&gt;</code><br />
        Whatever you want.<br />
        <code>&lt;/Element&gt;</code><br />
        <code>&lt;/Pane&gt;</code>
      </p>
    </div>
  </Element>
  <Button
    on:click={() => {
      gradientAngle = 45;
      textAngle = 0;
    }}
    disabled={gradientAngle === 45 && textAngle === 0}
    title="Reset"
  />
</Pane>

<style>
  .demo {
    display: grid;
    place-content: center;
    aspect-ratio: 1;
    width: 100%;
    background: linear-gradient(var(--a), orange, magenta);
  }

  .demo > p {
    font-family: sans-serif;
    font-size: 1rem;
    color: white;
    text-align: center;
  }

  .demo > p > code {
    color: white;
  }
</style>