Offset

Available as: Web ComponentShortcodeOxygen Element

The component offsets itself to the height of a specified element. It comes in handy when dealing with a fixed header and is used on this site. Simply wrap your main content container with it and select a target element. The distance will adjust on screen resize.

<spx-tailwind> <div class="flex justify-center relative"> <div class="header absolute bg-gradient-to-tr from-blue-500 to-blue-600 p-8 h-32 rounded-xl top-0 flex items-center justify-center"> <p class="text-white">Absolute element</p> </div> <spx-offset style="display: block;" target=".header" variable="false" > <div> Content gets automatically adjusted to height of the specified element </div> </spx-offset> </div> </spx-tailwind>

Content gets automatically adjusted to height of the specified element

Properties

target

Type: stringDefault: header

Target element. Can take any querySelector value. (id, class, tag etc.)

variable

Type: booleanDefault: true

Add offset as CSS variable to body.

Slots

inner

Slot (between HTML tag).

Events

spxOffsetDidLoad

Fires after component has loaded.

Methods

recalc

Recalculate distance.