Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
<div role="group" tabindex="0" aria-label="Panorama — drag to look around" aria-roledescription="360 degree panorama viewer" style="--panorama-height: 400px;" data-controller="midwest-panorama" data-midwest-panorama-wrap-value="true" data-midwest-panorama-start-value="0.0" class="midwest-panorama media-image is-wrap">
  <div class="midwest-panorama-viewport" data-midwest-panorama-target="viewport">
    <div class="midwest-panorama-stage" data-midwest-panorama-target="stage">
      <img class="midwest-panorama-media"
             data-midwest-panorama-target="media"
             src="https://picsum.photos/seed/mw-pano-min/2400/600"
             alt="Panorama without chrome"
             draggable="false"
             loading="lazy">
    </div>
  </div>
  <p class="sr-only" aria-live="polite" aria-atomic="true" data-midwest-panorama-target="status"></p>
</div>
1
2
3
4
5
<%= midwest_panorama(
  src: "https://picsum.photos/seed/mw-pano-min/2400/600",
  alt: "Panorama without chrome",
  controls: false
) %>

Minimal

controls: false hides the drag hint and reset button for a bare viewer. Dragging and keyboard navigation still work.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Panorama/minimal

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."