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>
</>
)
};
Related
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
What I am trying to do is to Design a new Vue/Inertia Login / Register modal on the frontend for the standard Vue scaffolding that comes with Laravel Breeze.
Exactly what I am trying to achieve is this:
Login / Register Button -> Clicked and a modal opens
The modal contains a header section where there is a "Login" tab and a "Register" tab, by default the login tab is selected. It then contains a body section that is a panel that switches between the "login.vue" file and the "register.vue" file.
It is from my understanding that I need to do the following:
Create a Vue file for the button that creates the modal that includes a vue file that houses the tabs and switching panel, that call the "Login" & "Register" Vue files.
I hope my understanding of the way that the Vue3.js framework handles things is correct.
I am very new to Laravel, and to Vue, so please bear with me.
My file structure is as follows
resources | js | Pages | Auth -> Login.vue (standard code in file)
resources | js | Pages | Auth -> Register.vue (standard code in file)
resources | js | Pages | Modal -> LoginRegister.vue
<script>
import Register from "./Auth/Register.vue";
import Login from "./Auth/Login";
export default {
data: function () {
return {
tabs: ["Login", "Register"],
selected: "Login",
};
},
components: {
Register,
Login,
},
};
</script>
<template>
<div>
<button
v-for="tab in tabs"
:key="tab"
#click="selected = tab;"
:class="['tab-btn', { active: selected === tab }]"
>
{{ tab }}
</button>
<component :is="selected" class="tab"></component>
</div>
</template>
or alternatively I have tried this code in the LoginRegister.vue too
<style>
.tab-btn {
padding: 6px 10px;
background: #ffffff;
cursor: pointer;
margin-bottom: 1rem;
border: 2px solid #cccccc;
outline: none;
}
.active {
border-bottom: 3px solid green;
background: whitesmoke;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
</style>
<script>
import Login from "./Auth/Login.vue";
import Register from "./Auth/Register.vue";
import PrimaryButton from "#/Components/PrimaryButton.vue";
export default { components: { Login, Register } };
</script>
<template>
<div>
<PrimaryButton v-on:click="showModal = true"
>Login / Register</PrimaryButton
>
<modal v-if="showModal" #close="showModal = false">
<div
class="modal fade"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="LoginRegisterModal"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Login / Register</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a
href="#tab1"
aria-controls="home"
role="tab"
data-toggle="tab"
>Login</a
>
</li>
<li role="presentation">
<a
href="#tab2"
aria-controls="profile"
role="tab"
data-toggle="tab"
>Register</a
>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<Login></Login>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<Register></Register>
</div>
</div>
</div>
</div>
</div>
</div>
</modal>
</div>
</template>
I still have not worked out how to create a button that will launch this in a modal yet too, I know I am a long way off, but I would really appreciate guidance.
I found a solution which works well... the following code.
<script setup>
import { computed, onMounted, onUnmounted, watch } from 'vue';
const props = defineProps({
show: {
type: Boolean,
default: false,
},
maxWidth: {
type: String,
default: '2xl',
},
closeable: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['close']);
watch(() => props.show, () => {
if (props.show) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = null;
}
});
const close = () => {
if (props.closeable) {
emit('close');
}
};
const closeOnEscape = (e) => {
if (e.key === 'Escape' && props.show) {
close();
}
};
onMounted(() => document.addEventListener('keydown', closeOnEscape));
onUnmounted(() => {
document.removeEventListener('keydown', closeOnEscape);
document.body.style.overflow = null;
});
const maxWidthClass = computed(() => {
return {
'sm': 'sm:max-w-sm',
'md': 'sm:max-w-md',
'lg': 'sm:max-w-lg',
'xl': 'sm:max-w-xl',
'2xl': 'sm:max-w-2xl',
}[props.maxWidth];
});
</script>
<template>
<teleport to="body">
<transition leave-active-class="duration-200">
<div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="ease-in duration-200"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="show" class="fixed inset-0 transform transition-all" #click="close">
<div class="absolute inset-0 bg-gray-500 opacity-75" />
</div>
</transition>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
leave-active-class="ease-in duration-200"
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div v-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
<slot v-if="show" />
</div>
</transition>
</div>
</transition>
</teleport>
</template>
Then use headless ui for the switching tabs, works well.
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
In a vue page I added a ImageUpload component, following this tutorial: https://www.youtube.com/watch?v=kvNozA8M1HM
It works more or less. No errors, but it only shows my image and a ruler. I can zoom using the ruler, but it does not show boundaries, circle etc. It is completely different from the example in the tutorial...
It is buggy, so to say.
<template>
<div class="Image-Upload-wrapper Image-upload">
<p>
This is image upload wrapper component
</p>
<div id="croppie"> </div>
</div>
</template>
<script>
// uitleg over Croppie::https://www.youtube.com/watch?v=kvNozA8M1HM
import Croppie from 'croppie';
export default {
props:[
'imgUrl'
],
mounted(){
this.image = this.imgUrl // als component is mounted, this.image definieren, en daartmee croppie in..
this.setUpCroppie()
},
data(){
return{
image:null,
croppie:null
}
},
methods:{
setUpCroppie(){
let el = document.getElementById('croppie');
this.croppie = new Croppie(el, {
viewport:{width:200,height:200,type:'circle'},
boundary:{ width:220,height:220},
showZoomer:true,
enableOrientation: true
});
this.croppie.bind({
url:this.image
});
}
}
}
</script>
Is placed in parent as follows:
template>
<div>
<h2>Cards 1</h2>
<div class="form-group">
<input type="text" class="form-control" :placeholder="card.title" v-model="card.title">
</div>
<div class="form-group">
<textarea class="form-control" :placeholder="card.description" v-model="card.description">
</textarea>
</div>
<div id="preview" v-if="url" >
<h4> Preview</h4>
<ImageUpload :imgUrl="url"></ImageUpload>
<!-- <img class="img-circle" style="width:150px" :src="url" /> -->
</div>
<input type="file" v-on:change="onFileChange" ref="fileUpload" id="file_picture_input">
<button #click="editCard(currentSpelerCard)" class="btn btn-warning m-1" style="width:100px;color:black"> Save Card </button>
</div>
</template>
In my package.json I have:
"croppie": "^2.6.5",
in webpack mix I have:
mix.js('resources/js/app.js', 'public/js')
mix.vue();
mix.sass('resources/sass/app.scss', 'public/css');
I have a feeling that something is wrong with the installation of croppie.
Does anyone know what could be the problem here?
Googloing on I found the remark:
"#Since this package also depends on croppie.css you have to import it in your app.js import 'croppie/croppie.css'"
I added the following line to bootstrap.js:
import 'croppie/croppie.css';
I am using vue-select in my project along with tabulator. I was able to fetch data from json file and view it. But when selecting the options i get an error saying " Component emitted event "option:selecting" but it is neither declared in the emits option nor as an "onOption:selecting" prop. ". I could not resolve this error after multiple try. Below is the code.
**<template>
<form>
<div class="container h-25 w-10/12 mx-auto pb-3 border 2 border-gray-300 flex flex-col rounded-md items-left bg-gray-100" >
<label class="px-3 py-1 w-10/12 text-xs text-black font-medium">Employee</label>
<div class="px-2">
<v-select v-model="Selected" multiple :options="options" label="Employee" placeholder="---SELECT---" class="style-chooser"></v-select>
</div>
<!-- <span>Selected: {{ Employee_Id }}</span> -->
</div>
</form>
<!-- <ul><li v-for="item in datas" :key="item.Employee">{{ item.Employee }}</li></ul> -->
</template>
<script>
import dataset from './dataset.json'
export default {
data(){
return {
openCard: false,
Selected: ""
}
},
computed: {
options: () => dataset
},
methods:{
open(){
this.openCard = ! this.openCard
},
},
}
</script>**
Your help is highly appreciated la.