I have a simple Card in material-ui:
<Card>
<CardHeader
title={this.props.series.name} />
</Card>
And I would like to have the title be a link to a URL that I pass in via a property. I looked at the JSX source for the card header, but I cannot figure out how to make this happen.
<CardHeader
avatar={
<Avatar aria-label={placeData.type} className={classes.avatar}>
<PlaceTypeIcon type={placeData.type} />
</Avatar>
}
action={
<IconButton href={gMapUrl} aria-label="maps">
<MapOutlinedIcon />
</IconButton>
}
title={placeData.title}
subheader={placeData.street}
/>
putting it in the action prop also works fine
The simplest way to do it is to just put an a tag inside the title attribute of CardHeader:
<CardHeader
action={
<IconButton>
<MoreVertIcon />
</IconButton>
}
title={
<Link to={url}>{props.name}</Link> //similarly use `a` if not using react-router
}
// For making an avatar link
avatar={
<Avatar component={Link} to={url} aria-label={props.name} className={classes.avatar}>
A
</Avatar>
}
subheader={props.subheader}
/>
There seems no provision to make header as <a> from sourcecode.
But there are some hacks which you can use to get things working
pass <a href=''> as value to that prop
listen to click event and fire transitionTo to change the route.
This here worked for me, I just put a Material UI Link inside of the CardHeader subheader.
<CardHeader
avatar={
<Avatar aria-label={placeData.type} className={classes.avatar}>
<PlaceTypeIcon type={placeData.type} />
</Avatar>
}
title={placeData.title}
subheader={
<Link className={classes.link} href={gMapUrl}>
{placeData.street}
</Link>
}
/>
If making it an <a href={} /> does not work, I am sure this will:
<Card>
<CardHeader title={this.props.series.name} onClick={this.props.series.link} style={linkStyle}/>
</Card>
And assign a custom linkStyle that would make the <CardHeader/> look like a link.
This worked for me.
<CardTitle title={renderHTML('TITLE' )}/>
You can use same method for subtitle as well.
Related
Please see this code guys..how can i add multiple image link in this code
If you want to use built-in subcomponent Card.Img, then only one image is possible. But you don't have to use it. Feel free to use only Card, or Card with Card.Body - in the end it's only styling!
As you didn't say how those multiple images should be arranged, I added four images inline above the card text:
<Card style={{ width: "18rem" }}>
<Card.Body>
<Stack
direction="horizontal"
className="justify-content-between mb-3"
>
<img src="holder.js/50x50" alt="img-1" />
<img src="holder.js/50x50" alt="img-1" />
<img src="holder.js/50x50" alt="img-1" />
<img src="holder.js/50x50" alt="img-1" />
</Stack>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
https://codesandbox.io/s/sweet-easley-xy5xi5
I need to return either Porover or Card depending on the condition with the same children content. This can be done by taking the children content into a separate component and returning it like this:
true ? <Popover><ChildrenContent props={props}/></Popover>
: <Card><ChildrenContent props = {props}/></Card>
But it seems to me that this is not the best solution in this case
<Popover dataCy="complexValidation">
<Section marginBottom={3}>
</Section>
<Flex flexDirection="column" gap={3}>
{validations.map((validation) => (
<Flex.Item key={validation.text}>
<Flex alignItems="center">
<Icon name="check_circle" size="large" color={validation.isSuccess ? 'positive' : 'negative'} />
<Flex.Item>
<Typography variant="bodyText2" component="span">
{validation.text}
</Typography>
</Flex.Item>
</Flex>
</Flex.Item>
))}
</Flex>
</Popover>
I am using React Material UI version 4.9.5 and React version 16.13.
Inside CardHeader tag i need to show 2 buttons. I tried placing buttons inside CardHeader tag but they dont show up. I placed the buttons inside title attribute of CardHeader but it shows buttons html code.
How to show HTML tag inside the CardHeader tag?
This is the part of code:
<div className={classes.root}>
<Card elevation={2} >
<CardHeader title= 'New Clin' className = {classes.cardHeaderClass}></CardHeader>
<CardContent className={classes.formContainer} >
<Divider className={classes.divider} />
<Grid container>
like in material ui card example, you need to add your button in action cardHeader props like for example:
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
R
</Avatar>
}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
I am using Material-UI Avatar React component for show profile images.I need to show letter avatar when there is no image from given url. How can I achieve this?.
<Avatar src={ProfileImageUrl} className={classes.avatar}>
{userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0)}
</Avatar>
Avatar component itself has an alternative attribute like the standard img tag
<Avatar alt="avatar" src={ProfileImageUrl} className={classes.avatar}>
{userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0)}
</Avatar>
You can use alt attribute directly, Ref
<Avatar alt="No Image" src={ProfileImageUrl} className={classes.avatar}>
{userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0)}
</Avatar>
Or, you can use a condition to show default letter, Ref
,considering you are having userDetails object
<Avatar Image" src={ProfileImageUrl} className={classes.avatar}>
{Object.getOwnPropertyNames(userDetails).length>0 ? userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0) : 'No Image'}
</Avatar>
I just solved this issue in my project:-
If there's an error in the url mentioned in src, the Avatar component would fallback to the children i.e, the text you've provided:- {userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0)}.
This would result into a letter avatar.
Link to the documentation
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.