Skip to main content
cngx-src documentation

CngxTimelineOpposite

Directivev0.1.0

projects/common/timeline/timeline-item.component.ts

Import#

import { CngxTimelineOpposite } from '@cngx/common/timeline'

Description#

Marks content that belongs on the far side of the rail from the row's body - the year label opposite a card, the timestamp across a centred rail.

Per-row content, so it is a projection slot rather than a timeline-wide template: the row template already owns it, and the config cascade is for surfaces the whole timeline shares.

The extra grid track only exists for rows that actually project into it (:has(> [cngxTimelineOpposite])), so markup that predates this slot keeps its raster to the pixel. Placement follows the row: opposite content sits across the rail from the body under start, end and alternate alike.

<cngx-timeline-item status="done">
  <span cngxTimelineOpposite>2019</span>
  <p>Founded</p>
</cngx-timeline-item>

Keep the content non-interactive. The slot projects ahead of the body, so it is read first in every layout. For a year or a short label that is the right reading order whichever side the rail is on. A link or a button would take focus before the row it belongs to, and no placement of the grid can fix that, because the paint follows [data-row-side] while the DOM order does not.

Metadata#