Suppose I have a Material-UI FAB that's code looks like this:
<Fab size="medium" color="primary" aria-label="add">
<AddIcon />
</Fab>
I have a controlled way to toggle between this other state:
<Fab
variant="extended"
size="medium"
color="primary"
aria-label="add"
>
<NavigationIcon/>
Extended
</Fab>
My question is how do I achieve some kind of animation between these two states? I'm thinking of a way when the FAB expands, instead of suddenly displaying the text. I can't figure it out, any help is appreciated.
You could use MUI Transitions for example a Zoom animation. So your code becomes:
<Zoom
in={checked} //<-- checked is a bool that you should set to true when this Fab is active
>
<Fab size="medium" color="primary" aria-label="add">
<AddIcon />
</Fab>
</Zoom>
And the same thing for the other Fab.
Related
I am trying to learn Tailwind CSS and generally working better with CSS. In this case, I am trying to make my search icon appear inside of my search input field.
I found some tutorials online but they mostly use plain CSS.
Is there any simple way to achieve this using Tailwind?
import React from "react";
import { FaSearch } from "react-icons/fa";
const SearchBar = () => {
return (
<div>
<input className="bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56" />
<FaSearch />
</div>
I also tried to wrap the input elment in a <div> and <form> tags, but none of those worked.
This should do it:
<div className='flex items-center'>
<input className='bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56' />
<SearchIcon className='-ml-9' />
</div>
Docs:
align items | MDN
using negative margins | MDN
I'm new to Tailwind, and I'm not sure if there's a way to solve this edge case. Here is the scenario:
We have different variants listed on the product page(for example different color tags). When you hover we are showing a faded border around the tag, and when you select the variant, the tag becomes active, and its border should get darker.
The problem:
Even when the user clicks on the tag to make it active, the user still sees hover still rather than the 'active' style.
These are the classes I'm using for now
<Tag
clssName={`flex rounded border border-gray-200 bg-white hover:border-gray-400 ${active && 'border-gray-700'}`}
...prop
/>
Now the question is if there's a way to override the hover styles on when the item is active. One way could be to remove the hover class when the item is active, but I was wording if there is a Tailwind way to fix it.
You can add different styles for active and non-active variants.
<Tag
clssName={`flex rounded border bg-white ${active && 'border-gray-700 hover:border-black'}`} ${!active && "border-gray-200 hover:border-gray-400"}
...prop
/>
Well you can use focus utility for this.
Below is the example you can see where button has different behaviour on hover and focus.
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10">
<button class="p-4 bg-pink-100 hover:bg-pink-300 focus:bg-red-500 focus:border-2 focus:border-red-700">Click </button>
</div>
You can achieve this with a ternary operator on className. By default we have border-gray-200 hover:border-gray-400 when state changes, we replace border-gray-700 instead of border-gray-200 hover:border-gray-400.
const App = () => {
const [active, setActive] = React.useState(false);
return (
<button onClick = {() => setActive(!active)}
className={`flex p-3 rounded border bg-white ${active ? 'border-gray-700' : 'border-gray-200 hover:border-gray-400'}`
}>
{active ? 'Active' : 'Inactive'}
</button>
);
};
const rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render( < App / > );
<script src="https://cdn.tailwindcss.com"></script>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div id="root" class="p-10"></div>
It is showing up like this for me.
How do I make the content have padding, without having to write custom CSS and use the className property? My drawer essentially looks like this:
<Drawer
closable
visible
width={400}
placement="right"
title="Create"
>
<Form
layout="vertical"
>
<Form.Item name="name" label="Name">
<Input />
</Form.Item>
</Form>
</Drawer>
You can use the antd Grid to wrap your drawer content inside a row-col wrapper. To define the padding you can use the gutter property of row.
There is already and example for that on the antd drawer demo page.
I have a centered Toolbar in Material UI that has 3 components. Each component is a button. I want to add a margin around each button. I tried adding the {mt} option to the component button as below, but nothing changed. I've been experimenting with makeStyles, but haven't figured it out.
<Box display="flex">
<Box m="auto">
<Toolbar>
<SeasonComponent>
<WeekComponent>
<GameComponent>
</Toolbar>
</Box>
</Box>
Season component:
return (
<div>
<Button
variant="outlined"
color="primary"
onClick={handleClickOpen}
mt={2}
>
Button text
</Button>
</div>
Here is a picture of the buttons:
You can wrap buttons in a horizontal <Stack>:
<Toolbar>
<Stack spacing={2} direction="row">
<SeasonComponent>
<WeekComponent>
<GameComponent>
</Stack>
</Toolbar>
Here's a simple example: https://codesandbox.io/s/basicbuttons-material-demo-forked-0gpgz?file=/demo.js:234-269
Rather than upgrade my repo to version 5 right now, I just added an invisible button between the buttons. Not a perfect solution, but it solved the problem in the short term.
// SpacerButton.js
import React from 'react';
import Button from '#material-ui/core/Button';
const style = {
minWidth: 1
}
export default function SpacerButton(props) {
return (
<Button variant="text" style={style}>
</Button>
);
}
I am using react-bootstrap with a project and one component is having code as below. I want the input and button to appear together and take up the whole space provided by the Col. These both(input and button) are showing up together but the complete space is not occupied. Please Help!
<Row>
<Col xs={12} md={10} mdOffset={1} >
<Form className="addGoalForm" inline onSubmit={
handleSubmit
} >
<FormGroup className="addGoalForm">
<InputGroup>
<FormControl ref={textInput} type="text"/>
</InputGroup>
<Button bsStyle="primary" type="submit"> Add Goal </Button>
</FormGroup>
</Form>
</Col>
</Row>
Try taking the inline prop off from the Form
Problem:
The problem with your code is, you created an outer column, and added two elements inside it, they will just stack to the left - this is default behavior.
Solution:
Add column size for both input and button.
How?
Bootstrap col-xs-10 for input and col-xs-2 for button to occupy col-xs-12 of parent(consider your grid size for md, l sizes)
Create custom classes with width 80%/20% or as required.