ARNT - styled-dropdown
Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.
Usage
import React, { useState } from 'react';
import { Button } from '@arnat/styled-button';
import { Dropdown, DropdownItem, DropdownMenu } from '@arnat/styled-dropdown';
export const SimpleDropdown = () => {
const [hidden, setHidden] = useState(true);
return (
<Dropdown>
<Button dropdownToggle onClick={() => setHidden(!hidden)}>
Dropdown Button
</Button>
<DropdownMenu hidden={hidden} toggle={() => setHidden(!hidden)}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownDivider />
<DropdownItem>Action after divider</DropdownItem>
</DropdownMenu>
</Dropdown>
);
};
Properties
Properties which can be added to the component to change the visual appearance.
-
active
only on DropdownItem Type: boolean -
hidden
only on DropdownMenu Type: boolean -
noRadius
only on DropdownMenu Type: boolean -
right
only on DropdownMenu Type: boolean -
fullWidth
only on DropdownMenu Type: boolean -
toggle
only on DropdownMenu Type: boolean