is there any way to have img and Icon Corner Icon using Semantic Ui. so i need to have the img show and add icon to it
<span>
<i class="huge icons">
<img src="test.jpg"></img>
<i class="corner add icon"></i>
</i>
<span>
I'm assuming that you are using semantic-ui-react.
You can do:
<Icon.Group size='huge'>
<img src="test.jpg" />
<Icon corner name='add' />
</Icon.Group>
You can find more examples HERE
Related
I have used Bootstrap (bundled with Popper) in my project to show a Tooltip when you hover on a button. I use the code from Bootstrap docs. However the tooltip is not visible.
<li className="nav-item">
<button type="button" className="btn grad-text"
data-bs-toggle="tooltip" data-bs-placement="top"
title="Meet the Algorithms"
>
<i className="fas fa-solid fa-laptop-code fa-lg"></i>
</button>
</li>
The above code here shows title on bottom on hover. That was visible even before I added
data-bs-toggle="tooltip" data-bs-placement="top"
to my <button> element. Below is the screenshot of the same.
I am using raw Bootstrap not React-Bootstrap and the version I am using is 5.2.3
Can anyone help me with how to show the tooltip like Bootstrap Tooltip over here. Thank you.
when the user scrolls the screen, I need to know the currently displayed div id to set the div key selected.
<button
type="button"
//here, I want to access current displayed div id
// I need to add some css class based on current displayed div id
className={`header_link ${
current_displayed_div_id === "Video" ? "selected" : "" // here I need to check
}`}
onClick={() => {
scrollTo(videoRef.current);
}}
>
Price
</button>
//here is my div using creatRef
<div
className="section"
height:
id="Video"
ref={videoRef} style={{ "auto" }}
>
<div>
<div className="nav-item">
<span className="nav-link">
<i className="icofont icofont-contacts"></i>
{translate("video")}
</span>
<div className="material-border"></div>
</div>
</div>
<div className="mt-4 text-center">
<div className="embed-responsive embed-responsive-16by9">
<iframe
src={this.props.datatab.video}
title="video"
>
</iframe>
</div>
</div>
</div>
when user scrolls the screen, I need to know the currently displayed div id to set the div key selected.
You could use the browser's native Intersection Observer API to track if an element is on screen and integrate this into your React component setup. Or you could use a React library like https://github.com/researchgate/react-intersection-observer or https://github.com/fkhadra/react-on-screen which should work out of the box.
I have a simple side nav menu made using react-burger-menu, as shown here
return (
<Menu right pageWrapId={ "page-wrap"} outerContainerId={"outer-container"}>
<a id="educationLink" className="menu-item" href="#education">Education</a>
<br/>
<a id="workHistoryLink" className="menu-item" href="#workHistory">Work History</a>
<br/>
<a id="hobbiesLink" className="menu-item" href="#hobbies">Hobbies and Lifestyle</a>
<br/>
<a id="contactLink" className="menu-item" href="#contact">Contact</a>
</Menu>
)
}
On my main page, I'd like to be able to click on one of the nav items that already pulls the user to the div, but now expands the collapsed accordion card as well. I have the accordions functioning perfectly fine as they would normally, but I can't find any easy method to do this from outside of the Accordion tags itself. Even with a Custom Click function from the documentation, the click doesn't work unless it's located in the Accordion in which the eventKey is also located. I have tried a custom button and function outside of it with the proper event key and nothing happens.
Example of one of my accordion divs (with some identifying text cut out)
<div className="educationContainer" id="education">
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
<h1>Education</h1>
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0" >
<Card.Body>
<div className="innerContainer">
<p>
Blah blah
</p>
</div>
<div className="innerContainer">
<p>
Blah blah
</p>
</div>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
Thanks!
I have a business need which is as shown below
here i have used DropdownButton from react bootstrap to achive the above menu
<span className="widget-controls" mr-eye-widget-type='Menu'>
<DropdownButton
alignRight
drop='down'
title="" className="download-CSV-button fa fa-ellipsis-v ">
<Dropdown.Item>Testttt</Dropdown.Item>
<Dropdown.Item>
<CSVLink { ... switchRef } data={this.state.downloadData} asyncOnClick={true} headers={this.state.dowloadHeader} filename={this.state.downloaFileName}>
<span className="csv-download" mr-eye-widget-type='DownloadButton' >
<div className="fa fa-download listColor" >
<span className="download-text">{widgetLabelConfig.englishConfig.Resource_Download_as_CSV}
</span></div>
</span>
</CSVLink>
</Dropdown.Item>
</DropdownButton>
</span>
and also here in the code one of the menu item is Testttt which is displaying where as second menu item has CSVLink which is a npm react-csv module for download this will not be render in the dom when i put it outside drop menu it works fine please let me know why is it failing when it is inside DropdownButton
We have this font awesome icon fa fa-twitter which at the current time sides next to the actual tooltip button of materialize what i need to do is to put it inside the tooltip
<div class="center">
<i class="fa fa-twitter"></i>
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-customcss="csszzz" data-tooltip="I am tooltip" >Hover me!</a>
</div>
i know there is a data-customcss implementation aswell so theoritically we could implement it via .css also with url link of a photo icon but i can't figure out how that could be with angular
At the moment the data-customcss="csszzz" doesn't do anything as a pointed css class eg. .csszzz
just add data-html="true" to your anchor element and move icon inside of tooltip:
<div class="center">
<a class="btn tooltipped"
data-position="bottom"
data-delay="50"
data-html="true"
data-tooltip="<i class='fa fa-twitter'></i> I am tooltip" >Hover me!</a>
</div>
please look at http://materializecss.com/dialogs.html#tooltip for reference
plunker: https://plnkr.co/edit/3cZtphZ984R1ZqnkuLBX?p=preview