Developer WARNING
⚠️ If you need to customize your work with a dropdown window, refer to the documentation intergalactic/popper
The component is a wrap over intergalactic/popper with styles for a dropdown window.
Basic usage
The component API is completely identical to intergalactic/popper
tsx
import React from 'react';
import { ButtonTrigger } from 'intergalactic/base-trigger';
import Dropdown from 'intergalactic/dropdown';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
const Demo = () => (
<Flex direction='column'>
<Text tag='label' size={200} htmlFor='dropdown-basic'>
Basic usage
</Text>
<Dropdown>
<Dropdown.Trigger id='dropdown-basic' mt={2} mr='auto' tag={ButtonTrigger}>
Trigger
</Dropdown.Trigger>
<Dropdown.Popper p={4}>Content</Dropdown.Popper>
</Dropdown>
</Flex>
);
export default Demo;import React from 'react';
import { ButtonTrigger } from 'intergalactic/base-trigger';
import Dropdown from 'intergalactic/dropdown';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
const Demo = () => (
<Flex direction='column'>
<Text tag='label' size={200} htmlFor='dropdown-basic'>
Basic usage
</Text>
<Dropdown>
<Dropdown.Trigger id='dropdown-basic' mt={2} mr='auto' tag={ButtonTrigger}>
Trigger
</Dropdown.Trigger>
<Dropdown.Popper p={4}>Content</Dropdown.Popper>
</Dropdown>
</Flex>
);
export default Demo;Focus interaction
tsx
import React from 'react';
import { ButtonTrigger } from 'intergalactic/base-trigger';
import Dropdown from 'intergalactic/dropdown';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
const Demo = () => (
<Flex direction='column'>
<Text tag='label' size={200} htmlFor='button-trigger-dropdown'>
Button trigger dropdown
</Text>
<Dropdown interaction={'focus'}>
<Dropdown.Trigger id='button-trigger-dropdown' mt={2} mr='auto' tag={ButtonTrigger}>
Trigger
</Dropdown.Trigger>
<Dropdown.Popper p={4}>Content</Dropdown.Popper>
</Dropdown>
</Flex>
);
export default Demo;import React from 'react';
import { ButtonTrigger } from 'intergalactic/base-trigger';
import Dropdown from 'intergalactic/dropdown';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
const Demo = () => (
<Flex direction='column'>
<Text tag='label' size={200} htmlFor='button-trigger-dropdown'>
Button trigger dropdown
</Text>
<Dropdown interaction={'focus'}>
<Dropdown.Trigger id='button-trigger-dropdown' mt={2} mr='auto' tag={ButtonTrigger}>
Trigger
</Dropdown.Trigger>
<Dropdown.Popper p={4}>Content</Dropdown.Popper>
</Dropdown>
</Flex>
);
export default Demo;