Catalog Layouts

<.top_bar>

ConnieUI.Layouts

Your free trial ends in 3 days.

The page starts below the bar.

HEEx 
<div id="catalog-shell" class="relative h-32 w-2xl translate-x-0 pt-[var(--top-bar,0px)]">
  <ConnieUI.Layouts.top_bar id="catalog-top-bar" shell="catalog-shell">
    <ConnieUI.Cards.alert color="brand" icon="icon-info-circle">
      <ConnieUI.Typography.muted>Your free trial ends in 3 days.</ConnieUI.Typography.muted>
    </ConnieUI.Cards.alert>
  </ConnieUI.Layouts.top_bar>
  <ConnieUI.Typography.muted>The page starts below the bar.</ConnieUI.Typography.muted>
</div>

Controls

:string
:string

the id of the element `--top-bar` is set on

Set by the example

class

Docs

Bars fixed across the top of the window, which publish their height as the `--top-bar` custom property on the page's shell. The navigation, the mobile header, `ConnieUI.Slideouts.docked_slideout/1`, `page_header/1` and the comment popover offset themselves by it, so the bars push everything down rather than sitting over it. The shell pads itself by the same property to keep the space. Fixed rather than sticky. Sticky rides an overscroll bounce because it is still in flow, while the navigation and the docked panel do not, so past the top of the page they slid over the bars. Fixed leaves nothing to come apart. In print the bars are static, so they print once rather than over the top of every page. The shell carries an estimate of its own from the server, so the first paint is already right. The hook then owns the property: it measures, which is what gets a wrapped bar (narrow screens) and a dismissed one right. The shell needs `JS.ignore_attributes(["style"])` so a later patch does not put the estimate back over the measurement.
Attribute Type Default Description
id * :string
shell * :string
the id of the element `--top-bar` is set on
class :any nil
Slot Slot attributes Description
inner_block