cf-component-dropdown
Cloudflare Dropdown Component
Installation
Installation with yarn is recommended
$ yarn add cf-component-dropdown
Usage
import React from 'react';import Dropdown DropdownLink DropdownSeparator from 'cf-component-dropdown';import Button ButtonGroup from 'cf-component-button';import Code CodeBlock from 'cf-component-code'; Component { ; thisstate = dropdown1Open: false dropdown2Open: false ; } { return <div> <ButtonGroup> <Button ="primary" = > Open Dropdown 1 </Button> thisstatedropdown1Open && <Dropdown => <DropdownLink ="/foo">Link to /foo</DropdownLink> <DropdownLink ="/bar">Link to /bar</DropdownLink> <DropdownSeparator /> <DropdownLink ="/baz">Link to /baz</DropdownLink> <DropdownLink ="/bat">Link to /bat</DropdownLink> <DropdownLink ="/bad"> Disabled dropdown link </DropdownLink> </Dropdown> <Button ="success" = > Open Dropdown 2 </Button> thisstatedropdown2Open && <Dropdown ="right" = > <DropdownLink ="/foo">Link to /foo</DropdownLink> <DropdownLink ="/bar">Link to /bar</DropdownLink> <DropdownSeparator /> <DropdownLink ="/baz">Link to /baz</DropdownLink> <DropdownLink ="/bat">Link to /bat</DropdownLink> </Dropdown> </ButtonGroup> <p> `You can also optionally pass an align prop with either "left" or "right"` </p> <CodeBlock>`<Dropdown align="right" ...>`</CodeBlock> <p> <Code>`<DropdownLink/>`</Code> just wraps cf-component-link so you can use either to to specify a route or pass an onClick handler </p> <CodeBlock>`<DropdownLink to="/my-route"/>`</CodeBlock> <CodeBlock>`<DropdownLink onClick={this.handleClick}/>`</CodeBlock> <p> Note: to requires that you setup cf-util-route-handler prior to routing </p> </div> ; } ;