<AppBar
title={<span>Title</span>}
iconRightElement={
<FlatButton key={1} label="About"/>
<FlatButton key={2} label="Home" />
} />
/>
I have tried above code but not working..
Add one parent element
<div>
<FlatButton key={1} label="About"/>
<FlatButton key={2} label="Home" />
<div>
The solution in my opinion would be to wrap all your buttons/icons in one single element and then pass it to your AppBarcomponent via the attribute iconRightElement.
See full example below. Hope this helps:
import Link from 'next/link'
import React, {PropTypes} from 'react'
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import IconButton from 'material-ui/IconButton';
import AppBar from 'material-ui/AppBar';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import ActionHome from 'material-ui/svg-icons/action/home';
import FlatButton from 'material-ui/FlatButton';
import FontIcon from 'material-ui/FontIcon';
const rightButtons = (
<div className="appBarIcons">
<Link href="/">
<IconButton><ActionHome style={buttonStyle}/></IconButton>
</Link>
<Link href="/Login">
<FlatButton label="Login" style={buttonStyle}/>
</Link>
</div>
);
const buttonStyle = {
color: 'white'
}
class Header extends React.Component {
render(){
return (
<div>
<MuiThemeProvider>
<div>
<AppBar
title="AppTitle"
iconClassNameRight="muidocs-icon-navigation-expand-more"
iconElementRight={rightButtons}
/>
</div>
</MuiThemeProvider>
</div>
)
}
}
export default Header
Related
I am newbie and trying to get hands-on working on a project. I have referred to the other questions but they are not similar to this. I am unsure what I am missing here.
I have imported the image in Component-1 and sending it as props to Component-2
here is my code
**Component-1**
import HomeIcon from '#mui/icons-material/Home';
import HeaderOption from './HeaderOption';
import avatar from '../src/images/avatar.jpg';`enter code here`
function Header() {
return (
<div className='right_header'>
<HeaderOption Icon={HomeIcon} title='Home' />
<HeaderOption avatarIcon={avatar} title='Me' />
</div>
);
}
export default Header;
**component-2**
import React from 'react';
import './HeaderOption.css';
import AccountCircleIcon from '#mui/icons-material/AccountCircle';
function HeaderOption({ avatarIcon, Icon, title }) {
return (
<div className='headerOption'>
{Icon && <Icon className='headerOption_icon' />}
{avatarIcon && (
<AccountCircleIcon className='headerOption_icon' src={avatarIcon} />
)}
<h3 className='headerOption_title'>{title}</h3>
</div>
);
}
export default HeaderOption;
I assume what you need is this:
import * as React from 'react';
import Avatar from '#mui/material/Avatar';
import Stack from '#mui/material/Stack';
export default function ImageAvatars() {
return (
<Stack direction="row" spacing={2}>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</Stack>
);
}
AccountCircleIcon is an icon and you can't change that. Therefore what you should do is this:
avatarIcon && <Avatar alt="Cindy Baker" className='headerOption_icon' src={avatarIcon} /> )}
It looks like there is no trigger at all when I click specific item in Navbar, at one point it kinda worked, url was at least changing when I click li, but now even that doesn't work.
Beside this, I have also set the ID for each of the components.
This is App.js
import React, { useState } from 'react';
import logo from './icons/logo.svg';
import Landing_Nav from './pages/landing/Landing_Nav';
import Landing_Hero from './pages/landing/Landing_Hero';
import Landing_Organization from './pages/landing/Landing_Organization';
import Landing_Toolkit from './pages/landing/Landing_Toolkit';
import Landing_Idea from './pages/landing/Landing_Idea';
import './styles/root.scss';
function App() {
return (
<div className="landing_content">
<Landing_Nav />
<Landing_Hero />
<Landing_Organization />
<Landing_Toolkit />
<Landing_Idea />
</div>
)
}
export default App;
This is Landing_Nav.js
import React, { useState } from 'react';
import logo from '../../icons/logo.svg';
import '../../styles/root.scss';
import '../../styles/landing-navigation.scss';
import { Link } from "react-scroll";
function Landing_Nav() {
return (
<div className="navigation">
<img src={logo} className="logo-img"/>
<div className="nav-right-content">
<ul className="nav-on-page">
<Link
activeClass=""
to="organization-link"
spy={true}
smooth={true}
offset={-70}
duration= {500}
><li>Organization</li></Link>
</ul>
<button className="btn-primary">Create Together</button>
</div>
</div>
)
}
export default Landing_Nav;
Inside your Landing_Organization component you have the id of that component set to "organization-link". I believe you need to set the name attribute to "organization-link" for the react-scroll library to work as intended.
i am currently building a shopping website . i finished the homepage and i have to make routing for other pages
i have 3 main files: App.js, Menuitem.js (which is to execute props), and Homepage.js (which also is used to apply executing props from sections array which includes titles and background images and sections paths)
this is the App js
import React from "react";
import Homepage from './Homepage'
import "./styles.css";
import './Homepage.css'
import {Route, Switch} from "react-router-dom";
const Hatspage=function() {
return(
<div>
<h1>
Hats page
</h1>
</div>
)
}
function App() {
return (
<div>
<Switch>
<Route exact path='/'component={Homepage}/>
<Route path='/hats'component={Hatspage}/>
</Switch>
</div>
);
}
export default App
Menuitem.js
import React from 'react'
import {WithRouter} from 'react'
const Menuitem= function(props){
return(
<div className='card' style={{ backgroundImage: `url(${props.imageUrl})` }} >
<div className='text-frame'>
<h1 className='title'>{props.title}</h1>
<p className='subtitle'>shop now</p>
</div>
</div>
)
}
export default Menuitem
Homepage.js
import React from "react";
import sections from './directory-components';
import Menuitem from "./menu-item-components";
const arrayOne=[sections.slice(0,3)]
const arrayTwo=[sections.slice(3,)]
function extract(item){
return(
<Menuitem
title={item.title} imageUrl={item.imageUrl}/>
)
}
function Homepage(){
return(
<div className='directory-menu'>
<div className='content'>
{sections.slice(0,3).map(extract) }
</div>
<div className='second'>
{sections.slice(3,).map(extract) }
</div>
</div>
)
}
export default Homepage
so i need for example when i click on hats picture i switch to hats page . how to do that
image attached
Thanks in advance
reactjs routing
You can do two different approaches. Both of them will require an extra prop that will be the actual url you want to access when clicking the menu item.
Assuming you modify your section array to look like this:
[{title: 'Your title', imageUrl: 'your-image.jpg', linkUrl: '/hats'}]
And you modify your extract function to add the url value as a prop in the MenuItem component:
function extract(item){
return(
<Menuitem
title={item.title} imageUrl={item.imageUrl} linkUrl={item.linkUrl} />
)
}
You can do this
First one: Using a Link component from react router:
import React from "react";
import { Link } from "react-router-dom";
const Menuitem= function(props){
return(
<Link to={props.linkUrl}>
<div className='card' style={{ backgroundImage: `url(${props.imageUrl})`
}} >
<div className='text-frame'>
<h1 className='title'>{props.title}</h1>
<p className='subtitle'>shop now</p>
</div>
</div>
</Link>
)
}
Now you will have to add extra styling because that will add a regular a tag, but I like this approach because for example you can open the link in a new tab since it is a regular link.
Using the history prop.
import React from "react";
import { useHistory } from "react-router-dom";
const Menuitem= function(props){
const history = useHistory()
const goToPage = () => history.push(props.linkUrl)
return(
<div className='card' style={{ backgroundImage: `url(${props.imageUrl})`
}} onClick={goToPage} >
<div className='text-frame'>
<h1 className='title'>{props.title}</h1>
<p className='subtitle'>shop now</p>
</div>
</div>
)
}
This approach is a basic on click so if you press the component it will go to the selected page, this will work but keep in mind that event bubbling will be harder if you add more on clicks inside the menu item, so please be aware of that.
You should fire an event inside your MenuItem in order to redirect the user
import { useHistory } from 'react-router-dom'
const history = useHistory()
<img onClick={() => history.push('/hats')} />
I want to open a tag of Container component (a styled component) in Header Component and close it in Footer component. How can I do it?
Header Component
import React from 'react';
import {
HeaderDefault, Nav, Logo, HeaderFlex, Container,
} from '../../style';
export default () => (
<>
<HeaderDefault>
// I want to open tag here
<Container>
<HeaderFlex>
<Logo>
<img src="src/assets/img/logo192.png" />
</Logo>
<Nav>
Menu
</Nav>
</HeaderFlex>
</HeaderDefault>
</>
);
Footer Component
import React from 'react';
import { FooterDefault, Container } from '../../style';
export default () => (
<>
<FooterDefault><h1>footer</h1></FooterDefault>
// and close tag here
</Container>
</>
);
I'm not sure your question, JSX tags must match in one file, maybe you should use Container in one Component and import Footer in this Component,like
import React from 'react';
import {
HeaderDefault, Nav, Logo, HeaderFlex, Container,
} from '../../style';
// import Footer Component from your second file
import Footer from './Footer';
export default () => (
<>
<HeaderDefault>
// I want to open tag here
<Container>
<HeaderFlex>
<Logo>
<img src="src/assets/img/logo192.png" />
</Logo>
<Nav>
Menu
</Nav>
</HeaderFlex>
</HeaderDefault>
<Footer />
</Container>
</>
);
import React from 'react';
import { FooterDefault, Container } from '../../style';
export default () => (
<>
<FooterDefault><h1>footer</h1></FooterDefault>
</>
);
I have problems importing UI libraries, I had problem with ant design library so I decided to try different one, now I have problem importing Grommet.
What am I doing wrong? I added dependencies according documentation and added examples included in documentation yet still not working.
I am trying to execute this code from documentation
But it doesn't look the same at all
I work with codesandbox.io, here is link for the code on it
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Heading from "grommet/components/Heading";
import Box from "grommet/components/Box";
import Header from "grommet/components/Header";
import Title from "grommet/components/Title";
import Search from "grommet/components/Search";
import Menu from "grommet/components/Menu";
import Anchor from "grommet/components/Anchor";
import "grommet-css";
class HelloWorldApp extends React.Component {
render() {
return (
<div>
<Header>
<Title>Sample Title</Title>
<Box flex={true} justify="end" direction="row" responsive={false}>
<Search
inline={true}
fill={true}
size="medium"
placeHolder="Search"
dropAlign={{right: "right"}}
/>
<Menu dropAlign={{right: "right"}}>
<Anchor href="#" className="active">
First
</Anchor>
<Anchor href="#">Second</Anchor>
<Anchor href="#">Third</Anchor>
</Menu>
</Box>
</Header>
<Box>
<Heading>
Hello, I'm a Grommet Component styled with
grommet-css
</Heading>
</Box>
</div>
);
}
}
var element = document.getElementById("root");
ReactDOM.render(<HelloWorldApp />, element);
So according to your code:
<Menu dropAlign={{right: "right"}}>
was missing the icon attribute, without which the Menu component directly renders the Anchor, the menu-items component.
add import for the icon of your choosing, i.e: Actions ( from the example )
import Actions from 'grommet/components/icons/base/Actions';
add the icon attribute to the Menu component:
<Menu
icon={<Actions />}
dropAlign={{ right: 'right' }}
>
<Anchor href="#" className="active">First</Anchor>
<Anchor href="#">Second</Anchor>
<Anchor href="#">Third</Anchor>
</Menu>
here's a codesandbox.io link which fixes your issue:
https://codesandbox.io/s/237xo7y48p