React bootstrap dropdown

React bootstrap dropdown DEFAULT

How to use

Item

function

in

Dropdown

renderCart() { return ( <div className="navbar-collapse collapse w order-3 dual-collapse2"> <ul className="navbar-nav ml-auto"> <li className="nav-item"> <DropdownButton id="dropdown-basic-button" title={"My Cart - " + this.props.cartItems.length} variant="secondary" alignRight > {this.props.cartItems && this.props.cartItems.map(cart => { return ( <Dropdown.Item href="#/action-1" key={cart.product.id}> {cart.product.name} -{" "} <span className="badge badge-success"> {cart.quantity} </span>{" "} </Dropdown.Item> ); })} </DropdownButton> </li> </ul> </div> ); }
Sours: https://www.tabnine.com/code/javascript/classes/react-bootstrap/Dropdown.Item

React-Bootstrap Dropdown Component

React-Bootstrap is a front-end framework that was designed keeping react in mind. Dropdown Componentprovides a way to displaying lists of links or more actions within a menu when clicked over it. We can use the following approach in ReactJS to use the react-bootstrap Dropdown Component.

Dropdown Props:

  • alignRight: It is used to align the menu to the right side of the Dropdown toggle.
  • as: It can be used as a custom element type for this component.
  • drop: It is used to determine the location and direction of the Menu in relation to its toggle.
  • flip: It is used to flip the dropdown in case of overlapping on the reference element.
  • focusFirstItemOnShow: When the dropdown is opened, it is used to control the focus behavior for it.
  • navbar: It is the attribute that is by default false and indicates whether dropdown is navbar related or not.
  • onSelect: It is a callback function that is triggered when a menu item is selected.
  • onToggle: It is used to trigger a callback when the visibility of the dropdown needs to be changed.
  • show: It is used to indicate whether the dropdown is visible or not.
  • bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

SplitButton Props:

  • disabled: It is used to disable the button.
  • href: It is used to pass the href attribute to the underlying non-toggle button.
  • id: It is the general HTML id attribute for the toggle button.
  • menuAlign: It is used to responsively align the dropdown menu.
  • menuRole: It is used for the ARIA accessible role applied which is applied to the menu component.
  • onClick: It is the callback function that is passed as a handler for the non-toggle button.
  • renderMenuOnMount: It is used to indicate whether to render the dropdown menu before the first time it is shown in the DOM.
  • rootCloseEvent: It is used to close the component when which event is triggered outside this component.
  • size: It denotes the size of the component.
  • target: For the non-toggle Button, it is an anchor target passed to it.
  • title: It is used to define the content of non-toggle Button.
  • toggleLabel: For the toggle button, it is the accessible label.
  • type: It is used to pass the type for the non-toggle button.
  • variant: It is used to indicate the style variant for it.
  • bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Dropdown.Toggle Props:

  • as: It can be used as a custom element type for this component.
  • childBsPrefix: It is used for the DropdownButtonto pass through to the underlying button or whatever from it.
  • eventKey: It is used to uniquely identify the dropdown toggle component.
  • id: It is used to pass the HTML id attribute to this element.
  • split: It is used to pass the split attribute to this element.
  • bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Dropdown.Menu Props:



  • align: It is used for the dropdown menu to align it to the specified side of the container.
  • alignRight: It is used for the dropdown menu to align it to the right side of the container.
  • as: It can be used as a custom element type for this component.
  • flip: It is used to flip the dropdown to its opposite placement.
  • onSelect: It is a callback function that is triggered when the menu item is selected.
  • popperConfig: It is used to pass the set of popper options to the popper directly.
  • renderOnMount: It is used to indicate whether to render the dropdown menu before the first time it is shown in the DOM.
  • rootCloseEvent: It is used to close the component when which event is triggered outside this component.
  • show: It is used to indicate whether the dropdown menu is visible or not.
  • bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Dropdown.Item Props:

  • active: It can be used to mark the menu item as active.
  • as: It can be used as a custom element type for this component.
  • disabled: It is used to make the menu item disabled.
  • eventKey: It is used to uniquely identify the selected menu item.
  • href: It is used to pass the href attribute to this element.
  • onClick: It is a callback function that is triggered when the menu item is clicked.
  • onSelect: It is a callback function that is triggered when the menu item is selected.
  • bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Dropdown.Header Props:

  • as: It can be used as a custom element type for this component.
  • bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Dropdown.Divider Props:

  • as: It can be used as a custom element type for this component.
  • bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Creating React Application And Installing Module:

  • Step 1: Create a React application using the following command:

    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. foldername, move to it using the following command:

    cd foldername
  • Step 3: After creating the ReactJS application, Install therequiredmodule using the following command:

    npm install react-bootstrap npm install bootstrap

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost/, you will see the following output:

