React bootstrap list

React bootstrap list DEFAULT

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

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/
  1. Petstablished adoption form
  2. Aaa duplicate title
  3. Virginia deed calculation

List groups

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.

Basic Example#

<ListGroup>

<ListGroup.Item>Cras justo odio</ListGroup.Item>

<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>

<ListGroup.Item>Morbi leo risus</ListGroup.Item>

<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>

<ListGroup.Item>Vestibulum at eros</ListGroup.Item>

</ListGroup>

Active items#

Set the prop to indicate the list groups current active selection.

<ListGroupas="ul">

<ListGroup.Itemas="li"active>

Cras justo odio

</ListGroup.Item>

<ListGroup.Itemas="li">Dapibus ac facilisis in</ListGroup.Item>

<ListGroup.Itemas="li"disabled>

Morbi leo risus

</ListGroup.Item>

<ListGroup.Itemas="li">Porta ac consectetur ac</ListGroup.Item>

</ListGroup>

Disabled items#

Set the prop to prevent actions on a . For elements that aren't naturally disable-able (like anchors) handlers are added that call to mimick disabled behavior.

<ListGroup>

<ListGroup.Itemdisabled>Cras justo odio</ListGroup.Item>

<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>

<ListGroup.Item>Morbi leo risus</ListGroup.Item>

<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>

</ListGroup>

Actionable items#

Toggle the prop to create actionable list group items, with disabled, hover and active styles. List item actions will render a or (depending on the presence of an ) by default but can be overridden by setting the prop as usual.

List items are distinct from plain items to ensure that click or tap affordances aren't applied to non-interactive items.

functionalertClicked(){

alert('You clicked the third ListGroupItem');

}

render(

<ListGroupdefaultActiveKey="#link1">

<ListGroup.Itemactionhref="#link1">

Link 1

</ListGroup.Item>

<ListGroup.Itemactionhref="#link2"disabled>

Link 2

</ListGroup.Item>

<ListGroup.ItemactiononClick={alertClicked}>

This one is a button

</ListGroup.Item>

</ListGroup>,

);

Flush#

Add the variant to remove outer borders and rounded corners to render list group items edge-to-edge in a parent container such as a .

<ListGroupvariant="flush">

<ListGroup.Item>Cras justo odio</ListGroup.Item>

<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>

<ListGroup.Item>Morbi leo risus</ListGroup.Item>

<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>

</ListGroup>

Horizontal#

Use the prop to make the ListGroup render horizontally. Currently horizontal list groups cannot be combined with flush list groups.

<ListGrouphorizontal>

<ListGroup.Item>This</ListGroup.Item>

<ListGroup.Item>ListGroup</ListGroup.Item>

<ListGroup.Item>renders</ListGroup.Item>

<ListGroup.Item>horizontally!</ListGroup.Item>

</ListGroup>

There are responsive variants to : setting it to makes the list group horizontal starting at that breakpoint’s .

['sm','md','lg','xl','xxl'].map((breakpoint, idx)=>(

<ListGrouphorizontal={breakpoint}className="my-2"key={idx}>

<ListGroup.Item>This ListGroup</ListGroup.Item>

<ListGroup.Item>renders horizontally</ListGroup.Item>

<ListGroup.Item>on {breakpoint}</ListGroup.Item>

<ListGroup.Item>and above!</ListGroup.Item>

</ListGroup>

));

Contextual classes#

Use contextual variants on s to style them with a stateful background and color.

<ListGroup>

<ListGroup.Item>No style</ListGroup.Item>

<ListGroup.Itemvariant="primary">Primary</ListGroup.Item>

<ListGroup.Itemvariant="secondary">Secondary</ListGroup.Item>

<ListGroup.Itemvariant="success">Success</ListGroup.Item>

<ListGroup.Itemvariant="danger">Danger</ListGroup.Item>

<ListGroup.Itemvariant="warning">Warning</ListGroup.Item>

<ListGroup.Itemvariant="info">Info</ListGroup.Item>

<ListGroup.Itemvariant="light">Light</ListGroup.Item>

<ListGroup.Itemvariant="dark">Dark</ListGroup.Item>

</ListGroup>

When paired with s, additional hover and active styles apply.

<ListGroup>

<ListGroup.Item>No style</ListGroup.Item>

<ListGroup.Itemvariant="primary">Primary</ListGroup.Item>

<ListGroup.Itemactionvariant="secondary">

Secondary

</ListGroup.Item>

<ListGroup.Itemactionvariant="success">

Success

</ListGroup.Item>

<ListGroup.Itemactionvariant="danger">

Danger

</ListGroup.Item>

<ListGroup.Itemactionvariant="warning">

Warning

</ListGroup.Item>

<ListGroup.Itemactionvariant="info">

Info

</ListGroup.Item>

<ListGroup.Itemactionvariant="light">

Light

</ListGroup.Item>

<ListGroup.Itemactionvariant="dark">

Dark

</ListGroup.Item>

</ListGroup>

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.

Tabbed Interfaces#

You can also use the Tab components to create ARIA compliant tabbable interfaces with the component. Swap out the component for the list group and you are good to go.

<Tab.Containerid="list-group-tabs-example"defaultActiveKey="#link1">

<Row>

<Colsm={4}>

<ListGroup>

<ListGroup.Itemactionhref="#link1">

Link 1

</ListGroup.Item>

<ListGroup.Itemactionhref="#link2">

Link 2

</ListGroup.Item>

</ListGroup>

</Col>

<Colsm={8}>

<Tab.Content>

<Tab.PaneeventKey="#link1">

<Sonnet/>

</Tab.Pane>

<Tab.PaneeventKey="#link2">

<Sonnet/>

</Tab.Pane>

</Tab.Content>

</Col>

</Row>

</Tab.Container>

API#

ListGroup#view source file

Copy import code for the ListGroup component
NameTypeDefaultDescription
as

elementType

You can use a custom element type for this component.

horizontal

| | | | |

Changes the flow of the list group items from vertical to horizontal. A value of (the default) sets it to vertical for all breakpoints; Just including the prop sets it for all breakpoints, while makes the list group horizontal starting at that breakpoint’s .

variant

Adds a variant to the list-group

bsPrefix

string

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

ListGroup.Item#view source file

Copy import code for the ListGroup component
NameTypeDefaultDescription
action

boolean

Marks a ListGroupItem as actionable, applying additional hover, active and disabled styles for links and buttons.

active

boolean

Sets list item as active

as

elementType

You can use a custom element type for this component. For none items, items render as . For actions the default is an achor or button element depending on whether a is provided.

disabled

boolean

Sets list item state as disabled

eventKey

string | number

A unique identifier for the Component, the makes it distinguishable from others in a set. Similar to React's prop, in that it only needs to be unique amongst the Components siblings, not globally.

href

string

onClick

function

variant

| | | | | | |

Sets contextual classes for list item

bsPrefix

string

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Sours: https://react-bootstrap.github.io/components/list-group/
Make a Product Inventory List using REACTJS and Bootstrap

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/

List react bootstrap

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/
Tutorial ReactJS Bootstrap

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/

Similar news:

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


1213 1214 1215 1216 1217