I am building a react web application. I am using material ui for it. I am looking to have an appbar like google inbox has (screenshot attached below). Currently I have Appbar imported from material ui module, but it just contains title , navigation icon. I want to have a search bar, profile photo etc in my app bar, just like google inbox. How can I customize it to get a design like that. Do I have to tweak with material ui's appbar (if yes then how exactly) or do I have to do something else?
const rightButtons = (
<div>
<FlatButton key={1} label="Btn1"/>
<FlatButton key={2} label="Btn2" />
<div>
) //Style as per your requirement, Also implement search textfield component
// Drawer with list items
<Drawer/>
<AppBar
title="Inbox"
iconElementLeft={<SearchComponent/>}
iconElementRight={rightButtons}
onLeftIconButtonTouchTap={this.handleLeftDrawerToggle}
/>
make use of iconElementLeft and iconElementRight.
Docs of AppBar
As second option, You can use alternate framework react-materialize as well, as it has what your requirement is exactly.
<Navbar brand='logo' right>
<NavItem href='get-started.html'><Icon>search</Icon></NavItem>
<NavItem href='get-started.html'><Icon>view_module</Icon></NavItem>
<NavItem href='get-started.html'><Icon>refresh</Icon></NavItem>
<NavItem href='get-started.html'><Icon>more_vert</Icon></NavItem>
</Navbar>
Related
I am making my first ever website in React. I want to use Bootstrap's grid system, but I don't really know when I should use this or rather how extensively.
Is the grid system best in places like App.js and in each individual component? Just in each individual component? Just in App.js?
I use React-Bootstrap. I've found it very simple to get going with, and the intellisense you get in VS Code is great.
To get started, just:
npm install react-bootstrap
You can see a list of all of the components here.
Then you just add the components that you want to use to your import.
import {
Navbar,
Container,
Nav,
NavbarBrand,
Row,
Col,
{...}
} from "react-bootstrap";
Then in your rendered output, for example:
return (
<Container>
<Navbar>
<NavbarBrand>Brand</NavbarBrand>
<Navbar.Collapse>
<Nav>
<NavItem>Item 1</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
<Row>
<Col md={4}>
</Col>
<Col md={4}>
</Col>
<Col md={4}>
</Col>
</Row>
</Container>
);
We can use plain bootstrap to use grid system. We have to use it inside most of the component according to the requirement to make is responsive.
Easy Option:
There are other options to use bootstrap inside react like component libraries. You can use either Reactstrap or React-Bootstrap. These libraries provide components by which you can easily create website with react and power of bootstrap.
I have a website mostly done with React-Bootstrap and I am kind of a beginner in this field. I want my background to be black in all the pages so I set it with background-color:black !important; in every page. I did a Navigation Bar with React-Bootstrap and now when I move through the pages, there is a white glitch before turning it to black.
I tried to put the style in html, to load it faster, changed the color in body with !important, even overridden the bootstrap variable for background-color but neither of these worked.
I know that the glitch between the pages would dissappear if I would use just React NavBar not Bootstrap one and I've tried it, but there is also a glitch when you reload the page and it bothers me.
Has anyone any idea what could cause it?
My navigation bar is pretty simple:
<Navbar className="navbar" expand="sm">
<Navbar.Brand className="logo" href="#home" >React-Bootstrap</Navbar.Brand>
<Navbar.Toggle className="toggle" aria-controls="responsive-navbar-nav" />
<Navbar.Collapse className="navbar-links" id="responsive-navbar-nav" >
<Nav className="ms-auto">
<Nav.Link className="navlink" href="home">Home</Nav.Link>
<Nav.Link className="navlink" href="documents">Documents</Nav.Link>
<Nav.Link className="navlink" href="about">About</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar >
Later edit :
I tried in Google Chrome and it shows only sometimes ( 2-3 reloads), but still appears.
I am using react-bootstrap Cards on my project. I have great view with that. I have horizontal search button on it. I would like to use this button for routing.
I set my settings on my app.js class. Actually, I can change route with <Link> but my search button looks bad with it. I would like to use Search button while keeping visual design.
Sorry for my explanation, It's hard to explain without any visual support. if it is not clear please leave comment and I would try to clarify with onether way.
Here is my codes;
<Card bg="dark" text="white" style={{ width: "18rem" }}>
<Card.Header>SWITCH</Card.Header>
<Card.Body>
<Card.Title>Dark 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>
</Card.Body>
<Button variant="secondary">SEARCH</Button>
</Card>
I can do routing with wit this code;
<Card bg="dark" text="white" style={{ width: "18rem" }}>
<Card.Header>SWITCH</Card.Header>
<Card.Body>
<Card.Title>Dark 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>
</Card.Body>
<Link to={"/route which I defined in app.js"}>
<Button variant="secondary">SEARCH</Button></Link>
</Card>
But this time, search button's size decrease. Are there any way to stretch it? Or should I change usage of <Link> ?
You can use a package called react-router-bootstrap from npm and use it. It's very simple and for your use case find the below snippet.
<Link to={"/route which I defined in app.js"}><Button]>Foo</Button></Link>
becomes
import { LinkContainer } from 'react-router-bootstrap'
<LinkContainer to={"/route which I defined in app.js"}>
<Button>Foo</Button>
</LinkContainer>
find more on react-router-bootstrap
You probably will need to do some custom css styling still. You can open up your elements browser by clicking inspect in chrome and find the class of the link, then you can overwrite that class to match your styling needs.
Also try wrapping the link with the button
<Button variant="secondary"><Link>SEARCH</Link></Button>
NOTE: Even though it's not recommended and you should normally avoid it, you might need to use !important in your css when overwriting bootstrap.
you can try,
<Button as={Link} to="/your_destination">Foo</Button>
I am trying to make some icons appear like in the documentation here: https://react-bootstrap.netlify.com/components/navbar/ however I can not seem to get the same result:
<Nav.Item>
<Nav.Link className="text-white" target="_blank" href="#">
<OverlayTrigger
placement="bottom"
overlay={
<Tooltip id={"tooltip-bottom"}>
GitHub
</Tooltip>
}
>
<FontAwesomeIcon icon={faGithub} />
</OverlayTrigger>
</Nav.Link>
</Nav.Item>
Does anyone know how to make the icons appear like in the documentation?
Make sure you have added the packages #fortawesome/react-fontawesome and #fortawesome/free-solid-svg-icons.
Then you can import them in your component like so.
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faDatabase } from '#fortawesome/free-solid-svg-icons'
You can use them in your project like this:
<FontAwesomeIcon icon={faDatabase} />
If you go in your node_modules/#fortawesome/free-solid-svg-icons directory you will see a bunch of Typescript (.ts) files. These files represent the icons.
I could not find the Git icon in there so that might be the reason it's not showing up. However, the Git icon is available in the #fortawesome/fontawesome-free package as an SVG. The downside is that I don't think you can use the SVG icon with the component. This means that you may need to find another workaround for that.
I'm creatting web app with React Leaflet. How I can transfer marker popup to react-leaflet-sideatabs
Local machine with react (windows 10)
<Sidebar
id="sidebar"
position="right"
collapsed={this.state.collapsed}
closeIcon={<FontAwesomeIcon icon={faAngleRight} />}
selected={this.state.selected}
onOpen={this.onOpen.bind(this)}
onClose={this.onClose.bind(this)}
>
<Tab
id="markerinfo"
header="Information"
icon={<FontAwesomeIcon icon={faInfoCircle} />}
>
// I need to transfer marker information here
</Tab>
</Sidebar>
Not sure if I understand the question. But I think the answer is simply React state. Say you have a marker and only the title is kept in state, you can take it anywhere for that matter.
See this sandbox example.
https://codesandbox.io/s/react-sidebar-marker-wknsp
Note: the example from that sidebar GitHub page was not working with my styling/etc on code sandbox.io so slightly adapted.