woocommerce/plugins/woocommerce-admin/client/components/dropdown-button
Kelly Dwan d007105ec1 Animation mixin + add `prefers-reduced-motion` support to existing animations (https://github.com/woocommerce/woocommerce-admin/pull/317)
* Add mixin to control transform animation

* Add `prefers-reduced-motion` support to animations

* Fix duration variable
2018-08-23 13:47:27 -04:00
..
README.md span instead of p 2018-07-03 11:58:05 +12:00
index.js Fix unique key warning for DropdownButton labels (https://github.com/woocommerce/woocommerce-admin/pull/180) 2018-07-09 16:36:12 -04:00
style.scss Animation mixin + add `prefers-reduced-motion` support to existing animations (https://github.com/woocommerce/woocommerce-admin/pull/317) 2018-08-23 13:47:27 -04:00

README.md

Dropdown Button

A button useful for a launcher of a dropdown component. The button is 100% width of its container and displays single or multiple lines rendered as <span/> elments.

How to use:

import { Dropdown } from '@wordpress/components';
import DropdownButton from 'components/dropdown-button';

render: function() {
  return (
    <Dropdown
		renderToggle={ ( { isOpen, onToggle } ) => (
			<DropdownButton
				onClick={ onToggle }
				isOpen={ isOpen }
				labels={ [ 'All Products Sold' ] }
			/>
		) }
		renderContent={ () => (
			<p>Dropdown content here</p>
		) }
	/>
  );
}

Props

  • labels: An array of elements to be rendered as the content of the button
  • isOpen: boolean describing if the dropdown in open or not
  • *: All other props are passed to Gutenberg's <Button /> component