UNPKG

es6-react-admin-lte

Version:

An AdminLTE Template made to use for React and ES2015-and-so-on

65 lines (54 loc) 2.04 kB
# DropdownList > ./src/js/components/dropdown-list/dropdown-list.jsx ## Purpose To display a dropdown menu list. ## Props __headline__ * Required - _false_ * Data Type - _STRING || ELEMENT_ * Functionality - _Content or text to display as the default headliner item of the dropdown list._ * Default - _''_ __icon__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A Font Awesome icon class._ * Default - _''_ __iconRight__ * Required - _false_ * Data Type - _BOOLEAN_ * Functionality - _Whether the icon displays to the right or the left of the headline._ * Default - _false_ __dropHeader__ * Required - _false_ * Data Type - _STRING || ARRAY || ELEMENT_ * Functionality - _A string, element, or array of elements that can be displayed in the header list item of the dropdown list._ * Default - _N/A_ __dropFooter__ * Required - _false_ * Data Type - _STRING || ARRAY || ELEMENT_ * Functionality - _A string, element, or array of elements that can be displayed in the footer list item of the dropdown list._ * Default - _N/A_ __dropContent__ * Required - _false_ * Data Type - _ARRAY || ELEMENT_ * Functionality - _An element, or array of elements that can be displayed in the dropdown list. It is assumed they will be `<li>`s_ * Default - _[]_ __Takes Children__ * Expected Type - _LI Element_ * Displays Inside - _A UL element with .dropdown-menu class_ * Displays After - _A LI element with a .header class_ * Displays Before - _A LI element with a .footer class_ ## Example ```javascript/jsx import DropdownList from './src/js/components/dropdown-list/dropdown-list.jsx'; <DropdownList headline="Test Dropdown" icon="caret" dropHeader="Dropdown Header Content" dropFooter="Dropdown Footer Content" > <li role="presentation" className="list-item"><a role="menuitem" tabIndex="-1" href="#">Action</a></li> <li role="presentation" className="list-item divider"></li> <li role="presentation" className="list-item"><a role="menuitem" tabIndex="-1" href="#">Separated link</a></li> </DropdownList> ```