Visualisierung

Globen, Karten, Galerien und räumliche Darstellungen. Aus Inspira UI übernommen.

DetailsFxAnimatedBeam FxBendingGallery FxExpandableGallery FxGithubGlobe FxGlobe FxIconCloud FxImagesSlider FxInfiniteGrid FxLightSpeed FxLiquidGlass FxLiquidLogo FxLogoCloud FxLogoOrigami FxPhotoGallery FxSpline FxWorldMap

Die WebGL-gestützten hier sind die schwersten Bausteine der Bibliothek. Prüfe vor dem Einsatz, ob eine einfache Grafik denselben Zweck erfüllt.

FxGlobe

Drehbarer Globus

FxGithubGlobe

Globus mit Verbindungsbögen

FxWorldMap

Weltkarte mit Bögen

FxIconCloud

Drehende Symbolwolke

FxLogoCloud

Durchlaufende Logoreihe

Eingesetzte Werkzeuge

FxLogoOrigami

Faltendes Logo

FxPhotoGallery

Auffächernde Fotogalerie

FxExpandableGallery

Bilder gehen beim Überfahren auf

FxImagesSlider

Bildwechsler mit Tastatursteuerung

FxBendingGallery

Gebogene Galerie

FxLiquidGlass

Glasartige Verzerrung

Stand der Technik

Der Inhalt liegt hinter der Glasfläche.

FxLiquidLogo

Flüssig verformtes Logo

FxLightSpeed

Fahrt durch Lichtstreifen

FxInfiniteGrid

Endloses Raster

FxSpline

Spline-Szene einbetten

Braucht eine veröffentlichte Szene-URL aus dem Spline-Werkzeug. Ohne scene bleibt die Fläche leer.

Nur zum Ansehen — dieses Beispiel lässt sich nicht aus Markdown ausführen.

::fx-spline{scene="https://prod.spline.design/…/scene.splinecode"}
::

FxAnimatedBeam

⚠️ Braucht containerRef, fromRef und toRef — Verweise auf echte Elemente. Aus Markdown heraus nicht setzbar, nur in einer .vue-Datei.

Quelltext für eine .vue-Datei

Nur zum Ansehen — dieses Beispiel lässt sich nicht aus Markdown ausführen.

<script setup lang="ts">
const container = ref<HTMLElement>()
const von = ref<HTMLElement>()
const nach = ref<HTMLElement>()
</script>

<template>
  <div ref="container" class="relative flex justify-between">
    <div ref="von">Betrieb</div>
    <div ref="nach">BSI</div>

    <FxAnimatedBeam
      :container-ref="container"
      :from-ref="von"
      :to-ref="nach"
    />
  </div>
</template>