Reference:https://react-bootstrap.github.io/components/dropdowns/




My Personal Notesarrow_drop_up
Sours: https://www.geeksforgeeks.org/react-bootstrap-dropdown-component/
  1. Burlington county times obituaries 2019
  2. Paul mitchell near me
  3. Is borderlands 3 fun solo
  4. Eddie hall bench press

Dropdown

const MenuContainer =styled("div")`

display: ${(p)=>(p.show ?"flex":"none")};

min-width: px;

position: absolute;

z-index: ;

flex-direction: column;

border: 1px solid #e5e5e5;

background-color: white;

box-shadow: 0 5px 15px rgba(0, 0, 0, );

`;

constMenu=({ role })=>{

const{ show, onClose, props }=useDropdownMenu({

flip:true,

offset:[0,8],

});

return(

<MenuContainer{props}role={role}show={show}>

<button

type="button"

onClick={onClose}

className="text-left hover:bg-brand px-6 py-2"

>

Item 1

</button>

<button

type="button"

onClick={onClose}

className="text-left hover:bg-brand px-6 py-2"

>

Item 2

</button>

</MenuContainer>

);

};

constToggle=({ id, children })=>{

const[props,{ show, toggle }]=useDropdownToggle();

return(

<button

type="button"

className="btn"

id={id}

{props}

onClick={toggle}

>

{children}

</button>

);

};

constDropdownButton=({

show,

onToggle,

drop,

alignEnd,

title,

role,

})=>(

<Dropdown

show={show}

onToggle={onToggle}

drop={drop}

alignEnd={alignEnd}

itemSelector="button:not(:disabled)"

>

{({ props })=>(

<div{props}className="relative inline-block">

<Toggleid="example-toggle">{title}</Toggle>

<Menurole={role}/>

</div>

)}

</Dropdown>

);

const ButtonToolbar =styled("div")`

& > * + * {

margin-left: 12px;

}

`;

const[show, setShow]=useState(false);

<ButtonToolbarclassName="dropdown-example">

<DropdownButton

show={show}

onToggle={(nextShow)=>setShow(nextShow)}

title={`${show ?"Close":"Open"} Dropdown`}

/>

<DropdownButtonalignEndtitle="Align right"/>

<DropdownButtondrop="up"title="Drop up"/>

<DropdownButtonrole="menu"title="Role 'menu'"/>

</ButtonToolbar>;

Sours: https://react-bootstrap.github.io/react-overlays/api/Dropdown/
React Navbar Dropdown Menu Responsive Tutorial - Beginner React JS Project

Best JavaScript code snippets using react-bootstrap.DropdownButton(Showing top 15 results out of )

