Docs

Available as: Web Component

Renders a documentation page similar to the one you are currently seeing here. Every heading tag becomes a navigation entry, while navigation headings get created by applying the "data-spx-docs-heading" attribute to the first h1 of a new section.

Properties

bp-mobile

Type: numberDefault: 1024

content-padding

Type: stringCSS variable: --spx-docs-content-padding

Content padding.

content-padding-y-max

Type: numberCSS variable: --spx-docs-content-padding-y-max

Content y max padding.

content-padding-y-min

Type: numberCSS variable: --spx-docs-content-padding-y-min

Content y min padding.

gap

Type: stringDefault: '3rem'

navigation-background

Type: stringCSS variable: --spx-docs-navigation-background

Navigation background.

navigation-gap

Type: string

navigation-gap-max

Type: numberDefault: 0.4

navigation-gap-min

Type: numberDefault: 0.2

navigation-heading-tag

Type: stringDefault: 'h1'

navigation-height-adjust

Type: string

navigation-link-color

Type: stringCSS variable: --spx-docs-navigation-link-color

Navigation link color.

navigation-link-color-active

Type: stringCSS variable: --spx-docs-navigation-link-color-active

Navigation link active color.

navigation-link-font-size

Type: anyCSS variable: --spx-docs-navigation-link-font-size

Navigation link font-size.

navigation-link-font-size-max

Type: numberDefault: 1CSS variable: --spx-docs-navigation-link-font-size-max

Navigation link max font-size.

navigation-link-font-size-min

Type: numberDefault: 0.8CSS variable: --spx-docs-navigation-link-font-size-min

Navigation link min font-size.

navigation-link-font-weight

Type: stringDefault: '500'CSS variable: --spx-docs-navigation-link-font-weight

Navigation link font-weight.

navigation-link-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-docs-navigation-link-letter-spacing

Navigation link letter-spacing.

navigation-link-line-height

Type: stringDefault: '1.25'CSS variable: --spx-docs-navigation-link-line-height

Navigation link line-height.

navigation-link-text-transform

Type: stringDefault: 'default'CSS variable: --spx-docs-navigation-link-text-transform

Navigation link text-transform.

navigation-padding-y

Type: stringCSS variable: --spx-docs-navigation-padding-y

Navigation y padding.

navigation-padding-y-max

Type: numberCSS variable: --spx-docs-navigation-padding-y-max

Navigation y max padding.

navigation-padding-y-min

Type: numberCSS variable: --spx-docs-navigation-padding-y-min

Navigation y min padding.

navigation-title-color

Type: stringCSS variable: --spx-docs-navigation-title-color

Navigation title color.

navigation-title-font-size

Type: anyCSS variable: --spx-docs-navigation-title-font-size

Navigation title font-size.

navigation-title-font-size-max

Type: numberDefault: 0.9CSS variable: --spx-docs-navigation-title-font-size-max

Navigation title max font-size.

navigation-title-font-size-min

Type: numberDefault: 0.8CSS variable: --spx-docs-navigation-title-font-size-min

Navigation title min font-size.

navigation-title-font-weight

Type: stringDefault: '500'CSS variable: --spx-docs-navigation-title-font-weight

Navigation title font-weight.

navigation-title-letter-spacing

Type: stringDefault: '0'CSS variable: --spx-docs-navigation-title-letter-spacing

Navigation title letter-spacing.

navigation-title-line-height

Type: stringDefault: '1.25'CSS variable: --spx-docs-navigation-title-line-height

Navigation title line-height.

navigation-title-margin-bottom

Type: numberDefault: 1CSS variable: --spx-docs-navigation-title-margin-bottom

Navigation title margin-bottom.

navigation-title-margin-bottom-max

Type: numberDefault: 2CSS variable: --spx-docs-navigation-title-margin-bottom-max

Navigation title max margin-bottom.

navigation-title-margin-bottom-min

Type: numberDefault: 1CSS variable: --spx-docs-navigation-title-margin-bottom-min

Navigation title min margin-bottom.

navigation-title-text-transform

Type: stringDefault: 'uppercase'CSS variable: --spx-docs-navigation-title-text-transform

Navigation title text-transform.

navigation-top

Type: stringDefault: '0'

offset-margin-top

Type: stringDefault: ''CSS variable: --spx-docs-offset-margin-top

Offset margin-top.

scrolling

Type: number

Activates automatic navigation scrolling and sets the offset.

separator

Type: string

Create a separator between sections.

styling

Type: stringDefault: 'fluid'Choices: 'default', 'fluid'

Styling.

unique-id

Type: boolean

Events

spxDocsDidLoad

Fires after component has loaded.