Class TJSMediaContent

Provides an initial implementation to display image or video content from a given file path.

You can either set the url prop or use TJSFileSlotButton and embed TJSMediaContent as a child. A url context / store will be examined if it exists to obtain a file path to load.

The following CSS variables control the associated styles with the default values:

--tjs-media-content-background - transparent
--tjs-media-content-border - none
--tjs-media-content-border-radius - 0
--tjs-media-content-diameter - When defined used for height / width.
--tjs-media-content-height - 100px
--tjs-media-content-object-fit - contain
--tjs-media-content-width - 100px
Hierarchy
  • SvelteComponent<
        {
            imgAlt?: string;
            media?: object;
            tooltip?: string;
            tooltipDirection?: string;
            url?: string
            | URL;
            urlDefault?: string | URL;
            videoAutoplay?: boolean;
            videoLoop?: boolean;
            videoMuted?: boolean;
            videoPlaybackRate?: number;
            videoPlayOnHover?: boolean;
        },
        { [evt: string]: CustomEvent<any> },
        { "video-fallback": {} },
    >

Indexable

  • [prop: string]: any
Index
constructor
$destroy $on $set

  • Parameters

    • options: ComponentConstructorOptions<
          {
              imgAlt?: string;
              media?: object;
              tooltip?: string;
              tooltipDirection?: string;
              url?: string
              | URL;
              urlDefault?: string | URL;
              videoAutoplay?: boolean;
              videoLoop?: boolean;
              videoMuted?: boolean;
              videoPlaybackRate?: number;
              videoPlayOnHover?: boolean;
          },
      >

    Returns TJSMediaContent

  • Type Parameters

    • K extends string

    Parameters

    Returns () => void

Settings
Member Visibility

On This Page
Constructors
Methods