I just copied the code of bootstrap accordion from bootstrap components https://getbootstrap.com/docs/5.0/components/accordion/ ,
Expected that there will be a dropdown but it is not there
Do not want to use the react bootstrap component https://react-bootstrap.netlify.app/components/accordion/
import React from "react";
export default function about(){
return (
<div className="container">
<div className="accordion" id="accordionPanelsStayOpenExample">
<div className="accordion-item">
<h2 className="accordion-header" id="panelsStayOpen-headingOne">
<button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="panelsStayOpen-collapseOne" className="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
<div className="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="panelsStayOpen-headingTwo">
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" className="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div className="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="panelsStayOpen-headingThree">
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="panelsStayOpen-collapseThree" className="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
<div className="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
);
}
I also imported import 'bootstrap/dist/css/bootstrap.min.css'; in app.js
but on rendering only the top accordion is showing cannot drop down other accordion.
Noob at react :)
You also need to install Bootstrap JS...
npm install bootstrap#latest --save
Then the data-bs- attributes will work to activate the Accordion Collapse component.
Demo
I am not sure if you have imported bootstrap.js or not.
but first install the bootstrap package from npm with this commmand:
npm install bootstrap#latest --save
Then import the bootstrap css and JS in your application. As I can see to work accordian it needs bootstrap.js should be included. Include below code in your react application.
import 'bootstrap/dist/css/bootstrap.min.css'
import "bootstrap/dist/js/bootstrap.bundle.min.js"
Note: I will suggest to use useEffect hook to import bootsrtarp JS, but to try working above method also work.
useEffect(() => {
require("bootstrap/dist/js/bootstrap.bundle.min.js");
}, []);
Here is working example: https://codesandbox.io/embed/youthful-dawn-43lx6e?fontsize=14&hidenavigation=1&theme=dark
The easiest way to solve your problem is to install Bootstrap, wich you didn't do it seems.
npm install react-bootstrap#next bootstrap#5.1.1
Then in the file where you want to use the component from Bootstrap, you must import the component, like so:
import Accordion from 'react-bootstrap/Accordion'
Note: Replace Accordion by whatever other component you would need.
Then in your code you can call this component like so:
<Accordion defaultActiveKey="0">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</Accordion.Body>
</Accordion.Item>
</Accordion>
You can learn more on this topic here: https://react-bootstrap.netlify.app/components/accordion/
If you want to use your code with bootstrap without react bootstrap component then copy the following lines into the index.html file head which will be available in react folder -> public -> index.html
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
This links the bootstrap stylesheet to your react app.
Read more at bootstrap getting started.
Related
I use reactstrap Modal but somehow when isOpen is true, the modal just appears as plain text instead of a box shown over the window. When I use the same Modal code to run a new component, the Modal is still rendered as happened so it is not the CSS. How should I modify my Modal
function App() {
const [people, setPeople] = useState(data);
const [modalOpen, setModalOpen] = useState(false);
const toggle = () => {
setModalOpen(!modalOpen);
console.log(modalOpen)
}
return (
<main>
<section className="container">
<h3>
{people.length} birthday today
</h3>
<List people={people} />
<button onClick={() => setPeople([])}>
Clear All
</button>
<button onClick={() => setModalOpen(!modalOpen)}>
Add birthday
</button>
<Modal isOpen={modalOpen} toggle={toggle} className="modal">
<ModalHeader toggle={toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggle}>Do Something</Button>{' '}
<Button color="secondary" onClick={toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</section>
</main>
)
}
You have to import bootstrap stylesheet like this import "bootstrap/dist/css/bootstrap.min.css"; (and install bootstrap if you haven't) and remove modal class name from Modal component. Here's CSB example
I have this part of code:
<Panel>
<Panel.Heading>
<Panel.Title toggle>
Hello
</Panel.Title>
</Panel.Heading>
<Panel.Collapse>
<Panel.Body>
Really wide body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Panel.Body>
</Panel.Collapse>
</Panel>
I wish to change Panel.Heading color, but there are no docs regarding this element. Anyone know how to do it?
Thanks in advance
To change the color of the heading for a panel, you can set the bsStyle prop of Panel, like the following:
<Panel bsStyle="primary">
<Panel.heading>
...
This will set the color of the top of the panel, based on Bootstrap's color styles.
Values you can use for bsStyle are:
default
primary
success
info
warning
danger
Here is a code sandbox that demonstrates this.
It's difficult to find documentation for this because react-bootstrap (and reactstrap) now use Bootstrap v4. Panel was a part of Bootstrap v3, but has now been replaced with Card. By digging around in some of the older versions of react-bootstrap (specifically their bs3-dev branch), you can look at how they used Panel back then.
You'll notice that, in the code sandbox, we need to add some older versions of the dependencies (bootstrap at 3.4.1 and react-bootstrap at 0.32.1).
Hope this helps!
Not familiar with react-bootstrap but just style with css? or
style={{backgroundColor:"anyColor"}}
I am trying to implement Drawer (Offcanvas) component in react, so here the requirement is, there will be one Drawer whose component will change dynamically, consider something like bootstrap modal, you have one modal but you can trigger that modal from anywhere from the page just write data-toggle="modal" data-target="#modalid", but implementing this in react requires communicating between 2 root components & setting drawers component data from the triggering component or button. I have seen people added trigger & modal in same component & than passing state.toggle flag like below:
render() {
return (
<div>
<Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
<Drawer isOpen={this.state.drawer} toggle={this.toggle} className={this.props.className}>
<DrawerBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</DrawerBody>
</Drawer>
</div>
);
}
But in my case, there is no relationship between components, this component <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button> will be added in multiple places & there is no coupling between Drawer & Button. So how I can achieve this without using any state management like Redux or Flux or anything else
I've install Ratchet package from Atpmosphere.
CSS work fine, but some script not. For example, Modal. I try to invoke it simply by adding the example code from Ratchet website to test:
Open modal
<div id="myModalexample" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#myModalexample"></a>
<h1 class="title">Modal</h1>
</header>
<div class="content">
<p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</div>
</div>
but nothing appear. No errors appear in the JS console.
How can I use Ratchet Modal in Meteor? Which kind of Meteor mobile UI framework you suggest me to prevent this error (if Ratchet is bad to use)?
Thanks!
Essentially I am trying to get buttons to set ng-class on a div. The buttons are created from an array using ng-repeat and the array will grow over time. I based my idea for how to code this on the last example on this page of the AngularJS documentation which does not use a function with ng-click. I am new to AngularJS and still trying to get away from my jQuery mindset so let me know if this is not the best method to go about doing this.
jsfiddle: http://jsfiddle.net/E2GB9/ - not sure why its not rendering the bootstrap 100% but it shouldn't matter..
When I use developer tools to check ng-click post load it looks correct: ng-click="appliedStyle='example1'" but clicking the button does not set appliedStyle.
html:
<body ng-app>
<div ng-controller="TypeCtrl">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Test Area</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="source">
<div class="hero-unit" ng-class="appliedStyle">
<h1>H1 Header</h1>
<h2>H2 Header</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
<ul class="unstyled">
<li ng-repeat="style in styles">
<span>Name: {{style.name}}</span><br>
<span>H1: {{style.h1}}</span><br>
<span>H2: {{style.h2}}</span><br>
<span>P: {{style.p}}</span><br>
<button class="btn-small" type="submit" ng-click="appliedStyle='{{style.className}}'">Apply {{style.name}}</button>
</li>
</ul>
The Applied Style is : {{appliedStyle}}
</div>
js:
function TypeCtrl($scope) {
$scope.styles = [
{name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'}];
}
css:
.example1 h1{
font-size: 10px;
color: red;
}
.example1 h2{
font-size: 8px;
}
.example1 p{
font-size: 6px;
}
Change your controller by adding a method like this:
function TypeCtrl($scope) {
$scope.styles = [
{name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'}];
}
$scope.applyStyle = function(style) {
$scope.appliedStyle=style.className;
}
}
Then simply do this in your code:
<button class="btn-small" type="submit" ng-click="applyStyle( style )">
The long answer is that javascript with an embedded {{ }} isn't a valid expression because ng-click is using $parse service which doesn't handle {{ }} syntax. I'd just use functions because you want to put your code in Javascript and out of your templates. Keep your code separated.
Use scope' $parent and this syntax:
ng-click="$parent.appliedStyle=style.className"
Working fiddle: http://jsfiddle.net/cherniv/E2GB9/1/