React bootstrap list

React bootstrap list DEFAULT

React-Bootstrap ListGroup Component

React-Bootstrap is a front-end framework that was designed keeping react in mind. ListGroup Componentprovides a way to display a series of content. It is a powerful and flexible component. We can use the following approach in ReactJS to use the react-bootstrap ListGroup Component.

ListGroup Props:

  • activeKey: It is used to mark the ListGroup item as active.
  • as: It can be used as a custom element type for this component.
  • defaultActiveKey: It is used to indicate the default Active Key.
  • horizontal: It is used to change the flow of the list group items to horizontal from its vertical alignment.
  • onSelect: It is a callback that is triggered when a ListGroup item is selected.
  • variant: It is used to add a variant to the list group.
  • bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

ListGroup.Item Props:

  • action: It is used to marks the ListGroupItem as actionable.
  • active: It is used to mark the ListGroup item as active.
  • as: It can be used as a custom element type for this component.
  • disabled: It is used to make the list item state as disabled.
  • eventKey: It is used to uniquely identify for this component
  • href: It is used to pass the href attribute for this element.
  • onClick: It is a callback that is triggered when a ListGroup item is clicked.
  • variant: It is used to add a variant to the list group item.
  • 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/list-group/




My Personal Notesarrow_drop_up
Sours: https://www.geeksforgeeks.org/react-bootstrap-listgroup-component/

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

#Centers by default

<ListGroup><ListGroupItem>Item 1</ListGroupItem><ListGroupItem>Item 2</ListGroupItem><ListGroupItem></ListGroupItem></ListGroup>;

#Linked

Set the or prop on , to create a linked or clickable element.

functionalertClicked(){alert('You clicked the third ListGroupItem');}render(<ListGroup><ListGroupItemhref="#link1">Link 1</ListGroupItem><ListGroupItemhref="#link2">Link 2</ListGroupItem><ListGroupItemonClick={alertClicked}>Trigger an alert</ListGroupItem></ListGroup>);

#Styling by state

Set the or prop to to mark or disable the item.

<ListGroup><ListGroupItemhref="#"active> Link 1</ListGroupItem><ListGroupItemhref="#">Link 2</ListGroupItem><ListGroupItemhref="#"disabled> Link 3</ListGroupItem></ListGroup>;

#Styling by color

Set the prop to style the item

<ListGroup><ListGroupItembsStyle="success">Success</ListGroupItem><ListGroupItembsStyle="info">Info</ListGroupItem><ListGroupItembsStyle="warning">Warning</ListGroupItem><ListGroupItembsStyle="danger">Danger</ListGroupItem></ListGroup>;

#With header

Set the prop to create a structured item, with a heading and a body area.

<ListGroup><ListGroupItemheader="Heading 1">Some body text</ListGroupItem><ListGroupItemheader="Heading 2"href="#"> Linked item </ListGroupItem><ListGroupItemheader="Heading 3"bsStyle="danger"> Danger styling </ListGroupItem></ListGroup>;

#With custom component children

When using ListGroupItems directly, ListGroup looks at whether the items have href or onClick props to determine which DOM elements to emit. However, with custom item components as children to , set the prop to specify which element should output.

  • Custom Child 1
  • Custom Child 2
  • Custom Child 3
functionCustomComponent({ children }){return(<liclassName="list-group-item"onClick={()=>{}}>{children}</li>);}render(<ListGroupcomponentClass="ul"><CustomComponent>Custom Child 1</CustomComponent><CustomComponent>Custom Child 2</CustomComponent><CustomComponent>Custom Child 3</CustomComponent></ListGroup>);

#Props

#ListGroup[source]

NameTypeDefaultDescription
componentClass

elementType

You can use a custom element type for this component.

If not specified, it will be treated as if every child is a non-actionable , and otherwise.

bsClass

string

'list-group'

Base CSS class and prefix for the component. Generally one should only change to provide new, non-Bootstrap, CSS styles for a component.

#ListGroupItem[source]

