[go: up one dir, main page]
{ const container = $el; // The div with overflow const item = document.getElementById('sidebar-current-page') if (item) { const containerTop = container.scrollTop; const containerBottom = containerTop + container.clientHeight; const itemTop = item.offsetTop - container.offsetTop; const itemBottom = itemTop + item.offsetHeight; // Scroll only if the item is out of view if (itemBottom > containerBottom - 200) { container.scrollTop = itemTop - (container.clientHeight / 2 - item.offsetHeight / 2); } } })" class="bg-background-toc dark:bg-background-toc fixed top-0 z-40 hidden h-screen w-full flex-none overflow-x-hidden overflow-y-auto md:sticky md:top-16 md:z-auto md:block md:h-[calc(100vh-64px)] md:w-[320px]" :class="{ 'hidden': ! $store.showSidebar }">
Contact support
Contribute

Badges

Table of contents

Examples

blue badge amber badge red badge green badge violet badge

You can also make a badge a link.

badge with a link

Usage guidelines

We use badges to indicate new content and product content in various stages of the release lifecycle:

  • The violet badge to highlight new early access or experimental content
  • The blue badge to highlight beta content
  • The green badge to highlight new content that is either GA or not product-related content, such as guides/learning paths

Best practice is to use this badge for no longer than 2 months post release of the feature.

Markup

{{< badge color=amber text="amber badge" >}}
[{{< badge color="blue" text="badge with a link" >}}](../overview.md)