styled-dropdown-component

styled-dropdown-component

The bootstrap dropdown component made with styled-components.

Table of Contents

• Documentation
• Why?
• Installation
• Usage
• Properties
• Related
• License

Why?

This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application. To work with ease with any other libary or framework this component is build with styled-components.

Installation

$ npm i styled-dropdown-component -S

or

$ yarn add styled-dropdown-component

Usage

For detailed information take a look at the documentation.

Note: if you want this example to work you need to install the styled-button-component as well.

/*
  if you installed `styled-bootstrap-components` use

    import { ... } from 'styled-bootstrap-components'

  instead.
*/
import React from 'react';

import { Button } from 'styled-button-component';
import {
  Dropdown,
  DropdownItem,
  DropdownMenu,
} from 'styled-dropdown-component';

export class SimpleDropdown extends React.Component {
  constructor(props) {
    super();
    this.state = {
      hidden: true,
    };
  }

  handleOpenCloseDropdown() {
      this.setState({
        hidden: !this.state.hidden,
      });
  }

  render() {
    const { hidden } = this.state;
    return (
      <Dropdown>
        <Button
          secondary
          dropdownToggle
          onClick={() => this.handleOpenCloseDropdown()}
        >
          Dropdown Button
        </Button>
        <DropdownMenu hidden={hidden}>
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Another action</DropdownItem>
          <DropdownItem>Something else here</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
};

Properties

Properties which can be added to the component to change the visual appearance. This component uses styled-system.

• active only on DropdownItem Type: boolean
• hidden only on DropdownMenu Type: boolean
• m margin Type: string
• mt margin-top Type: string
• mr margin-right Type: string
• mb margin-bottom Type: string
• ml margin-left Type: string
• mx margin-left and margin-right Type: string
• my margin-top and margin-bottom Type: string
• p padding Type: string
• pt padding-top Type: string
• pr padding-right Type: string
• pb padding-bottom Type: string
• pl padding-left Type: string
• px padding-left and padding-right Type: string
• py padding-top and padding-bottom Type: string
• width Type: string
• fontSize Type: string
• fontWeight Type: string
• textAlign Type: string
• lineHeight Type: string
• display Type: string
• color Type: string
• borderRadius Type: string
• borderColor Type: string
• border Type: string
• borderTop Type: string
• borderRight Type: string
• borderBottom Type: string
• borderLeft Type: string

Related

bootstrap styled-components styled-system

License

MIT © Lukas Aichbauer