I'm trying to add navbar from sample as below:
const Header = () => {
return (
<>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
<NavDropdown title="Dropdown" id="basic-nav-dropdown" className="dropdown-menu-right">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</>
);
};
export default Header;
It's work fine, but I want to submenu [dropdown] move to right when run desktop (mobile keep same), while the all dropdown pop in the bottom
Can any one advise
Thank you
Related
I'm using a Navbar component with Nav.Link components for each page that I'm linking to. I have those links centered. I would like to add a 'Sign In' button that is justified to the right. So far, the "ml-auto" class name has not worked. Is there a simple way to justify individual (or groups) of links differently on the same Navbar?
Here is the code:
return (
<Navbar bg="dark" variant="dark" fixed="top">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse className="justify-content-center">
<Nav defaultActiveKey="1">
<Nav.Link as={Link} to="/about" eventKey="1">About Me</Nav.Link>
<Nav.Link as={Link} to="/exp" eventKey="2">Experience</Nav.Link>
<Nav.Link as={Link} to="/edu" eventKey="3">Education</Nav.Link>
<Nav.Link as={Link} to="/skills" eventKey="4">Skills</Nav.Link>
<Nav.Link href="#signIn">Sign In</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
Here is my Navbar currently
I am trying to stack multiple v-snackbars from the bottom. The inline style to set bottom property doesn't seem to affect it.
Snackbar.vue
<template>
<div>
<v-snackbar
v-for="(snackbar, index) in snackbars"
:key="index"
v-model="snackbar.visible"
:color="snackbar.color"
:style="{ bottom: `${index * 60 + 8}px` }"
>
{{ snackbar.text }} </v-snackbar>
<div>
</template>
...
App.vue
<template>
<v-app>
<ProgressCircular />
<Snackbar />
<v-main>
<transition mode="out-in" name="fade">
<router-view />
</transition>
</v-main>
</v-app>
</template>
You need to add "absolute" attribute.
<v-snackbar
v-for="(snackbar, index) in snackbars"
:key="index"
v-model="snackbar.visible"
:color="snackbar.color"
:style="{ bottom: `${index * 60 + 8}px` }"
absolute
bottom
>
{{ snackbar.text }}
</v-snackbar>
I am new to ReactJS and having trouble using the react-bootstrap navbar. I could use guidance as there's little or no information on this.
When I create a component and write the below coding and run the site its load infinitely
//index.js
import React from 'react'
import { Nav, NavDropdown, Form, FormControl, Button } from "react-bootstrap"
function Navbar(){
return (
<>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#">Navbar scroll</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav className="mr-auto my-2 my-lg-0" style={{ maxHeight: '100px' }} navbarScroll >
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<NavDropdown title="Link" id="navbarScrollingDropdown">
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">Another action</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">Something else here</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="#" disabled>
Link
</Nav.Link>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className="mr-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</>
)
};
I can navigate to {Home} component using "react-router" like this:
import { Route } from "react-router";
<Route exact path="/" component={Home} />
I would like to navigate to {Home} component using "react-bootstrap/Navbar" instead? Existing example provide only code like this
<Navbar.Collapse>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
I don't understand how to modify this code to use the existing {Home} component?
Please help
Thank you
You can use something like this
And make sure to import Link
import { Link } from 'react-router-dom';
<Nav className="mr-auto">
<Nav.Link as={Link} to="/create-order" >
Create Order
</Nav.Link>
<Nav.Link as={Link} to="/update-profile" >
Update Profile
</Nav.Link>
</Nav>
You can use as property to change the type of the NavLink item and to property to set the path.
Try this
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/home">Home</Nav.Link>
<Route exact path="/home" component={HomeComponent} />
</Nav>
</Navbar.Collapse>
</Navbar>
Can you tell me why the icon to the right of the v-text-field is not displayed?
I want to make the calendar open when you click on the icon.
codepen
<div id="app">
<v-app id="inspire">
<v-menu>
<template v-slot:activator="{ on }">
<v-text-field label="Hello world" style="max-width: 200px">
<!--The icon is not displayed-->
<v-icon v-on="on" color="primary" dark>event</v-icon>
</v-text-field>
</template>
<v-date-picker>
</v-date-picker>
</v-menu>
</v-app>
</div>
P.S.
Here is a good example. It's not mine.
Codepen
The HTML input field is empty https://www.w3schools.com/tags/tag_input.asp
There's an attribute to prepend and append icons in textfields in Vuetify: https://vuetifyjs.com/en/components/text-fields/#icons
You simply need to add it:
<v-text-field label="Hello world" style="max-width: 200px" append-icon="event">
I managed to do it. I did this without the activator template.
codepen vuetify
<div id="app">
<v-app id="inspire">
<v-text-field
label="Hello world"
style="max-width: 200px"
append-icon="event"
#click:append="show">
</v-text-field>
<v-menu
v-model="menu"
:position-x="x"
:position-y="y"
absolute >
<v-date-picker />
</v-menu>
</v-app>
</div>
show (e) {
console.log(123);
e.preventDefault();
this.menu = false;
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.menu = true
})
},