Quaff

QFooter

Footers place navigation and actions at the bottom of a layout. Keep them visible or reveal them as users scroll back up.

1 / 3
WEEKEND JOURNAL

Take the slow road

A little fresh air. A turn you have never taken. No rush to get home.

info QFooter API Source
interface QFooterProps extends HTMLAttributes<HTMLElement>
bordered
?: boolean = false
Whether the component should have a border.
height
?: number = 80
The height of the footer in pixels.
reveal
?: boolean = false
Determines whether the footer should hide on scroll.
revealOffset
?: number = 250
The distance in pixels from the bottom of the layout content at which the footer is revealed.
value
?: boolean = $bindable(true)
The bound value of the component.

Usage

Custom Height
The default height is 80px. Pass a number to height to set it in pixels, for example when the footer needs a summary and an action.
€180
2 nights · total
Woodland Cabin
2 guests Forest views

Two nights away, with breakfast and no alarm clock.

Reveal on Scroll
reveal hides the footer while scrolling down and shows it when scrolling up. It also returns near the bottom; revealOffset sets that distance in pixels. Scroll through the day below to try it.
ONE DAY, NO RUSH
A day by the water
  1. 09:00
    Coffee first

    A flat white and a seat by the window.

  2. 10:00
    The riverside path

    Follow the water past the old boathouse.

  3. 11:30
    Market morning

    Pick up fresh bread and something sweet.

  4. 13:00
    Lunch on the lawn

    Find a sunny patch and unpack your picnic.

  5. 15:00
    A small detour

    Browse the bookshop around the corner.

  6. 17:00
    The long way home

    One last loop around the lake.

Privacy Policy