Url view<mds-url-view>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.
Proprietà
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
Panoramica
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.