I am trying to create a "Title" component in a header. When you click on the title component a header should pop up with buttons that allow for bold, underline etc. This is similar to a component in a google site that I liked.
Here the Header component contains the Title Component, which contains the TitleToolbar. The title toolbar is only visible when you click on the title. The trouble is that the buttons on the toolbar don't work. I have tried to play with focus on the title tool bar but to no avail. I want to use the title toolbar and the title components at the same time.
codesandbox
Code snippet for the subcomponent.
import { Box, Button } from "#mui/material";
import React from "react";
function TitleToolbar({ clickOnBold }) {
// console.log("clickOnBold", clickOnBold);
return (
<Box
sx={{
background: "#c0e1eb",
height: "40px",
width: "100%",
position: "absolute",
textAlign: "left",
top: "0px",
left: "0px"
}}
>
<Button onClick={clickOnBold}>B</Button>
<Button onClick={() => {}}> U</Button>
</Box>
);
}
export default TitleToolbar;
Any help is greatly appreciated.
There are two problems causing this behavior:
The style applied to the Box which contains your buttons is causing them to be not clickable. If you remove the "position: absolute", they'll become clickable. If you want them to be above the TextField, change the rendering order.
After fixing the previous problem, the onBlur event of your TextField is called before the onClick of your Button. So, it looks like you're clicking the button, but you're actually unfocusing the field, hiding the button and then, it can't be clicked. If you remove the onBlur, the function clickOnBlur is called when your click on the button. You may need to find a different solution for hiding the buttons again.
You can see a working example here: https://codesandbox.io/s/gracious-bird-bf5hjd?file=/src/Title.js
Related
I'm creating a ScrollToTop component by using MUI useScrollTrigger hook https://mui.com/material-ui/react-app-bar/#usescrolltrigger-options-trigger
Here is the sample code: https://codesandbox.io/s/stackoverlow-mui-usescrolltrigger-er9z4y
Problems
The ScrollTop component doesn't appear after scrolling some pixels even after scrolling to the bottom of the page.
Here is the screenshot.
The ScrollToTop component should appear around the area I marked.
As we could see that the trigger value from the useScrollTrigger hook returns a false value. It should return a true value if we scrolled the page.
If we uncomment the ScrollToTop component, the ScrollToTop component would appear. Then if we click the ScrollToTop component, the screen would not go to the top of the page.
Here is the screenshot.
Step To Reproduce
For problem 1:
Open the demo (codesandbox link) above.
Scroll to the bottom of the page.
For problem 2:
Open the demo (codesandbox link) above.
Comment only the ScrollToTop component.
Scroll to the bottom of the page.
Click the ScrollToTop component.
Expected conditions
For problem 1: the ScrollTop component appears after scrolling some pixels.
For problem 2: the ScrollTop component should bring the screen to the top of the page after being clicked.
Problem here is useScrollTrigger use the by default window as target. But in your example your main content box is having the scroll. So you need to pass the reference of this main content box as target to the useScrollTrigger.
Refer - https://stackoverflow.com/a/56743659/1133582
Something as below -
const [scrollTarget, setScrollTarget] = React.useState<Node | undefined>(undefined);
<Box ref={(node: Node) => {
if (node) {
setScrollTarget(node);
}
}} className={classes.pageOverflow}>
<Toolbar id="back-to-top-anchor" className={classes.toolbar} />
<Box className={classes.longBox}>Top Of the page</Box>
<ScrollToTop scrollTarget={scrollTarget}>
<Fab size="small" color="secondary" className={classes.scrollToTop}>
<IconKeyboardDoubleArrowUpRounded />
</Fab>
</ScrollToTop>
</Box>
I use Ant-Design and in a component I have a Select which is placed to the right of the screen. Some of the labels are very long, and therefore when the dropdown appears, it overflows and a scrollbar appears.
I would like to have the dropdown anchor to the right-hand side of the Select button rather than to the left-hand side, thus keeping the label length but avoiding the overflow without hiding anything, but Antd doesn't expose an API for doing this and I can't figure out which CSS property to mess with...
An example Sandbox is here.
This is not described in the documentation, but since version 4.17.0 the Select supports the placement property.
export default function App() {
const [value, setValue] = useState("short");
return (
<div
className="App"
style={{
position: "relative"
}}
>
<Select
value={value}
style={{
position: "absolute",
right: "20px"
}}
dropdownMatchSelectWidth={false}
onChange={(v) => setValue(v)}
placement={"bottomRight"}
>
<Select.Option value="short">Short</Select.Option>
<Select.Option value="long">
Really Long Label That Makes Everything Weird
</Select.Option>
</Select>
</div>
);
}
Link to changelog
I'm trying to use material UI in react and I want a button that doesn't have the animation that is a wave from the point of clicking the button to outside it like demonstrated here
I instead, want it to have an animation that just fills in the entire button at once kind of like this button here (not the loading animation, I need the button press to change the entire button's color at once rather than let the color change propagate throughout the button itself. I couldn't find a better example of the button press online, that's why I used this).
What customizations do I need to make to the makeStyles() function or are there any additional functions that I might need to create?
Any help will be appreciated!
You can create 2 class name for the button and loading button
const styles = theme => ({
button: {
background: gray,
color: blue,
"&:active" {
color: light-blue,
}
},
button--loading: {
background: transparent,
color: transparent,
},
});
You can show condition inside the button for loading
<button>{loading ? <Loading /> : "Download"}</button>
I have found a solution, not the one I was looking for, but turns out, there's a prop called disableRipple that I was unaware of. It's close enough to what I wanted, so I will use that for my website. Thank you for contributing everyone!
I am attempting to implement a responsive app with antd.
One of the things I have is a Sider menu as my main navigation. One of the things I would like to do is that on small screens this sider be collapsed (as the hamburguer icon preferrably). I have no idea how to even start this. My component with the sidebar looks something like this:
class App extends React.Component {
render() {
return (
<Layout>
<Sider width={200} collapsedWidth={500}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</Menu>
</Sider>
</Layout>
);
}
}
I should probably also point out that from the Layout docs, the following is said:
Note: You can get a responsive layout by setting breakpoint, the Sider will collapse to the width of collapsedWidth when window width is below the breakpoint. And a special trigger will appear if the collapsedWidth is set to 0.
However I could not get this to work. Perhaps I misunderstand it.
Unfortunately I am not able to embed my sample app in the editor here, so I here is my working sample app. All I would like to do is collapse my Sider navbar into a hamburguer icon or even an arrow like icon on small screens. Where do I go from here?
You have a collapsible sider official example.
From here you can choose whatever width \ icons you need based on state.
Also, you have a good example of antd components, especially a sidebar with the hamburger icon.
Working on a project that is using the Material-UI library of components and I've gotten a request for a custom button hover color that is outside of the normal convention of the MUI theme.
I found this relevant block of code in the Raised Button source, https://github.com/callemall/material-ui/blob/master/src/RaisedButton/RaisedButton.js#L98. Setting a custom labelColor does change the hover state, but that still does not satisfy my current need to have the button hover color something different than that of the label color.
overlay: {
height: buttonHeight,
borderRadius: borderRadius,
backgroundColor: (state.keyboardFocused || state.hovered) && !disabled &&
fade(labelColor, amount),
transition: transitions.easeOut(),
top: 0,
},
Is there a way to override the overlay background color some other way so that I can use a separate custom color?
To clarify I'm looking to do this using inline styling or through overriding a prop on the button. Appending a class and using external CSS is not an option.
I was able to solve it by giving a className prop to RaisedButton component and specifying :hover attribute in css with !important directive.
In your component:
...
<RaisedButton className="my-button" />
...
In your css:
.my-button :hover {
background-color: blue !important;
}
For raised button use this prop hoverColor so it will be something like
<RaisedButton
label="Default"
hoverColor={"#00ff00"}
/>
In the render function of the RaisedButton, the overlay style object is overridden with the overlayStyle prop. (The relevant excerpt is below).
<div
ref="overlay"
style={prepareStyles(Object.assign(styles.overlay, overlayStyle))}
>
{enhancedButtonChildren}
</div>
This means you can set the background color by setting the backgroundColor of the overlayStyle prop. I think the second piece of the puzzle is to set the onMouseLeave and onMouseEnter events, and manage the current background color yourself, by changing the color whenever the mouse enters or leaves the button area.
Unfortunately, it looks like the keyboard focus events don't have a hook exposed in the MaterialUI API, so you won't be able to handle that case without modifying the library.
This might be something worth submitting a pull request to MaterialUI if you go the route of modifying the library.
Fairly easy solution :
.yourButtonClass{
color: aColor !important;
&>span{
color: anotherColor;
}
}
You apply the color to your button which change the label and the overlay color, and then you put your label in a span for which you specify whatever color you want the text to be.
That way your background, label and overlay can be different colors :)
can also be written in the style attribute of the respective tags:
<md-button class="md-raised" style="color: aColor !important">
<span style="color: anotherColor">yourLabel</span>
</md-button>
You can use jquery to simply remove class and addClass
jQuery(document).ready(function($){
$('#test').hover(
function(){ $(this).addClass('redclass') },
function(){ $(this).removeClass('overlay') }
)
});
'#test represent the id and .test represent the class of the element you're trying to manipulate.