NameTypeDefaultDescription
active

any

disabled

any

header

node

listItem

boolean

false
onClick

function

href

string

type

string

bsStyle

one of: , , ,

Component visual or contextual style variants.

bsClass

string

'list-group-item'

Base CSS class and prefix for the component. Generally one should only change to provide new, non-Bootstrap, CSS styles for a component.

Sours: https://react-bootstrap-v3.netlify.app/components/list-group/
  1. Sleep sound effect
  2. Cricut brand shirts
  3. Littmann stethoscope amazon
  4. Nfl combine results
  5. Gypsy cast list

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

render(){ let content = this.props.complete ? <s>{this.props.content}</s> : this.props.content; return ( <ListGroupItem href="#" className={this.props.visible} onClick={this.props.toggleAction}> {content} </ListGroupItem> ); }
const ContactListItem = ({contact}) => <ListGroupItem> <Link to={`/contact/${contact.id}`}> <h4>{contact.name}</h4> </Link> </ListGroupItem>
const Results = () => ( <Container> <h2>Results list</h2> <ListGroup> <ListGroupItem href="#" active>Link 1</ListGroupItem> <ListGroupItem href="#">Link 2</ListGroupItem> <ListGroupItem href="#" disabled>Link 3</ListGroupItem> </ListGroup> </Container> )
render() { let { task } = this.props; return (<ListGroupItem> {task.get('content')} <Button bsSize="xsmall" bsStyle="danger" className="pull-right" onClick={this.removeTask}> <Glyphicon glyph="remove" /> </Button> </ListGroupItem>); }
const Navigation = () => ( <ListGroup> {routes.map((route, index) => ( <LinkContainer to={route.path} key={index}> <ListGroupItem header={route.title}>{route.desc}</ListGroupItem> </LinkContainer> ))} </ListGroup> )
const DocumentsList = ({ documents, history }) => ( documents.length > 0 ? <ListGroup className="DocumentsList"> {documents.map(({ _id, title }) => ( <ListGroupItem key={_id} onClick={() => history.push(`/documents/${_id}`)}> { title } </ListGroupItem> ))} </ListGroup> : <Alert bsStyle="warning">No documents yet.</Alert> )
render() { const { id, name, order, promote } = this.props.project; return ( <ListGroupItem header={name} active={id===this.props.select} href={`/console/project/${id}`}> {`${order&&('Order:'+order)||''} ${promote&&('Banner Slot:'+promote)||''}`} </ListGroupItem> ); }
function TodoListItem(props) { const { onActualTodoChange, todoID, text, completed } = props; return ( <ListGroupItem onClick={() => onActualTodoChange(todoID)} id={todoID} style={{textDecoration: completed ? 'line-through' : 'none', fontWeight: completed ? 'normal' : 'bold'}} > {text} </ListGroupItem> ); }
function ProfileTodo({text, completed}) { return ( <div> {(completed === false) && <ListGroupItem> {text} </ListGroupItem>} </div> ); }
render () { if (!this.props.repositories) { return } return ( <ListGroup> {this.props.repositories.map((repo) => ( <ListGroupItem key={String(repo.id)} target='_blank' href={repo.html_url}> <b>{repo.name}</b> {repo.description && `: ${repo.description}`} </ListGroupItem> ))} </ListGroup> ) }
const getContentItems = () => ( Panels.map((item) => ( <ListGroupItem key={`content-item-${item.id}`}> <a href={`#${item.id}`}>{item.header}</a> </ListGroupItem> )) )
render(){ return( <div> <ListGroupItem id={this.props.wordId} onClick={this.props.handleClickOnWord} active={this.props.isActive} value={this.props.wordId}> {this.props.wordId}. {this.props.word} </ListGroupItem> </div> ); }
const AboutPage = () => { return ( <div className="container"> <HeaderContainer /> <ListGroup> <ListGroupItem> <h4>Version</h4> <small></small> </ListGroupItem> </ListGroup> </div> ); }
render() { return ( <div className="greeting-list"> <ListGroupItem >{this.props.greeting.content} <button onClick={() => this.handleDelete()}>X</button> </ListGroupItem> </div> ) }
render(){ return( <div> <ListGroupItem id={this.props.exampleId} onClick={this.props.handleClickOnExample} active={this.props.isActive} value={this.props.exampleId}> {this.props.exampleId}. {this.props.example} </ListGroupItem> </div> ); }
Sours: https://www.tabnine.com/code/javascript/classes/react-bootstrap/ListGroupItem

