db-dropdown.stories.mdx

import { Meta, Canvas } from '@storybook/addon-docs'; import Readme from './../readme.md';

import { mockData } from './../../db-link/stories/mockData.ts';

import { styled } from '@storybook/theming';

export const StyledCanvas = styled.div.docs-story { & > div:first-child { min-height: 300px; } };

<db-dropdown>

The <db-dropdown></db-dropdown> element represents a dropdown. This component is mainly meant to get used within the header section. If you're looking for a similar one within the content section, please refer to the overflow menu component.

There are three options to use <db-dropdown>:

dropdown with wrappers

Use <li> (list item) as a wrapper tag around each element.

Only <button> and <a> HTML tags work as items content.

Maybe you need this option to use framework specific listeners.

dropdown with custom db-button

Modify

Delete

dropdown with <db-link>

Use with caution, you won't have reactivity on changed HTML after the initial load. Einstellungen Nachrichten

dropdown with data

The data should be an object passed in with JSON.stringify()

export type DbLinkType = {
  href: string;
  label: string;
};

dropdown with individual icon

If you'd like to define an individual icon for the button that toggles the dropdown, you could define it via the icon-attribute.

Modify

Delete