I am using IconMenu with IconButton and Icon.
I want to have a label just before 'NavigationExpandMoreIcon'.
Is it possible to achieve in this possible setup or do I need to change the components that I am using?
My Code looks like:
<IconMenu
iconButtonElement={
<IconButton touch>
<NavigationExpandMoreIcon />
</IconButton>
}
onItemClick={this.handleClick}
>
{options}
</IconMenu>
I am using material UI 0.20 and React 16
I also have material ui 3.7 (So I can upgrade the component, if needed)
I think you can customize using iconButtonElement options it is accept node..
<IconMenu
iconButtonElement={
<React.Fragment>
//Use styles based on your need for label component...
<label>Your Label here</label>
<IconButton touch>
<NavigationExpandMoreIcon />
</IconButton>
</React.Fragement>
}
onItemClick={this.handleClick}
>
{options}
</IconMenu>
Related
I want to implement a DateRangePicker from Material UI with a calendar icon, e.g. it should look like that:
According to the Api documentation it should work with
components={{
OpenPickerIcon: CalendarTodayIcon
}}
but it doesn't. See codesandbock.
I also tried it by adding an Icon manually to the TextField which shows an Icon but doesn't open the PopupMenu when clicking on the Icon.
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton>
<CalendarTodayIcon />
</IconButton>
</InputAdornment>
)
}}
Anyone an idea how to implement that? I am using mui 5.1.0 and mui/lab 5.0.0-alpha.50
I haven't used the Component from the library but you're right according to the documentation
components={{
OpenPickerIcon: CalendarTodayIcon
}}
Should work but it doesn't.
In your workaround, you're not supplying anything on the IconButton onClick event handler so naturally, the icon does nothing when clicked.
What you need to do is focus on the input whenever the Icon is clicked. You can achieve that by using the useRef hook in your input and then calling the current.focus() method inside the onClick handler of the IconButton.
const startInputRef = React.useRef();
<TextField
inputRef={startInputRef}
{...startProps}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={() => {
startInputRef.current.focus();
}}
>
<CalendarTodayIcon />
</IconButton>
</InputAdornment>
)
}}
/>
See codesandbox for a working example.
I still think this is a hacky workaround though so I'd suggest opening an issue on the library's github repo to get instructions.
I'm trying to test a component that has an endAdornment IconButton and other with a TreeView, but neither the IconButton and the ExpandIcon/CollapseIcon have good options to dispatch test events.
This is the TextField component that I'm using:
<TextField
fullWidth
label="Label"
onChange={handleChange}
type="text"
InputProps={{
endAdornment: (
<InputAdornment >
<IconButton onClick={openAssetHierarchy}>
<Folder />
</IconButton>
</InputAdornment>
),
}}
/>
This is the TreeView component:
<TreeView
defaultCollapseIcon={<ArrowDropDown />}
defaultExpandIcon={<ArrowRight />}
defaultEndIcon={<div style={{ width: 24 }} />}
onNodeToggle={handleToggle}
onNodeSelect={handleSelect}
>
[...]
</TreeView>
For the TextField icon button:
For TreeView when using Testing Playground to get the icon
There aren't good queries to get the icons for tests. How can I get these options?
For the IconButton you can add an aria-label attribute to the element, then use getByLabelText to access it in your test. This is also useful and recommended for accessibility purposes.
<IconButton aria-label="add a file" onClick={openAssetHierarchy}>
<Folder />
</IconButton>
screen.getByLabelText('add a file') // Gets you the `IconButton`
For the TreeView items, I assume you don't actually need to access the icon specifically but simply need to access the TreeItem for testing purposes. This can be done with getByRole and passing the tree item's name.
screen.getByRole('treeitem', { name: /Test1/ }) // Gets you the first `TreeItem`
Hey guys I'm a newbie trying to make a material UI temporary drawer and by default the value of the onClick event is a string and I have no idea how to convert it into an icon.
return (
<div>
{['Home'].map((anchor) => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
>
{list(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
);
As you can see: "HOME" is a string and what shows up on the site UI is just the "HOME" word that is a button. How do I format the code so the "HOME" button would not display a string but an icon instead. I'd be using MenuIcon from Material UI Icons to take its place. Thanks!!
You can use Icon component and pass the string to the children props. Before that, remember to add the material icon font to your html file
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
import IconButton from "#material-ui/core/IconButton";
import Icon from "#material-ui/core/Icon";
...
{["home", "star", "add_circle"].map((name) => (
<IconButton>
<Icon>{name}</Icon>
</IconButton>
))}
Live Demo
I'm trying to set the position of the indicator to the top of TAB instead of the bottom like:
I checked and tried to update CSS but it didn't work. I'm new to react so I couldn't customize the components.
I create an example in codesandbox that I share with you.
https://codesandbox.io/s/usage-p0y9t?file=/index.js
You can pass to Tabs the property classes to override internal classes.
In this case you can pass a new class to the indicator and override his style.
Take a look at the link below
https://material-ui.com/api/tabs/#css
To reinforce #Xavier 's answer, I found that we could use the TabIndicatorProps prop for Tabs component as below.
<Tabs
TabIndicatorProps={{
sx: {
top: 0
}
}}
>
<Tab label="One" />
<Tab label="Two" />
<Tab label="Three" />
</Tabs>
2022 Solution
https://mui.com/styles/basics/
#mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the #mui/material anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the #mui/system documentation which is the recommended alternative.
⚠️ #mui/styles is not compatible with React.StrictMode or React 18.
You can utilise the sx property on the component to access any css classes directly.
https://mui.com/api/tabs/#css
<Tabs
orientation="vertical"
value={value}
onChange={handleChange}
sx={{
'.MuiTabs-indicator': {
left: 0,
},
}}
>
<Tab label="One" />
<Tab label="Two" />
<Tab label="Three" />
</Tabs>
I want to implement Search bar in the center of App bar of material-ui. I have tried all possible ways and I have referred this code snippet , but can't find a solution for it.
My code snippet is
<div>
<MuiThemeProvider muiTheme={muiTheme} class="navbar">
<AppBar
title='Module Name'
onTitleClick={handleClick}
iconElementRight={<FlatButton label='LogOut' />}
onClick = {handleclick}
/>
</MuiThemeProvider>
</div>
It will be helpful if I get any solution for it.
You can use children property to add any node in AppBar, like this:
<AppBar
title="Title"
children= {
<input />
}
/>
Use styling on input field, check the working codesandbox.
you can add a ToolBar contains a Textfield
you can check documentation ,this is a Demo
Using only Material UI
<AppBar>
<Toolbar>
<Input
type="search"
/>
</Toolbar>
</AppBar>
You can check the docs here.
Installing another framework.
npm i material-ui-search-bar
A basic code snippet can be found on the main page.
import SearchBar from "material-ui-search-bar";
// *snip*
return (
<SearchBar
value={this.state.value}
onChange={(newValue) => this.setState({ value: newValue })}
onRequestSearch={() => doSomethingWith(this.state.value)}
/>
);
You can check the docs here.
Try this
<AppBar>
<Toolbar>
<InputBase placeholder="Search for products, brands and more" />
</Toolbar>
</AppBar>
Pass a prop in the AppBar component
<AppBar
title="Title"
showSearch= {
<Toolbar>
<InputBase placeholder="Search" />
</Toolbar>
}
/>
You can handle AppBar component based on customName prop like if you're passing this prop then it should show Search else not.