I am using materi-ui version V0.18.7.
I am trying to add Edit svg icon to CardHeader but it is not appearing. I tried to figure out why it is not appearing but no luck.
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import Edit from 'material-ui/svg-icons/Editor/mode-edit';
<Card>
<CardHeader
title="Without Avatar"
subtitle="Subtitle"
openIcon={<Edit />}
/>
<CardText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
</CardText>
</Card>
Try this:
import Edit from 'material-ui/svg-icons/editor/mode-edit';
...
<CardHeader
title="Without Avatar"
subtitle="Subtitle"
actAsExpander={true}
showExpandableButton={true}
openIcon={<Edit />}
closeIcon={<Edit />}
/>
...
<CardText expandable={true}>
Related
I was following this guide https://www.patternfly.org/v4/components/card/react-demos using their "Horizontal split" guide to try to get the desired effect but I am unable to get the background image to display properly even though the path to the image is correct.
I have tried to put the name of the image in curly brackets the way you do for normal images and also imported it but I am still unable to get the image to display. I am unsure of how to get the image to show up for this section.
Here is the code I have so far
import { Card, CardTitle, CardBody, CardFooter, Grid, GridItem, Button } from '#patternfly/react-core';
import dog from '../images/dog.jpg';
export default function adoptionReady() {
return (
<>
<h1>Pets Ready For Adoption</h1>
<div className="container">
<section>
<article>
<br></br>
<br></br>
<Card id="card-demo-horizontal-split-example" isFlat>
<Grid md={6}>
<GridItem
style={{
minHeight: '200px',
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundImage: 'url(../images/dog.jpg)'
} }
/>
<div class="col d-flex justify-content-center">
<Card id="card-demo-horizontal-split-example" isFlat>
<Grid md={6}>
<GridItem
style={{
minHeight: '200px',
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundImage: {dog}
}}
/>
<GridItem>
<CardTitle>Headline</CardTitle>
<CardBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu,
tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in
tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non
faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.
</CardBody>
<CardFooter>
<Button variant="tertiary">Call to action</Button>
</CardFooter>
</GridItem>
</Grid>
</Card>
{/* <figure>
<figcaption></figcaption>
</figure> */}
</div>
</article>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<>
</></>
);
}
Here is the example code I am trying to follow this url shows the end result that I am unable to duplicate https://www.patternfly.org/v4/components/card/react-demos/horizontal-split/
I was able to resolve the issue by inputting different code that split the content between it's containers, then all I had to just is just add a regular image like normal. Still not sure why the original code would not work though.
Leaving it here in case anyone needs it in the future when using pattern fly horizontal card tutorial.
import React from 'react';
import { Card, CardTitle, CardBody, CardFooter, Grid, GridItem, Button } from '#patternfly/react-core';
CardHorizontalSplitDemo = () => {
return (
<Card id="card-demo-horizontal-split-example" isFlat>
<Grid md={6}>
<Card id="card-demo-horizontal-split-example" isFlat>
<Grid md={6}>
<Split>
<SplitItem>
<img src={dog} alt=" " />
</SplitItem>
</Split>
<GridItem>
<CardTitle>Headline</CardTitle>
<CardBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu,
tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in
tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non
faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.
</CardBody>
<CardFooter>
<Button variant="tertiary">Call to action</Button>
</CardFooter>
</GridItem>
</Grid>
</Card>
);
};
Example code maybe helpful
import React from 'react';
import { ImageBackground, StyleSheet } from 'react-native';
const BackgroundImage = ({ children }) => {
return (
<ImageBackground
source={require('path/to/your/image.jpg')}
style={styles.backgroundImage}
>
{children}
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center'
},
});
export default BackgroundImage;
You can then use this BackgroundImage component
import BackgroundImage from './BackgroundImage';
const YourComponent = () => {
return (
<BackgroundImage>
<!-- your content here -->
</BackgroundImage>
);
};
Solution was to add a split instead of a grid item for the image.
<Grid md={6}>
<Card id="card-demo-horizontal-split-example" isFlat>
<Grid md={6}>
<Split>
<SplitItem>
<img src={dog} alt=" " />
</SplitItem>
</Split>
I'm trying to replicate the "Mini drawer" example found on the MUI Drawer page here:
https://mui.com/components/drawers/#mini-variant-drawer
But as soon as I wrap it in a ThemeProvider, even if the referenced theme is empty the layout breaks. See below:
<ThemeProvider theme={baseTheme}>
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar position="fixed" open={open}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{
marginRight: "36px",
...(open && { display: "none" })
}}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div">
Mini variant drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
<DrawerHeader>
<IconButton onClick={handleDrawerClose}>
{theme.direction === "rtl" ? (
<ChevronRightIcon />
) : (
<ChevronLeftIcon />
)}
</IconButton>
</DrawerHeader>
<Divider />
<List>
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{["All mail", "Trash", "Spam"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<DrawerHeader />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus
dolor purus non enim praesent elementum facilisis leo vel. Risus at
ultrices mi tempus imperdiet. Semper risus in hendrerit gravida
rutrum quisque non tellus. Convallis convallis tellus id interdum
velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean
sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies
integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate
eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo
quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat
vivamus at augue. At augue eget arcu dictum varius duis at
consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
donec massa sapien faucibus et molestie ac.
</Typography>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est
ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar
elementum integer enim neque volutpat ac tincidunt. Ornare
suspendisse sed nisi lacus sed viverra tellus. Purus sit amet
volutpat consequat mauris. Elementum eu facilisis sed odio morbi.
Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt
ornare massa eget egestas purus viverra accumsan in. In hendrerit
gravida rutrum quisque non tellus orci ac. Pellentesque nec nam
aliquam sem et tortor. Habitant morbi tristique senectus et.
Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean
euismod elementum nisi quis eleifend. Commodo viverra maecenas
accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam
ultrices sagittis orci a.
</Typography>
</Box>
</Box>
</ThemeProvider>
(Note: This code is an exact copy of the Mini drawer example on the website)
It looks like the ThemeProvider makes it so that the Drawer and the main body are overlapping instead of "pushing" each other. Removing the ThemeProvider (and going back to how the example on the MUI website was set up) instantly fixes it.
Of course, in my actual use case, I want to have a light and a dark theme, but it seems that even a single theme without any setup breaks the code.
Here's a CodeSandbox that shows how App.js and theme.js are set up:
https://codesandbox.io/s/react-mui-theme-breaks-drawer-u5sg0
Is this a bug in MUI or am I doing theming wrong?
Thank you in advance for your help.
To anyone that finds this issue later down the line:
I was importing { createTheme } from "#material-ui/core/styles".
Importing it from "#mui/material/styles" fixed the issue.
I am composing the following using Semantic UI React: column 1: text, column 2 and 3: images. While the images are middle aligned to each other, the text next to them is aligned to the top.
Here is the code. I have to put marginTop: "-15em" to move the title up. Is there a better way to do this?
import React from "react";
import {Grid,Header} from "semantic-ui-react";
<Grid>
<Grid.Row verticalAlign="middle">
<Grid.Column width={4}>
<Header as="h4" style={{ marginTop: "-15em" }}>
Title
</Header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse finibus hendrerit nulla, quis mattis felis eleifend
sed. Vivamus a blandit tellus. Donec non erat enim. Nullam
vulputate lectus a finibus tempor. Fusce vel purus est. Praesent
ac ex ac ex vulputate vulputate. Donec dapibus pharetra ultrices.
In maximus enim sem, id dignissim odio volutpat vitae.
</p>
</Grid.Column>
<Grid.Column width={6}>
<img src={img1} alt="img1" />
</Grid.Column>
<Grid.Column width={6}>
<img src={img2} alt="img2" />
</Grid.Column>
</Grid.Row>
</Grid>
You can put verticalAlign property on each Grid.Column and remove this property from the Grid.Row. Hopefully it should work
import React from "react";
import {Grid,Header} from "semantic-ui-react";
<Grid>
<Grid.Row>
<Grid.Column width={4}>
<Header as="h4">
Title
</Header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse finibus hendrerit nulla, quis mattis felis eleifend
sed. Vivamus a blandit tellus. Donec non erat enim. Nullam
vulputate lectus a finibus tempor. Fusce vel purus est. Praesent
ac ex ac ex vulputate vulputate. Donec dapibus pharetra ultrices.
In maximus enim sem, id dignissim odio volutpat vitae.
</p>
</Grid.Column>
<Grid.Column verticalAlign="middle" width={6}>
<img src={img1} alt="img1" />
</Grid.Column>
<Grid.Column verticalAlign="middle" width={6}>
<img src={img2} alt="img2" />
</Grid.Column>
</Grid.Row>
</Grid>
actually, I am trying to create a responsive app bar using the material UI/app drawer. when I clicked the but it starts from the top of the page and makes the background dark but I want to make it start from the bottom of the app bar without making the background dark. please help me and give example using codesandbox https://codesandbox.io/s/64ulq
I trying to do this
but it shows like that
you can make a mix of multiple exemple of material ui drawer (Persistent and clipped one) and it give you something like this :
import React from 'react';
import { createStyles, Theme, makeStyles } from '#material-ui/core/styles';
import Drawer from '#material-ui/core/Drawer';
import AppBar from '#material-ui/core/AppBar';
import CssBaseline from '#material-ui/core/CssBaseline';
import Toolbar from '#material-ui/core/Toolbar';
import List from '#material-ui/core/List';
import Typography from '#material-ui/core/Typography';
import Divider from '#material-ui/core/Divider';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import InboxIcon from '#material-ui/icons/MoveToInbox';
import MailIcon from '#material-ui/icons/Mail';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
const drawerWidth = "100vw";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
drawer: {
width:"100vw",
},
drawerPaper: {
width: drawerWidth,
},
drawerContainer: {
overflow: 'auto',
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
}),
);
export default function ClippedDrawer() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleDrawerOpen = () => {
setOpen(!open);
};
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Clipped drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
anchor="top"
className={classes.drawer}
variant="persistent"
open={open}
classes={{
paper: classes.drawerPaper,
}}
>
<Toolbar />
<div className={classes.drawerContainer}>
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
</Drawer>
<main className={classes.content}>
<Toolbar />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
donec massa sapien faucibus et molestie ac.
</Typography>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
</Typography>
</main>
</div>
);
}
code sandbox
Is is possible to include a React component call within a block of text and then get React to execute the component?
For example, let's say I had:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id libero rutrum, volutpat nisi non, tempus ipsum. <InsertStuff props={props} /> Vestibulum vel sapien lacus. Pellentesque tristique erat a purus tempus, vitae vulputate nulla consequat
I'd like React to see <InsertStuff props={props} /> and execute the component so that I get:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id libero rutrum, volutpat nisi non, tempus ipsum. HERE'S THE STUFF GENERATED BY THE COMPONENT Vestibulum vel sapien lacus. Pellentesque tristique erat a purus tempus, vitae vulputate nulla consequat
Can this be done?
It can be done - in your render() method (or in the return value if using a functional component) you need to guarantee that there is a top level tag, even if it renders nothing (e.g. <></> or <React.Fragment></React.Fragment>)
More info
JSX in Depth
React Fragments
Live example that does not add any new tags (div/span/etc) to the DOM - will print:
<div id="root">Inline text before a component with props: {"randomProp":"value"} and some text after</div>
const Component = (props) => (
<React.Fragment>
a component with props: {JSON.stringify(props)}
</React.Fragment>
);
ReactDOM.render(
<React.Fragment>
Inline text before <Component randomProp="value"/> and some text after
</React.Fragment>,
document.getElementById("root")
);
<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>
<div id="root" />