to clarify I'm using react-bootstrap and trying to use bootstrap. I have the following:
import React from 'react'
// bootstrap
import { Button } from 'react-bootstrap';
const MainDisplay = () => {
return (
<div className='MainDisplayContainer'>
<div className='Header'>
<button>Header</button>
</div>
<div className='Body'>
body
</div>
<div className='Footer'>
footer
</div>
</div>
)
}
export default MainDisplay
and this is the sass:
#import "~bootstrap/scss/bootstrap";
.Header{
button{
#extend .btn;
}
}
.Body{
}
.Footer{
}
Essentially if I were to do this inline it would simply be:
<button className='btn btn-info'>Header</button>
but how would I do this in the sass file?
Not really understanding what you're needing to change in the SASS file but per your button example in React Bootstrap per the docs if you want:
<button className='btn btn-info'>Header</button>
you would use the variant info:
<Button variant="info">Header</Button>
Related
I'm trying to rotate a chevronDown button in react.js but the button is static.
here is my code.
import React, { useState, useEffect, useRef } from 'react'
import { chevronDown } from '../assets';
import styles from '../styles';
import { useOnClickOutside } from '../utils';
const AmountIn = () => {
const [showList, setShowList] = useState(false);
return (
<div className={styles.amountContainer}>
<input
placeholder="0.0"
type="number"
value=""
disabled={false}
onChange={() => {}}
className={styles.amountInput}
/>
<div className="relative" onClick={() => setShowList((prevState) => !prevState)}>
<button className={styles.currencyButton}>
{"ETH"}
<img
src={chevronDown}
alt="chevron down"
className={'w-4 h-4 object-contain ml-2 ${showList ? 'rotate-180' : 'rotate-0'}'}
/>
</button>
</div>
</div>
)
}
export default AmountIn
I'm expecting the button to rotate when the cursor is pointed at the button.
You can do this with the CSS :hover selector using transform. In your CSS module, you would use something like this to flip a chevron around
.currencyButton {
// core styling
&:hover {
img {
transform: rotate(0.5turn);
}
}
}
To expand on that, you can animate the change using a CSS transition.
I tried using the span pointing property <span class="label pointing-up bg-primary text-white">up</span> and QChip's pointing property as explained in the docs, but the pointing part doesn't work. I tried it in different projects, but the property doesn't work. Is there any other alternative?
You can use the quasar tooltip component I think.
Check out this codepen and see if it is any helpful to you.
const { ref } = Vue
const app = Vue.createApp({
setup () {
return {
showing: true
}
}
})
app.use(Quasar, { config: {} })
app.mount('#q-app')
<script src="https://cdn.jsdelivr.net/npm/quasar#2.7.7/dist/quasar.umd.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#3/dist/vue.global.prod.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quasar#2.7.7/dist/quasar.min.css" rel="stylesheet"/>
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md">
<div
style="width: 200px; height: 70px;"
class="bg-purple text-white rounded-borders row flex-center q-mt-md"
>
Hover here or click buttons
<q-tooltip v-model="showing">Tooltip text</q-tooltip>
</div>
</div>
</div>
I am working with React Bootstrap Modal. I'm trying to change the closeButton icon. But it didn't work.
<Modal.Header className='modal-head' closeButton>
<Modal.Title>Cart</Modal.Title>
</Modal.Header>
I don't think react-bootstrap library provides anything as such by itself. Although what you can do it add an icon right aligned in the modal header and add an onClick action which changes the modal's open state and closes it.
*You can take a look to this example, maybe it will be more clear to you.
You have just to import LoginButton.
Focus on
handleShow
export const LoginButton = () => {
const [fullscreen, setFullscreen] = useState(true);
const [show, setShow] = useState(false);
function handleShow(breakpoint) {
setShow(breakpoint);
setFullscreen(true);
}
return (
<div>
<Button className="me-2 mb-2" onClick={() => handleShow(true)}>
Login
</Button>
<Modal className="Modal_Login" show={show} fullscreen={fullscreen} onHide={() => setShow(false)} >
<Modal.Header className="Modal_Login_header" >
<Modal.Title className=" Modal_Login_header_title col-md-4" >Login</Modal.Title>
<Button className="col-md-2" onClick={() => handleShow(false)}> CLose </Button>
</Modal.Header>
<Modal.Body>Modal body content</Modal.Body>
</Modal>
</div>
)
};
CSS:
.Modal_Login{
display: flex;
flex-direction:row;
}
.Modal_Login_header{
display: flex;
flex-direction:row;
justify-content: flex-end;
}
I've been trying to put the icon very next to the scroll bar in my react page. Now I can't find a way to properly align items in the way I want.
Now here is what I got:
Now red square is where my icon is and green is where I want it to be. Also I want to be able to scroll page with icon still being there(so I want it always to be there). This will be my filtering inputs.
Here is my return of component:
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Form from 'react-validation/build/form';
import ArticleService from '../../services/article.service';
//import Filter from '../Filter/Filter';
import {
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
} from 'mdbreact';
import { Pagination } from 'semantic-ui-react';
import numeral from 'numeral';
const Dashboard = () => {
.....
return (
<div>
{loading ? (
<div className='text-white'>
<div className='float-right'> //here is where I'm using the icon
<MDBDropdown dropleft>
<MDBDropdownToggle caret color='#ffffff'>
<i className='fas fa-chevron-left'></i>
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem>
<p>Input1</p>
</MDBDropdownItem>
<MDBDropdownItem>
<p>Input2</p>
</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</div>
<div className='container'>
{renderHeader()}
<div className='text-center'>
<Form className='input-group mb-3' onSubmit={addFilter}>
{' '}
<input
type='text'
className='form-control text-center transparent-input'
placeholder='Unesite željenu lokaciju na području grada Sarajeva npr. Dobrinja'
aria-label='Unesite željenu lokaciju na području grada Sarajeva npr. Dobrinja'
aria-describedby='basic-addon2'
value={location}
onChange={onChangeLocation}
/>
<div className='input-group-append'>
<button
className='btn btn-grad rounded'
onClick={submitNameFilter}
>
<i className='fas fa-search-location'></i>
</button>
</div>
</Form>
</div>
<div className='d-flex'>
<div className='row row-cols-1 row-cols-md-3 custom-p'>
{content.map(card)}
</div>
<div></div>
</div>
</div>
<div className='mb-5 mt-5 text-center'>
<Pagination
totalPages={Math.ceil(total / 15)}
onPageChange={(e, d) => {
parsedUrl.set('page', d.activePage);
const pushPageToURL = parsedUrl.toString();
setPage(d.activePage);
window.history.pushState(null, null, `?${pushPageToURL}`);
}}
activePage={page}
/>
</div>
</div>
) : (
<div className='spinner-border text-primary text-center' role='status'>
<span className='sr-only'>Loading...</span>
</div>
)}
</div>
);
};
export default Dashboard;
Note that I'm using bootstrap.
you have to use the fixed position, Which in bootstrap becomes position-fixed || fixed-top.
pure css example:
#icon {
position: fixed;
top: 0;
}
take a look at this example:
https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/
Suppose I have added the v-text-field component of Vuetify in my Vue component like
<v-text-field v-model="email"name="email" type="email" color="#90C143" label="Email">
When I inspect that element, it generates normal HTML like
<div class="v-input v-input--has-state theme--light v-text-field v-text-field--is-booted" style="">
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-text-field__slot">
<label for="input-39" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Email
</label>
<input name="email" id="input-39" type="email">
</div>
<div class="v-input__append-inner">
<div class="v-input__icon v-input__icon--">
<i role="button" class="v-icon notranslate v-icon--link material-icons theme--light" style="">
</i>
</div>
</div>
</div>
</div>
</div>
What I have to process, If I want to customize the Whole CSS for that v-text-field without affecting the functionality
Add a css class inside the component:
<style scoped>
.text-field{
color: #90C143 !important; /* this will override the existing property applied */
/* add whatever properties you want */
}
</style>
Then in the component add this to class instead of color property:
<v-text-field v-model="email"name="email" type="email" class="text-field" label="Email">
You can use only the predefined classes given in vuetify documentation.
If you want to use custom color on the color property you can set your
own theme in Vuetify object in main.js:
Vue.use(Vuetify)
const vuetify = new Vuetify({
theme: {
themes: {
light: {
primary: '#90C143',
secondary: '#b0bec5',
anchor: '#8c9eff',
},
},
},
})
Now you can use the specified theme overrides in any component:
<v-text-field v-model="email"name="email" type="email" color="primary" label="Email">
You can alternatively apply CSS globally in app.vue:
<style>
/* don't use scoped css */
.theme--light.v-text-field>.v-input__control>.v-input__slot:before {
border-color: #90C143;
}
.theme--light.v-label {
color: #90C143;
}
.theme--light.v-input:not(.v-input--is-disabled) input, .theme--light.v-input:not(.v-input--is-disabled) textarea {
color: #90C143;
}
</style>