Story frame
ID: mantra_examples:story_frame
A frame to show a story or an example in, at a container size and a zoom level of its own. The content is laid out at the width the frame is given -- and the frame is a size container, so container queries inside it answer to that width -- then scaled to the zoom level, so a desktop layout can be looked at whole on a narrow page. Media queries cannot be simulated this way: they keep answering to the browser window. A component that wants its narrow layout shown in the frame repeats its media query rules in a `@container story-frame-viewport (...)` query: the frame is always a container of that name, and no page outside a frame has one. Meant to be used in the `library_wrapper` of a story, with the story passed as the content slot.
Status: experimental
| Name | Label | Type | Description |
|---|---|---|---|
content
|
Content | Slot | The story or the example to show. |
label
|
Label | String | A caption for the frame, shown above it. |
width
|
Width | String | The inline size the content is laid out at, as a CSS length: `384px`, `48rem`, `60%`. Leave empty for the full width of the frame. |
height
|
Height | String | A fixed block size, as a CSS length. The content scrolls inside it. Leave empty to let the frame grow with its content. |
zoom
|
Zoom | Number | The scale the content is shown at: 1 is 100%, 0.5 is 50%. Default: 1 Minimum: 0.1 Maximum: 0.1 |
fit
|
Fit to width | Boolean | Zoom out as far as needed for the content to fit the width available, and never in. Takes precedence over the zoom level. Default: false |
container_name
|
Container name | String | A `container-name` for the frame beside `story-frame-viewport`, which it always has, for a component whose container queries name the container they answer to. |
controls
|
Controls | Boolean | Show the toolbar for changing the width and the zoom level. Default: true |
resizable
|
Resizable | Boolean | Show a handle on the inline end of the content for dragging its width, or moving it with the arrow keys once focused. A double click on the handle goes back to the full width. Default: true |
sizes
|
Sizes | List | The widths the toolbar offers, as CSS lengths. By default 256, 320, 384, 512, 640, 768, 1024 and 1440 pixels. |
Narrow, zoomed in
Content laid out at 320px and shown at 125%. To frame a story of another component, use the frame in its `library_wrapper`: `{{ include('mantra_examples:story_frame', {width: '384px', zoom: 0.75, content: _story}, with_context: false) }}`.
Wide, fitted
Content laid out at 1440px and zoomed out to fit the page, the way a desktop layout is looked at whole. The width and the zoom level can be changed from the toolbar.