const DropdownMenu = ({ menu }) => ( <DropdownButton id="dropdown" bsStyle="default" noCaret title={[<span />]} className={s.dropdown}> {menu && menu.map(menuItem => ( <MenuItem key={menuItem.id} className={s['dropdown-menu']}> <MenuItemLink title={menuItem.title} /> </MenuItem> ))} </DropdownButton> )
const Lang = ({ language, changeLang, client, terms }) => { const languages = terms[0].children; prefetchData(languages, client); return ( <DropdownButton bsStyle="default" title={[<LangIcon language={language} />]} id="Lang" className={s.dropdown} > {languages && languages.map(lang => ( <MenuItem key={lang.term_id} onClick={() => changeLang(lang.slug)} className={s['dropdown-menu']}> <LangIcon language={lang.slug} /> </MenuItem> ))} </DropdownButton> ); }
BUTTONS.map((title, i) => { return ( <DropdownButton bsStyle={title.toLowerCase()} title={title} key={i} id={`dropdown-basic-${i}`}> <MenuItem eventKey="1">Action</MenuItem> <MenuItem eventKey="2">Another action</MenuItem> <MenuItem eventKey="3" active>Active Item</MenuItem> <MenuItem divider /> <MenuItem eventKey="4">Separated link</MenuItem> </DropdownButton> ) })
render(){ return( <div> <div> <p>Example data source: <pre> {JSON.stringify(this.props.dropdownData,null,2)}</pre></p> <p>Selected report id: <b> {this.props.selectedId}</b></p> </div> <div> <DropdownButton title={this.getSelectedItemTitle()} onSelect={this.props.dropdownChanged}> {this.props.dropdownData.map(item => <MenuItem key={item.id} eventKey={item.id}>{item.title}</MenuItem>)} </DropdownButton> </div> <div> <FormControl onChange={this.props.formcontrolChanged} type="text" value={this.props.selectedId} ></FormControl> </div> </div> ); }
render() { const {theme} = this.state; const themeClass = theme ? theme.toLowerCase() : 'default'; return ( <div> <DropdownButton id="SplitButton" size="large" bsstyle={themeClass} title={`${theme || 'Default'} Theme`}> <Dropdown.Item eventKey="Primary" onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item> <Dropdown.Item eventKey="Danger" onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item> <Dropdown.Item eventKey="Success" onSelect={this.chooseTheme}>Success Theme</Dropdown.Item> <Dropdown.Divider/> <Dropdown.Item eventKey="Reset" onSelect={this.chooseTheme}>Default Theme</Dropdown.Item> </DropdownButton> <span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`}> {theme || 'Default'} Theme </span> </div> ); }
React.createClass({ render: function() { return ( <Navbar className="navbar navbar-inverse navbar-fixed-top"> <a className="navbar-brand" href="#">{this.props.projectName}</a> <Nav className="nav navbar-nav"> <NavItem className="active" eventKey={1} href="#home">Home</NavItem> <NavItem eventKey={2} href="#about">About</NavItem> <NavItem eventKey={2} href="#about">Contact</NavItem> <DropdownButton eventKey={3} title="Dropdown"> <MenuItem eventKey="1">Action</MenuItem> <MenuItem eventKey="2">Another action</MenuItem> <MenuItem eventKey="3">Something else here</MenuItem> <MenuItem divider /> <MenuItem eventKey="4">Separated link</MenuItem> </DropdownButton> </Nav> </Navbar> ); } })
<DropdownButton bsStyle="default" className="categories btn-secondary"
News </NavItem> <DropdownButton bsStyle="info" className="dropdown" title='Primary'> <MenuItem eventKey='1'><Link to="/about">About</Link></MenuItem> <MenuItem eventKey='2'><Link to="/news">News</Link></MenuItem>
const HeaderComponent = props => { return ( <myCurrencyContext.Consumer className="container"> {context => { return ( <React.Fragment> Select Currency: <DropdownButton id="dropdown-basic-button" title={context.currencyName} > <Dropdown.Item onClick={() => context.setCurrentCurrency("USD")}> USD </Dropdown.Item> <Dropdown.Item onClick={() => context.setCurrentCurrency("INR")}> INR </Dropdown.Item> <Dropdown.Item onClick={() => context.setCurrentCurrency("EUR")}> EUR </Dropdown.Item> </DropdownButton> </React.Fragment> ); }} </myCurrencyContext.Consumer> ); }
activePage={this.state.postsPage} onSelect={this._handlePostsPageIndexChange}/> <DropdownButton id="postsPageSizeDropdown" onSelect={this._handlePostsPageSizeChange} className="pagination-dropdown" bsStyle="default" title={this.state.postsPageSize} style={{marginLeft: 5}}>
let HeaderView = ({username, logout}) => { return <div className="header bg-dark"> <span className="app-name">App's dashboard</span> <ButtonToolbar className={'user'}> <DropdownButton bsStyle={'primary'} title={username} key={1} id={`dropdown-basic-1`} > <MenuItem eventKey="1" onClick={(e) => { e.preventDefault(); logout() }}>Logout</MenuItem> </DropdownButton> </ButtonToolbar> </div> }
<Button active={filter === 'Active'} onClick={this.handleSelect}>Active</Button> <Button active={filter === 'Completed'} onClick={this.handleSelect}>Completed</Button> <DropdownButton title="Sort"> <MenuItem eventKey="1" onClick={() => this.handleSort('content')}>A-Z</MenuItem> <MenuItem eventKey="2" onClick={() => this.handleSort('id')}>Date</MenuItem>
render() { return ( <ButtonGroup> <DropdownButton title="Sort by date" bsStyle="info" bsSize="xsmall" id="dropdown1" onSelect={this._sortByDateSelected}> <MenuItem eventKey="ascending">Ascending</MenuItem> <MenuItem eventKey="descending">Descending</MenuItem> </DropdownButton> <DropdownButton title="Sort by likes" bsStyle="info" bsSize="xsmall" id="dropdown2" onSelect={this._sortByLikesSelected}> <MenuItem eventKey="ascending">Ascending</MenuItem> <MenuItem eventKey="descending">Descending</MenuItem> </DropdownButton> <Button bsStyle="success" bsSize="xsmall" onClick={this._showModalInfo}> Show modal info </Button> </ButtonGroup> ); }
renderCart() { return ( <div className="navbar-collapse collapse w order-3 dual-collapse2"> <ul className="navbar-nav ml-auto"> <li className="nav-item"> <DropdownButton id="dropdown-basic-button" title={"My Cart - " + this.props.cartItems.length} variant="secondary" alignRight > {this.props.cartItems && this.props.cartItems.map(cart => { return ( <Dropdown.Item href="#/action-1" key={cart.product.id}> {cart.product.name} -{" "} <span className="badge badge-success"> {cart.quantity} </span>{" "} </Dropdown.Item> ); })} </DropdownButton> </li> </ul> </div> ); }
renderDropdownButton (title, i) { return ( <DropdownButton bsStyle={title.toLowerCase()} title={title} key={i} id={`dropdown-basic-${i}`}> <MenuItem eventKey='1'>Action</MenuItem> <MenuItem eventKey='2'>Another action</MenuItem> <MenuItem eventKey='3' active={true}>Active Item</MenuItem> <MenuItem divider /> <MenuItem eventKey='4'>Separated link</MenuItem> </DropdownButton> ) }
Sours: https://www.tabnine.com/code/javascript/classes/react-bootstrap/DropdownButton

Bootstrap dropdown react

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin

Overview#

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. Like overlays, Dropdowns are built using a third-party library Popper.js, which provides dynamic positioning and viewport detection.

Accessibility#

The WAIARIA standard defines a widget, but it's very specific to a certain kind of menu. ARIA menus, must only contain , , or .

On the other hand, Bootstrap's dropdowns are designed to more generic and application in a variety of situations. For this reason we don't automatically add the menu roles to the markup. We do implement some basic keyboard navigation, and if you do provide the "menu" role, react-bootstrap will do its best to ensure the focus management is compliant with the ARIA authoring guidelines for menus.

Examples#

Single button dropdowns#

The basic Dropdown is composed of a wrapping and inner , and . By default the will render a component and accepts all the same props.

<Dropdown>

<Dropdown.Togglevariant="success"id="dropdown-basic">

Dropdown Button

</Dropdown.Toggle>

<Dropdown.Menu>

<Dropdown.Itemhref="#/action-1">Action</Dropdown.Item>

<Dropdown.Itemhref="#/action-2">Another action</Dropdown.Item>

<Dropdown.Itemhref="#/action-3">Something else</Dropdown.Item>

</Dropdown.Menu>

</Dropdown>

Since the above is such a common configuration react-bootstrap provides the component to help reduce typing. Provide a prop and some s and you're ready to go.

<DropdownButtonid="dropdown-basic-button"title="Dropdown button">

<Dropdown.Itemhref="#/action-1">Action</Dropdown.Item>

<Dropdown.Itemhref="#/action-2">Another action</Dropdown.Item>

<Dropdown.Itemhref="#/action-3">Something else</Dropdown.Item>

</DropdownButton>

DropdownButton will forward Button props to the underlying Toggle component

<>

{['Primary','Secondary','Success','Info','Warning','Danger'].map(

(variant)=>(

<DropdownButton

as={ButtonGroup}

key={variant}

id={`dropdown-variants-${variant}`}

variant={variant.toLowerCase()}

title={variant}

>

<Dropdown.ItemeventKey="1">Action</Dropdown.Item>

<Dropdown.ItemeventKey="2">Another action</Dropdown.Item>

<Dropdown.ItemeventKey="3"active>

Active Item

</Dropdown.Item>

<Dropdown.Divider/>

<Dropdown.ItemeventKey="4">Separated link</Dropdown.Item>

</DropdownButton>

),

)}

</>

Split button dropdowns#

Similarly, You create a split dropdown by combining the Dropdown components with another Button and a ButtonGroup.

<Dropdownas={ButtonGroup}>

<Buttonvariant="success">Split Button</Button>

<Dropdown.Togglesplitvariant="success"id="dropdown-split-basic"/>

<Dropdown.Menu>

<Dropdown.Itemhref="#/action-1">Action</Dropdown.Item>

<Dropdown.Itemhref="#/action-2">Another action</Dropdown.Item>

<Dropdown.Itemhref="#/action-3">Something else</Dropdown.Item>

</Dropdown.Menu>

</Dropdown>

As with DropdownButton, is provided as convenience component.

<>

{['Primary','Secondary','Success','Info','Warning','Danger'].map(

(variant)=>(

<SplitButton

key={variant}

id={`dropdown-split-variants-${variant}`}

variant={variant.toLowerCase()}

title={variant}

>

<Dropdown.ItemeventKey="1">Action</Dropdown.Item>

<Dropdown.ItemeventKey="2">Another action</Dropdown.Item>

<Dropdown.ItemeventKey="3"active>

Active Item

</Dropdown.Item>

<Dropdown.Divider/>

<Dropdown.ItemeventKey="4">Separated link</Dropdown.Item>

</SplitButton>

),

)}

</>

Sizing#

Dropdowns work with buttons of all sizes.

<>

<divclassName="mb-2">

{[DropdownButton, SplitButton].map((DropdownType, idx)=>(

<DropdownType

as={ButtonGroup}

key={idx}

id={`dropdown-button-drop-${idx}`}

size="lg"

title="Drop large"

>

<Dropdown.ItemeventKey="1">Action</Dropdown.Item>

<Dropdown.ItemeventKey="2">Another action</Dropdown.Item>

<Dropdown.ItemeventKey="3">Something else here</Dropdown.Item>

<Dropdown.Divider/>

<Dropdown.ItemeventKey="4">Separated link</Dropdown.Item>

</DropdownType>

))}

</div>

<div>

{[DropdownButton, SplitButton].map((DropdownType, idx)=>(

<DropdownType

as={ButtonGroup}

key={idx}

id={`dropdown-button-drop-${idx}`}

size="sm"

variant="secondary"

title="Drop small"

>

<Dropdown.ItemeventKey="1">Action</Dropdown.Item>

<Dropdown.ItemeventKey="2">Another action</Dropdown.Item>

<Dropdown.ItemeventKey="3">Something else here</Dropdown.Item>

<Dropdown.Divider/>

<Dropdown.ItemeventKey="4">Separated link</Dropdown.Item>

</DropdownType>

))}

</div>

</>

Dark dropdowns#

Opt into darker dropdowns to match a dark navbar or custom style by adding onto an existing . Alternatively, use when using the component.

<>

<Dropdown>

<Dropdown.Toggleid="dropdown-button-dark-example1"variant="secondary">

Dropdown Button

</Dropdown.Toggle>

<Dropdown.Menuvariant="dark">

<Dropdown.Itemhref="#/action-1"active>

Action

</Dropdown.Item>

<Dropdown.Itemhref="#/action-2">Another action</Dropdown.Item>

<Dropdown.Itemhref="#/action-3">Something else</Dropdown.Item>

<Dropdown.Divider/>

<Dropdown.Itemhref="#/action-4">Separated link</Dropdown.Item>

</Dropdown.Menu>

</Dropdown>

<DropdownButton

id="dropdown-button-dark-example2"

variant="secondary"

menuVariant="dark"

title="Dropdown button"

className="mt-2"

>

<Dropdown.Itemhref="#/action-1"active>

Action

</Dropdown.Item>

<Dropdown.Itemhref="#/action-2">Another action</Dropdown.Item>

<Dropdown.Itemhref="#/action-3">Something else</Dropdown.Item>

<Dropdown.Divider/>

<Dropdown.Itemhref="#/action-4">Separated link</Dropdown.Item>

</DropdownButton>

</>

Using in a :

<Navbarvariant="dark"bg="dark"expand="lg">

<Containerfluid>

<Navbar.Brandhref="#home">React-Bootstrap</Navbar.Brand>

<Navbar.Togglearia-controls="navbar-dark-example"/>

<Navbar.Collapseid="navbar-dark-example">

<Nav>

<NavDropdown

id="nav-dropdown-dark-example"

title="Dropdown"

menuVariant="dark"

>

<NavDropdown.Itemhref="#action/">Action</NavDropdown.Item>

<NavDropdown.Itemhref="#action/">Another action</NavDropdown.Item>

<NavDropdown.Itemhref="#action/">Something</NavDropdown.Item>

<NavDropdown.Divider/>

<NavDropdown.Itemhref="#action/">Separated link</NavDropdown.Item>

</NavDropdown>

</Nav>

</Navbar.Collapse>

</Container>

</Navbar>

Drop directions#

Trigger dropdown menus above, below, left, or to the right of their toggle elements, with the prop.

<>

<divclassName="mb-2">

{['up','down','start','end'].map((direction)=>(

<DropdownButton

as={ButtonGroup}

key={direction}

id={`dropdown-button-drop-${direction}`}

drop={direction}

variant="secondary"

title={` Drop ${direction}`}

>

<Dropdown.ItemeventKey="1">Action</Dropdown.Item>

<Dropdown.ItemeventKey="2">Another action</Dropdown.Item>

<Dropdown.ItemeventKey="3">Something else here</Dropdown.Item>

<Dropdown.Divider/>

<Dropdown.ItemeventKey="4">Separated link</Dropdown.Item>

</DropdownButton>

))}

</div>

<div>

{['up','down','start','end'].map((direction)=>(

<SplitButton

key={direction}

id={`dropdown-button-drop-${direction}`}

drop={direction}

variant="secondary"

title={`Drop ${direction}`}

>

<Dropdown.ItemeventKey="1">Action</Dropdown.Item>

<Dropdown.ItemeventKey="2

Sours: https://react-bootstrap.github.io/components/dropdowns/
React Bootstrap Tutorial

npm

npm version

A simple Dropdown Menu for React. Commonly used as a 'User Settings' menu on websites where users login.

Installation

npminstallreact-bootstrap-dropdown-menu--save

Include bootstrap in your project(if not already included)

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap//css/bootstrap.min.css" rel="stylesheet" media="all">

Usage

A simple example using OnClick events. Download and run the demo for more examples, or browse the examples.

alt tag

importReactfrom'react';import{DropdownMenu,MenuItem}from'react-bootstrap-dropdown-menu';classSettingsMenuextendsReact.Component{constructor(){super();this.deleteAccount=this.deleteAccount.bind(this);this.logout=this.logout.bind(this);}deleteAccount(e){console.log("Deleting Account")}logout(e){console.log("Logging out")}render(){return(<DropdownMenuuserName="Chris Smith"><MenuItemtext="Home"location="/home" /><MenuItemtext="Edit Profile"location="/profile" /><MenuItemtext="Change Password"location="/change-password" /><MenuItemtext="Privacy Settings"location="/privacy-settings" /><MenuItemtext="Delete Account"onClick={this.deleteAccount} /><MenuItemtext="Logout"onClick={this.logout} /></DropdownMenu>);}}exportdefaultSettingsMenu;

DropdownMenu props

NameTypeRequiredDefaultPossible ValuesDescription
userNameStringNoundefinedAny string(e.g. 'John Doe')When provided, will render 'Logged in as: {userName}' in the top MenuItem
cssObjectNoSee Css belowObject as with attributes as described belowCSS as JS variables to be overridden
positionStringNorightleft, center, rightChanges the menu's horizontal drop position relative to the trigger
triggerTypeStringNoiconicon, text, imageThe Type of drop trigger
triggerStringNoglyphicon glyphicon-cogDepends on triggerTypeFor 'icon' triggerType: Any bootstrap glyphicon(http://getbootstrap.com/components/)
For 'text' triggerType: Any String can be used
For 'image' triggerType: Path to image(e.g. "/images/myimage.png")
triggerWidthStringNo50px (only applies to triggerType='image')Any numeric value with 'px' appended(e.g. '45px')The width to render the image trigger image.
triggerHeightStringNo50px (only applies to triggerType='image')Any numeric value with 'px' appended(e.g. '45px')The height to render the image trigger image.
caratColorStringNo# (Black)Any 6 digit hex value (e.g. #F4E3A2)The color of the DropDown carat (for triggerType 'image' and 'text' only)
iconColorStringNo# (Black)Any 6 digit hex value (e.g. #F4E3A2)The color of the Bootstrap icon
fadeInBooleanNofalsetrue or falseDropdown menu will fade in when set to true
onMouseoverFunctionNoundefinedA FunctionA function that will fire when the mouse pointer hovers over the DropdownMenu trigger
onMouseoutFunctionNoundefinedA FunctionA function that will fire when the mouse pointer moves away from the DropdownMenu trigger

MenuItem props

NameTypeRequiredDefaultPossible ValuesDescription
typeStringNoundefinedseparatorA horizontal rule. text prop is not required when using this type.
textStringYesundefinedAny String valueText value of the Link in the MenuItem
disabledBooleanNofalsetrue or falseDisables a MenuItem
locationStringNoundefinedAny String valueAn absolute or relative path
linkStyleObjectNoinheritedHash containing javascript styles(not CSS). See examples for more info
onClickFunctionNoundefinedA FunctionA function that will fire when the MenuItem Link is clicked

Css Override

The following CSS(as JS) can be passed to the via the prop to override color, padding etc. NOTE: only applies to the child component.

Download Examples

gitclone https://github.com/grizzthedj/react-bootstrap-dropdown-menu.gitcdreact-bootstrap-dropdown-menunpminstallgulpdemo Browse http://localhost

Backlog

  • More Error handling.
  • Extend CSS styling so that user defined styles can be passed in as props.
Sours: https://www.npmjs.com/package/react-bootstrap-dropdown-menu

You will also be interested:

Also exported as from .

#

alignEnd

Aligns the dropdown menu to the 'end' of it's placement position. Generally this is provided by the parent component, but may also be specified as a prop directly.

type:boolean

#

childrenrequired

A render prop that returns a Menu element. The argument should spread through to a component that can accept a ref.

type:{Function ({ show: boolean, alignEnd: boolean, close: (?SyntheticEvent) => void, placement: Placement, update: () => void, forceUpdate: () => void, props: { ref: (?HTMLElement) => void, style: { [string]: string | number }, aria-labelledby: ?string }, arrowProps: { ref: (?HTMLElement) => void, style: { [string]: string | number }, }, }) => React.Element}

#

flip

Enables the Popper.js modifier, allowing the Dropdown to automatically adjust it's placement in case of overlap with the viewport or toggle. Refer to the flip docs for more info

type:boolean

#

offset

type:Offset

#

popperConfig

A set of popper options and props passed directly to react-popper's Popper component.

type:Omit<UsePopperOptions, 'enabled''placement'>

#

rootCloseEvent

Override the default event used by RootCloseWrapper.

type:RootCloseOptions['clickTrigger']

#

show

Controls the visible state of the menu, generally this is provided by the parent component, but may also be specified as a prop directly.

type:boolean

#

usePopper

Sours: https://react-bootstrap.github.io/react-overlays/api/DropdownMenu/


1702 1703 1704 1705 1706