I am using react-bootstrap, and have a button with a caret that triggers a dropdown.
But I need to use the vertical 3 dots instead, not in a button style.
I have a span that uses a CSS class for the three dots, but can't seem to find a way to get rid of the button and caret.
What I have tight now is this:
<Dropdown>
<Dropdown.Toggle>
<span className="threedots"></span>
</Dropdown.Toggle>
<Dropdown.Menu size="sm" title="">
<Dropdown.Header>Options</Dropdown.Header>
<Dropdown.Item .... ></Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
I just want to see the three dots (I'll add a mouse-over effect). Is there a way to use a snap as a toggle>
You can customise Dropdown by passing in custom subcomponents. Custom Dropdown Components
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href=""
ref={ref}
onClick={e => {
e.preventDefault();
onClick(e);
}}
>
{/* custom icon */}
{children}
</a>
));
then pass as a custom toggle
<Dropdown >
<Dropdown.Toggle as={CustomToggle}>
</Dropdown.Toggle>
<Dropdown.Menu size="sm" title="">
<Dropdown.Header>Options</Dropdown.Header>
<Dropdown.Item .... ></Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
sample codesandbox,Hope be helpful
Related
I want to change the appearance of a button when it its clicked to show an arrow coming out of it. I would like to do it using css. I am building a react application using typescript.
When the next button is clicked the arrow should be removed from the first one and go to the next one.
I have included a picture of the desired outcome.
Here is an example of 2 of the buttons:
<div className="button-container">
<Button
className="text-white font-nunito text active"
onClick={() => onFieldAdd('textField')}
>
<TextFieldsIcon />
<p> Text Box</p>
</Button>
<Button
className="text-white font-nunito text mx-2 pr-15"
onClick={() => onFieldAdd('imageField')}
disabled={!!formId}
>
<AddPhotoAlternateIcon />
<p> Image</p>
</Button>
</div>
This could be the solution you're looking for:
import { useState } from "react";
const YourComponentName = () => {
const [selectedBtn, setSelectedBtn] = useState(null);
const hanldeClick = (e) => setSelectedBtn(e.target.id);
return (
<div>
<button id="btn1" onClick={hanldeClick} className={selectedBtn === "btn1" ? "hasArrow" : ""}>
Button 1
</button>
<button id="btn2" onClick={hanldeClick} className={selectedBtn === "btn2" ? "hasArrow" : ""}>
Button 2
</button>
// SAME THING FOR THE REST OF THE BUTTONS
</div>
)
}
export default YourComponentName;
Just customize it to suit your use case.
Here, I am initializing a state called selectedBtn to null by default, and listening for onClick events on all of the buttons to change that state to the clicked button id. Once it changes, component will rerenders and the CSS class hasArrow will be added to the appropriate button element by checking if selectedBtn state value is equal to the button id, with the help of the ternary conditional operator ?:.
I'm new to Tailwind, and I'm not sure if there's a way to solve this edge case. Here is the scenario:
We have different variants listed on the product page(for example different color tags). When you hover we are showing a faded border around the tag, and when you select the variant, the tag becomes active, and its border should get darker.
The problem:
Even when the user clicks on the tag to make it active, the user still sees hover still rather than the 'active' style.
These are the classes I'm using for now
<Tag
clssName={`flex rounded border border-gray-200 bg-white hover:border-gray-400 ${active && 'border-gray-700'}`}
...prop
/>
Now the question is if there's a way to override the hover styles on when the item is active. One way could be to remove the hover class when the item is active, but I was wording if there is a Tailwind way to fix it.
You can add different styles for active and non-active variants.
<Tag
clssName={`flex rounded border bg-white ${active && 'border-gray-700 hover:border-black'}`} ${!active && "border-gray-200 hover:border-gray-400"}
...prop
/>
Well you can use focus utility for this.
Below is the example you can see where button has different behaviour on hover and focus.
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10">
<button class="p-4 bg-pink-100 hover:bg-pink-300 focus:bg-red-500 focus:border-2 focus:border-red-700">Click </button>
</div>
You can achieve this with a ternary operator on className. By default we have border-gray-200 hover:border-gray-400 when state changes, we replace border-gray-700 instead of border-gray-200 hover:border-gray-400.
const App = () => {
const [active, setActive] = React.useState(false);
return (
<button onClick = {() => setActive(!active)}
className={`flex p-3 rounded border bg-white ${active ? 'border-gray-700' : 'border-gray-200 hover:border-gray-400'}`
}>
{active ? 'Active' : 'Inactive'}
</button>
);
};
const rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render( < App / > );
<script src="https://cdn.tailwindcss.com"></script>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div id="root" class="p-10"></div>
I'm trying to show a school's cancelled classes in a select menu. It's arranged by day:
However, my menu just cuts off the overflow text when at a mobile resolution in developer tools.
The thermodynamics class is cut off.
I'm using material ui's select menu with react. Material UI Select documentation I'm also using the menu item. I want to have classes listed overflow onto the next line. The is where I show the classes per day.
This is the code (it's just an example, and it doesn't run):
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<FormControl className={classes.formControl}>
<InputLabel id="demo-controlled-open-select-label" > Filter classes by day</InputLabel>
<Select
labelId="demo-controlled-open-select-label"
id="demo-controlled-open-select"
open={open}
onClose={handleClose}
onOpen={handleOpen}
defaultValue={subjectFilter}
onChange={handleChangeSubject}
className="styleSelect"
>
{item.SUBJECT === 'OPEN_LEARNING' &&
<ul className ="stylingList">
{(state.subjects) && state.subjects.filter(item =>
(item.SUBJECT === 'OPEN_LEARNING')).map(item =>
<li className ="stList">
{item.CLASS_FULL}
</li>
)}
</ul>
}
</MenuItem>
//this is just one day. I do this for all the days.
) )
}
</Select>
</FormControl>
I don't have styles on the classes listed. I just made class names to customize the areas later if needed. I just changed the text color. Thanks. I tried overflow-wrap: break-word; on the li class (stList), but it didn't make the words go to the next line.
TL;DR: Override the wrapping style of the Menu Item:
const useStyles = makeStyles((theme) => ({
root: {
whiteSpace: "unset",
wordBreak: "break-all"
}
}));
//...
const YourComponent =(props)=>{
const classes = useStyles();
//...
<MenuItem classes={{ root: classes.root }}>
}
NL;PR: By default, the menu item style whiteSpace: 'nowrap' prevents the other wraps to apply. You can inspect how the suggested changes work in this pastebin.
Now, your select's menu items will go:
From this:
to this: .
Use ListItem instead of MenuItem:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<FormControl className={classes.formControl}>
<InputLabel id="demo-controlled-open-select-label" > Filter classes by day</InputLabel>
<Select
labelId="demo-controlled-open-select-label"
id="demo-controlled-open-select"
open={open}
onClose={handleClose}
onOpen={handleOpen}
defaultValue={subjectFilter}
onChange={handleChangeSubject}
className="styleSelect"
>
{item.SUBJECT === 'OPEN_LEARNING' &&
<ul className ="stylingList">
{(state.subjects) && state.subjects.filter(item =>
(item.SUBJECT === 'OPEN_LEARNING')).map(item =>
<li className ="stList">
{item.CLASS_FULL}
</li>
)}
</ul>
}
</ListItem>
//this is just one day. I do this for all the days.
) )
}
</Select>
</FormControl>
I was thinking if it's any possibility to create animated buttons using setTimeout on map elements.
I am learning React Transition group and i've created this code:
function NavItemSub(props) {
const array1 = props.array1;
return (
<ul className="gallery-menu" >
<TransitionGroup className="todo-list"
component={null}>{array1.map((e, index) => (
<SwitchTransition>
<CSSTransition
key={index}
in={true}
timeout={1000}
classNames="item"
appear={true}
>
<li key={index} className="item">
{props.icon}{e}
</li>
</CSSTransition>
</SwitchTransition>
))}
</TransitionGroup>
</ul>
)
}
The effect is that the buttons appear in the same time.I want the buttons entered one by one. I've tried add setTimeout function on loop and it's working with some simple console.log but it's not returning JSX element.
Thanx for help.
Have you tried something like this?
timeout={index * 1000}
I am currently trying to align a Icon and a text in a Menu.Item with Semantic UI React V.0.68.2.
Currently my HTML output looks like this:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
And my JSX like this:
<Menu vertical className="some classes" icon=''>
<Menu.Item
active={active}
onClick={onClick}
className="some class"
>
<Icon name="home" large /> Dashboard
</Menu.Item>
</Menu>
I wrote a new Icon component to use my own Icon Font which looks like this. I tried to stay as close to the original Icon class from the React Implementation of Semantic UI.
import React, { Component } from "react";
import classnames from "classnames";
/**
* #class Icon
* #extends {Component}
* #description Icon class for themify icons. Replacement for semantic ui Icon class
*/
class Icon extends Component {
render() {
var iconClass = classnames("icon ti-icon ti-" + this.props.name, {
big: this.props.big,
large: this.props.large,
close: this.props.close
});
return (
<i
aria-hidden={true}
className={this.props.close ? iconClass.replace("icon", "") : iconClass}
onClick={this.props.onClick}
/>
);
}
}
export default Icon;
Now I want the Text and the Icon to be vertically centered but I can't get it to work, they text always seems to be at the top of its parent node. But actually I want it to appear vertically centered in the Menu.Item. with any size of the Icon. So when I change the size of the Icon to large the text should always be centered vertically. The size classes are the same as in Semantic UI.
Does anyone have an idea how to achieve this ? Thanks in advance :)
Hi you are facing a very common problem, possible solutions are depicted in the following codepen
https://codepen.io/anon/pen/XEKZwq
What I suggest you do is to wrap the text in a span so instead of:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
you do the following
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
<span>Dashboard</span>
</a>
Once you've done this you can easily use the solution in the codepen above.