There is a question just like this, but the answer wasn't very clear and I don't have enough "points" to comment on it.
I read https://react-bootstrap.github.io/components/buttons/ and some other documents but am unable to find my answer.
I used this article as my guide: https://www.pluralsight.com/guides/how-to-position-react-bootstrap-popover
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
.
.
.
render() {
const popover = (
<Popover id="popover-basic">
<Popover.Title as="h3">Popover title</Popover.Title>
<Popover.Content>
Popover content <strong>some strong content</strong> Normal content again
</Popover.Content>
</Popover>
);
return (
<div className='toggle container '>
<div className='form-row justify-content-center'>
<div className='col-6'>
<section class='inline-block'>
<span class="badge badge-pill badge-primary ml-2">1</span>
<h3>
Choose System Type:
</h3>
<div id="element1">
<OverlayTrigger trigger="hover" placement="right" overlay={popover}>
<Button variant="outline-primary" circle><i class="fas fa-question"></i></Button>
</OverlayTrigger>
</div>
</section>
</div>
</div>
</div>
I'd like my popover button to be a circle, but I can't find documentation on how to do that.
Can someone explicitly help me using the ? Perhaps something else? Examples help immensely. Here is a screenshot of what it looks like now...
You can set className="rounded-circle" to your button component and it will be circle.
More about similar border classes:
Bootstrap documentation
Related
I have a multi-stage dropdown component that works, but unfortunately is applied to all divs that share the same className. I.e: all items drop down when one is clicked - when I obviously just want the one clicked.
Ive tried other solutions that involve mapping, using (this) and also selecting the div by id via document query then iteration with for loops but nothing has worked. Mainly because even if I can isolate the div (say with useRef e.g.), trigging the function inherently involves applying the style change to all divs with the same classname. With this in mind, I'm pretty sure I need to change the initial css hook. Alternative is obviously to give each dropdown item its own css class which I feel would be too repetitive to even try.
Here is my code (for berevity Ive just included the dropdown and not scroll up, also just one of the items - html is identical for the other 7 items:
const [content, Toggle] = useState(styles.CT007Content)
const [TrackList, Drop] = useState(styles.songContainer)
const [artwork, Slide] = useState(styles.artworkContainer)
const [title, Darkmode] = useState(styles.releaseTitle)
const [arrow, Unlock] = useState(styles.arrow)
const open = () => {
if (arrow==styles.arrow){
Unlock(styles.arrowChecked);}
if (title==styles.releaseTitle){
Darkmode(styles.releaseTitleClicked)};
if (TrackList==styles.songContainer){
Drop(styles.songContainerOpen)};
if (content==styles.CT007Content){
Toggle(styles.CT007ContentOpen)};
if (artwork==styles.artworkContainer){
Slide(styles.artworkContainerOpen)};
html
{/* item 1 of 10 */}
<div className={styles.Release} id="CT007">
<div className={styles.releasesHeader} id="CT007">Releases (2014-2018, 2022)</div>
<div className={title} onClick={open} id="CT007">CT007
<div className={arrow} id="CT007">></div>
<div className={arrow} id="CT007">></div>
<div className={arrow} id="CT007">></div>
</div>
<content className={content} id="CT007">
<div className={TrackList} id="CT007">
<div className={styles.trackContainer} onClick={changeStyle} id="CT007">
<audio controls className={audiostyle} src="/TEX86.mp3" id="CT007">
{/* <source src="/TEX86.mp3" type = "audio/mpeg"/> */}
</audio>
<div className={styles.trackText} id="CT007">
<h4>You'll Never Get Rich</h4>
</div>
</div>
<div className={styles.trackContainer} id="CT007">
<audio controls className={audiostyle} id="CT007">
<source src="" type = "audio/mpeg"/>
</audio>
<div className={styles.trackText} id="CT007">
<h4>Death by Dole</h4>
</div>
</div>
</div>
<div className={artwork} id="CT007">
<svg src=""/>
</div>
</content>
</div>
To iterate, the functionality works fine, I just dont want it applied to all divs when only one is clicked. Many thanks in advance. Im sure it is something obvious but I am new to react, any help would be appreciated
documentQuery Selector, wrapping hook in a function for each div OnClick, mapping/for looping
I'm trying to animate the list of cards when it gets re-rendered with a different values (i.e , Popular movies to Searched movies)
I followed the documentation of framer-motion and gave the parent div and the child div the Layout property yet nothing seems to change or happen.
If there's a different way of animating this I would love to hear
I've added the code here below :
the parent div :
<motion.div Layout className='movie-container'>
{movie.map((moviee) => (
<MoviePreview
moviee={moviee}
setFavorites={setFavorites}
favorites={favorites}
setTrailer={setTrailer}
setTrailerWindow={setTrailerWindow}
/>
))}
</motion.div>
the child div :
<motion.div Layout className='movie-card-container'>
<article className='movie-card'>
<h3>{moviee.title} </h3>
<div className='trailer-favorite'>
<button onClick={(e) => onHandleTrailer(moviee.id)} className='trailer-btn'>
Watch Trailer
</button>
<button onClick={() => addFavorite(moviee)} className='heart'>
💗
</button>
</div>
<img src={`https://image.tmdb.org/t/p/w500/${moviee.poster_path}`}></img>
<div className='movie-overview'>
<p>{!moviee.overview ? 'No description available.' : moviee.overview}</p>
</div>
</article>
</motion.div>
Thanks for any kind of help!
I'm remaking an old site with react. Everything is going fine so far, but I just made a new component who's images won't show. They are visible in the main class, but not in the component class. Also, if I paste the entire component into the main class, the images still won't show. I have to cut the images out of the component and paste elsewhere for them to show anything.
The faulty component class looks like this...
import React from 'react';
import rock from '../images/pngs/rock.png';
import none from '../images/pngs/none.png';
import blue from '../images/pngs/blue.png';
import flash from '../images/pngs/flash.png';
import estim from '../images/pngs/estim.png';
import urban from '../images/pngs/urban.png';
import intl from '../images/pngs/intl.png';
export default class Radio extends React.Component {
render() {
return (
<section className="radio">
<div className="septagon">
<div className="labels">
<p>
<em></em>
</p>
<p>Radio</p>
<p>Off</p>
</div>
<span className="deg40"><img src={rock} alt="" /></span>
<span className="deg90"><img src={none} alt="" /></span>
<span className="deg140"><img src={blue} alt="" /></span>
<span className="deg195"><img src={flash} alt="" /></span>
<span className="deg245"><img src={estim} alt="" /></span>
<span className="deg295"><img src={urban} alt="" /></span>
<span className="deg345"><img src={intl} alt="" /></span>
<audio id="playmusic" preload="none"><source type="audio/mpeg" /></audio>
</div>
</section>
)
}
}
The original site (so you know what it's supposed to look like) is...
http://matiny.altervista.org/VI/
If you hold down the Q button you'll see a circle of icons, and that's what I want to show. Unfortunately, the images are invisible.
You can both use require and import here
Using Require :
const rock = require('../images/pngs/rock.png');
And then destructure it in image src.or you can do it by using import
Using Import :
import * as rock from '../images/pngs/rock.png';
And Use src= {rock.default} while destructuring it in image src.
Sorry for wasting you guys' time. I had an opacity: 0 rule that I didn't notice.
I have been trying to do this for a while with CSS and also data attributes but it is driving me up the wall. It's easy to remove data-iconshadow from buttons, but from collapsibles, not so.
In the Developer Console I can see JQM is applying "data-iconshadow='true'" even after I told it not to using this code (in several places):
<div data-role="collapsible-set" data-iconshadow="false">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
Yet it still generates this code:
<span class="ui-btn-inner"><span class="ui-btn-text">0-12 Months<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-arrow-u"> </span></span>
Yeah it is still writing the data-iconshadow to be true. And I'm not even sure how to target injected attributes with CSS so I am not having much luck with that either. If someone could shed some light on the subject, I would be most grateful.
Working example: http://jsfiddle.net/Gajotres/2NCjb/
HTML:
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u" id="custom-collapsible">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
CSS:
#custom-collapsible h2 .ui-btn:after {
background: transparent !important;
}
Using just Angular JS Animate and Css Animation, I am trying to create an Expand/Collapse (Accordion) similar to the bootstrap collapse seen here: http://getbootstrap.com/javascript/#collapse
I have an issue with the expandable items, they pop back and forth depending on height of the expanded "show" content. See my Plunker for more a visual
My work so far:
var expandCollapseApp = angular.module('expandCollapseApp', ['ngAnimate']);
expandCollapseApp.controller('expandCollapseCtrl', function ($scope) {
$scope.active = true;
$scope.active1 = true;
});
http://plnkr.co/edit/wBYsFM?p=info
You should use UI Bootstrap Accordion. This component is written in pure AngularJS.
<div class="list card benefit-listCard">
<h3 class="accordion" ng-class="{active:accordion1}">
<a href ng-click="accordion1=!accordion1" style="padding:0px;"><div class="item item-avatar benefit-itemAvatar">
<img src="img/aws.png" class="service-img">
<h2>Amazon Web Services</h2>
<button class="button button-small button-outline button-calm detail-button">Get Deals</button> <div
class="fa fa-fw list-arrow" ng-class="{'ion-minus-circled': accordion1, 'ion-plus-circled' : !accordion1}" style="float:right;color:#44c8f5;font-size:25px;margin-top:10px;">
</div>
</div>
</a>
Lorem Ipsum1
Cytrus Pay
Get Deals
Lorem Ipsum2.
Amazon Web Services
Get Deals
Lorem Ipsum 3
jQuery UI has a similar method you could use?
http://jqueryui.com/accordion/