t-wallpaper

This component displays an image as wallpaper from the network by providing its source. Use it to display a background image with or without a default slot. It supports lazy loading and load transition.

Basic Usage

<TWallpaper src="https://source.unsplash.com/1400x800/?aerial">...</TWallpaper>

t-aspect-ratio Component

<TGrid cols="3" gap="2">
  <TWallpaper src="https://source.unsplash.com/500x500/?newyork">
    <TAspectRatio ratio="1">
      <TFlex direction="col" justify="center" align="center">
        <TIconButton design="raised" color="danger" icon="mdi:heart" />
      </TFlex>
    </TAspectRatio>
  </TWallpaper>
  ...
</TGrid>

Lazy Loading Disabled and Custom Opacity

<TWallpaper src="https://source.unsplash.com/1400x800/?aerial" opacity={0.4}>
  <TAspectRatio ratio={9 / 16}>
    <TFlex direction="col" justify="center" align="center">
      <TTohamaBrand class="w-12 md:w-24" colorful logo />
    </TFlex>
  </TAspectRatio>
</TWallpaper>

API

No options available

Media

t-video

Presentation

t-presentation

Table of Contents