React Bootstrap 5 List group component

List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Note: Read the API tab to find all available options and advanced customization

Basic example

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Active items

Add property to a to indicate the current active selection.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Disabled items

Add property to a to make it appear disabled. Note that some elements with will also require custom JavaScript to fully disable their click events (e.g., links).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Links and buttons

Use or property to create actionable list group items with hover, disabled, and active states by adding property. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like s or s) don’t provide a click or tap affordance.

Be sure to not use the standard classes here.

Links

Cras justo odio Dapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros

Buttons

With s, you can also make use of the property. Sadly, s don’t support the disabled attribute.

Flush

Add property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Horizontal

Add property to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant using to make a list group horizontal starting at that breakpoint’s . Currently horizontal list groups cannot be combined with flush list groups.

ProTip: Want equal-width list group items when horizontal? Add to each list group item.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

Contextual classes

Use property to style list items with a stateful background and color.

  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

property also works with property. Note the addition of the hover styles here not present in the previous example. Also supported is the state; apply it to indicate an active selection on a contextual list group item.

Dapibus ac facilisis inA simple primary list group itemA simple secondary list group itemA simple success list group itemA simple danger list group itemA simple warning list group itemA simple info list group itemA simple light list group itemA simple dark list group item

Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the class.

Badges

Add badges to any list group item to show unread counts, activity, and more with the help of some flexbox utilities.

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

Checkboxes

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without s, but please remember to include an attribute and value for accessibility.

And if you want s as the property for large hit areas, you can do that, too.

Sours: https://mdbootstrap.com/docs/b5/react/components/list-group/

List react bootstrap

React List Group - Bootstrap 4 & Material Design

React Bootstrap List Group

React Bootstrap list group is a flexible component which displays not only simple list of elements but complex custom content.

Basic example

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Labels

Add labels to any list group item to show unread counts, activity, etc.

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

Linked items

Linkify list group items using the prop and an optional prop.

Cras justo odio Dapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros

Links and buttons

To create actionable list group items with hover or disabled states use appropriate attributes, namely and .

Cras justo odio Dapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros

Contextual classes

Use prop to style list items.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Custom content

Add nearly any HTML within, even for linked list groups like the one below.

Sours: https://mdbootstrap.com/docs/react/components/list-group/
TodoList project Using REACTJS, React-Bootstrap, Bootstrap

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

