Url view<mds-url-view>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
loadingenumSpecifies whether a browser should load an iframe immediately or to defer loading of images until some conditions are met.
iconstringSpecifies if domain is visible on header
labelstringSpecifies if the window has a label
srcstringSpecifies the URL to the web page
Overview
The <mds-url-view> web component renders an embedded preview of an external web page inside a framed browser-like window, wrapping a native <iframe> with a titled header, an identifying icon, and a dismiss control. It is the Magma way to surface remote content (typically inside a mds-modal) without hand-building chrome around the raw iframe.
Semantic Behavior
Iframe preview: The required src is loaded into an internal <iframe>; the component is purely a presentational frame and does not proxy or sandbox the embedded document beyond the browser defaults.Domain labelling: When no explicit label is provided, the header title falls back to the page’s hostname (with a leading www. stripped), derived from src.Close action: The header dismiss button emits the mdsUrlViewClose event and, when the component is nested inside a mds-modal, automatically closes that ancestor modal.Keyboard activation: The close control can be triggered by keyboard the same way as a pointer click.Localization: Header tooltip and ARIA strings are resolved in the active language (el / en / es / it).
Properties & Visual Configurations
src is the only required prop and drives everything else - the iframe source, the fallback header title, and the ARIA descriptions.label overrides the auto-derived hostname shown in the header when a friendlier title is wanted.icon is an SVG filename slug from the Magma icon library shown at the left of the header; it defaults to a generic “explore” glyph when omitted.loading controls iframe fetch timing: 'lazy' (the default) defers loading until the frame approaches the viewport, while 'eager' requests the content immediately.This component does not expose the shared variant / tone ladders (agents/variants.md) on its own host; those props are applied internally to the child mds-button close control.