我正在使用Material UI。 我想在输入框中显示搜索图标
,如下图所示
我正在使用这个API
这里是我的代码
我能够显示TextField
,但无法添加搜索图标。
请问如何添加?
<TextField id="standard-bare" defaultValue="Bare" margin="normal" />
我正在使用Material UI。 我想在输入框中显示搜索图标
,如下图所示
我正在使用这个API
这里是我的代码
我能够显示TextField
,但无法添加搜索图标。
请问如何添加?
<TextField id="standard-bare" defaultValue="Bare" margin="normal" />
你需要使用输入装饰。
例如:
// imports
import IconButton from "@material-ui/core/IconButton";
import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from "@material-ui/icons/Search";
// render
<TextField
label="With normal TextField"
InputProps={{
endAdornment: (
<InputAdornment>
<IconButton>
<SearchIcon />
</IconButton>
</InputAdornment>
)
}}
/>
这里是一个演示:
const {
TextField,
InputAdornment,
IconButton,
SearchIcon,
Icon
} = window['material-ui'];
class App extends React.Component {
render() {
return (
<TextField
label="With normal TextField"
InputProps={{
endAdornment: (
<InputAdornment>
<IconButton>
<Icon>search</Icon>
</IconButton>
</InputAdornment>
)
}}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div id="root"></div>
在我的情况下,我只使用了IconButton
import { TextField, IconButton } from '@material-ui/core';
import { SearchOutlined } from '@material-ui/icons';
我的例子:
<TextField
fullWidth
id="standard-bare"
variant="outlined"
defaultValue="How can we help"
InputProps={{
endAdornment: (
<IconButton>
<SearchOutlined />
</IconButton>
),
}}
/>
你可以使用InputBase
<Box sx={{display:"flex",justifyContent:"space-between", border:1, borderRadius:4}}>
<InputBase />
<IconButton>
<BiSearch />
</IconButton>
</Box>
IconButton
是为了什么?是为了使搜索图标可以点击或者其他什么原因吗? - Alex McMillan