const ListItem = ({ name, category }) => { return ( <ListGroup.Item variant='dark'> <Row> <Col xs={12} md={6}> {name} </Col> <Col xs={12} md={6}> {category} </Col> </Row> </ListGroup.Item> ); }
const Profile = ({ user: { name, email } }) => { return ( <> <h1>Profile</h1> <ListGroup> <ListGroup.Item>Name: {name}</ListGroup.Item> <ListGroup.Item>Email: {email}</ListGroup.Item> </ListGroup> </> ); }
const ListItem = (props) => { const item = props.isMobile ? ( <ListGroup.Item className={props.className}> <NavLink to={props.link} className="link"> <SVGIcon name={props.name} isMobile={true} /> </NavLink> </ListGroup.Item> ) : ( <ListGroup.Item className={props.className}> <SVGIcon name={props.name} /> <NavLink to={props.link} className="link"> <b>{props.name}</b> </NavLink> </ListGroup.Item> ); return item; }
render() { console.log(this.props); return ( <Accordion> <Card> <Card.Header> <Accordion.Toggle as={Button} variant="link" eventKey="0"> <div className="d-flex justify-content-between"> <span>Ver horarios de apertura</span> <span>{this.props.isOpen}</span> </div> </Accordion.Toggle> </Card.Header> <Accordion.Collapse eventKey="0"> <Card.Body> <ListGroup> {this.props.openingHours.map((oh, i) => ( <ListGroup.Item key={i}>{oh}</ListGroup.Item> ))} </ListGroup> </Card.Body> </Accordion.Collapse> </Card> </Accordion> ); }
this.state.commentList.forEach((commentItem) => { comments.push( <ListGroup.Item> <div className="comment-item"> <div className="image-container"> <Image src={userIcon2} alt="icon" rounded className="user-image" /> </div> <div className="comment-container"> <div className="commenting-user">{commentItem.userName}</div> <div className="comment-text">{commentItem.comment}</div> </div> </div> </ListGroup.Item> ); });
render() { const { searchPlaceholder, results } = this.props; const { searchText } = this.state; const listGroupItems = results.map((result, index) => <ListGroup.Item key={index} data-index={index} action onClick={this.handleSelection}>{result}</ListGroup.Item>); return ( <div className="search-box"> <Form.Control type="text" placeholder={searchPlaceholder} value={searchText} onChange={this.handleInputChange}/> <ListGroup className="search-results"> {listGroupItems} </ListGroup> </div> ) }
}else{ return ( <ListGroup.Item href={"#" + course.id}> <div className="d-flex w justify-content-between"> <div className="left">
const BooksList = ({ items }) => { return ( <div className="BooksList"> <ListGroup> {items && items.length ? ( items.map((item, index) => ( <ListGroup.Item key={item.id} className={index % 2 ? "BooksList__Item--Alternate" : ""} > <em className="BooksList__Item__Id">{item.id}</em>{" "} <span className="BooksList__Item__Title">{item.book_title}</span> </ListGroup.Item> )) ) : ( <Alert variant="primary">No books found</Alert> )} </ListGroup> </div> ); }
<Col sm={4}> <ListGroup> <ListGroup.Item action href='#profile' variant='dark'> Profile </ListGroup.Item> <ListGroup.Item action href='#cart' variant='dark'> Purchase History </ListGroup.Item> <ListGroup.Item action href='#updateprofile' variant='dark'> Update Profile </ListGroup.Item>
this.state.listOfApplicants .map((data, index) => { return ( <ListGroup.Item key={index}> <Link to={`/profil/${data.candidate_id}`}> <h2 style={{float: "left"}}>{data.fullname}</h2>
const AdminPanel = () => { return ( <Tab.Container id='list-group-tabs-example' defaultActiveKey='#add_product'> <Row> <Col sm={4}> <ListGroup> <ListGroup.Item action href='#add_product' variant='dark'> Add New Product </ListGroup.Item> <ListGroup.Item action href='#list_product' variant='dark'> List All </ListGroup.Item> </ListGroup> </Col> <Col sm={8}> <Tab.Content> <Tab.Pane eventKey='#add_product'> <AddProduct /> </Tab.Pane> <Tab.Pane eventKey='#list_product'> <ProductList /> </Tab.Pane> </Tab.Content> </Col> </Row> </Tab.Container> ); }
{notifications.map((notification, index) => { return ( <ListGroup.Item style={ notification.newNotification
const Cart = ({ history }) => { if (history === undefined || history?.length <= 0) { return ( <> <h1>Purchase History</h1> <p>There is no purchases yet</p> </> ); } const purchases = history.map((item) => ( <ListGroup.Item>item</ListGroup.Item> )); return ( <> <h1>Purchase history</h1> <ListGroup>{purchases}</ListGroup> </> ); }
{notifications?.map((notification, index) => { return ( <ListGroup.Item key={index} style={
Sours: https://www.tabnine.com/code/javascript/classes/react-bootstrap/ListGroup.Item

You will also be interested:

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+list


1654 1655 1656 1657 1658