Developer WARNING
⚠️ If you need to customize your work with a dropdown window, refer to the documentation @semcore/ui/popper
The component is a wrap over @semcore/ui/popper with styles for a dropdown window.
Basic usage
The component API is completely identical to @semcore/ui/popper
tsx
import React from 'react';
import { ButtonTrigger } from '@semcore/ui/base-trigger';
import Dropdown from '@semcore/ui/dropdown';
const Demo = () => (
<Dropdown>
<Dropdown.Trigger tag={ButtonTrigger}>Trigger</Dropdown.Trigger>
<Dropdown.Popper p={4}>Content</Dropdown.Popper>
</Dropdown>
);import React from 'react';
import { ButtonTrigger } from '@semcore/ui/base-trigger';
import Dropdown from '@semcore/ui/dropdown';
const Demo = () => (
<Dropdown>
<Dropdown.Trigger tag={ButtonTrigger}>Trigger</Dropdown.Trigger>
<Dropdown.Popper p={4}>Content</Dropdown.Popper>
</Dropdown>
);Focus interaction
tsx
import React from 'react';
import { ButtonTrigger } from '@semcore/ui/base-trigger';
import Dropdown from '@semcore/ui/dropdown';
const Demo = () => (
<Dropdown interaction={'focus'}>
<Dropdown.Trigger tag={ButtonTrigger}>Trigger</Dropdown.Trigger>
<Dropdown.Popper p={4}>Content</Dropdown.Popper>
</Dropdown>
);import React from 'react';
import { ButtonTrigger } from '@semcore/ui/base-trigger';
import Dropdown from '@semcore/ui/dropdown';
const Demo = () => (
<Dropdown interaction={'focus'}>
<Dropdown.Trigger tag={ButtonTrigger}>Trigger</Dropdown.Trigger>
<Dropdown.Popper p={4}>Content</Dropdown.Popper>
</Dropdown>
);