I have a problem in switching component. It's too slow to switch animation, there are more delays than 1000ms.
My Component structure looks like this:
<div>
<Tabs
value={value}
onChange={this.handleChange}
>
<Tab label="Item One" />
<Tab label="Item Two" />
</Tabs>
{value === 0 && <TabContainer>Item One</TabContainer>}
</div>
The component is a complex component, where there are many data needs to be displayed.
I want the < Tab > component to complete the switching animation immediately, instead of waiting to happen with the < TabContainer > component.
Related
I'm using the material UI Tabs in my project cause I thought it fits my web logic.
However, I need to set it as unselected as default. What I did is set the default state value as 'undefinded'. It acturly works as the 1st item of the Tabs won't be selected as default, but I also getting the following error from the console:
Material-UI: The value provided to the Tabs component is invalid.
None of the Tabs' children match with undefined.
You can provide one of the following values: 0, 1, 2.
Anyone knows how to accomplish my target and avoid the error message?
export default function SimpleTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(); //I set the default value to undefinded to make the Tabs unselected as default but also getting the error message.
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</div>
);
}
From the docs > Props > value:
The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to false.
To accomplish this, set the initial value to false:
const [value, setValue] = React.useState(false);
It is possible to put button in endAdornment in TextField, e.g. with code:
<TextField size="small" type="text" id="m_general_reference" value={this.props.invoice.general_reference}
InputProps={{
endAdornment: (
<InputAdornment>
<Button variant="outlined" size="small" style={{textTransform: 'none', height: '20px'}}>
Check General Reference
</Button>
</InputAdornment>
)
}} />
But this code does not work when TextField is changed to Input. Is there more or less standard markup to put endAdornment button in InputField? I am interested in more or less standard solution only and no hacks (in case of hacks I will go with TextField).
I use Quasar's (Vue.js) q-form with inputs that need validation e.g. required.
I need to make a reusable Vue component with multiple inputs, making the site more consistent and easy to maintain.
When I use Quasar's q-input (text2) in the same Vue component as q-form (Index.vue), the input validation is triggered when submit button is clicked, but the validation is skipped for the input in the child component (TextComponent / text1):
<q-form ref="form" #submit="onSubmit" #reset="onReset">
<TextComponent :text.sync="text1" label="Text 1 *"></TextComponent>
<q-input
filled
v-model="text2"
label="Text 2 *"
style="width: 250px"
lazy-rules
:rules="[(val) => (val && val.length > 0) || 'Required']"
/>
<div>
<q-btn label="Submit" type="submit" color="primary" />
<q-btn
label="Reset"
type="reset"
color="primary"
flat
class="q-ml-sm"
/>
</div>
</q-form>
Childcomponent (TextComponent.vue):
<q-input
filled
:value="text"
:label="label"
lazy-rules
style="width: 250px"
:rules="[(val) => (val && val.length > 0) || 'Required']"
#input="$emit('update:text', $event)"
/>
I have created a small sample project with the src/pages/Index.vue and TextComponent.vue on codesandbox.io: https://codesandbox.io/s/still-cache-pzu3g?file=/src/pages/Index.vue
Does anyone know how to tackle this problem?
can't use link tag inside material tab tag in material ui
none of codes inside Tab doesn't work
<Tabs>
<Tab>
<Link
style={isActive(history, "/cart")}
to="/cart"
>
Cart{" "}
<sup>
<small className="cart-badge">{itemTotal()}</small>
</sup>
</Link>
<Tab/>
<Tabs/>
By the documentation Tab doesn't support children. Instead you can use component prop.
https://material-ui.com/api/tab/#props
<Tabs>
<Tab
component={() => (
<Link
style={isActive(history, "/cart")}
to="/cart"
>
Cart{" "}
<sup>
<small className="cart-badge">{itemTotal()}</small>
</sup>
</Link>
)}/>
</Tabs>
Is there a way to use any of the material-ui transition components on list elements so that they get animated on addition/deletion (but not mount)?
Just like here: https://reactcommunity.org/react-transition-group/transition-group
You can use the <Fade> transition (or any other transition that material-ui has) and wrap your list-items with that transition.
<Fade in timeout={1500}>
<ListItem key={value} role="listitem" button onClick={handleToggle(value)}>
<ListItemIcon>
<Checkbox
checked={checked.indexOf(value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ 'aria-labelledby': labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={`List item ${value + 1}`} />
</ListItem>
</Fade>
You can see a working example here: https://codesandbox.io/s/mui-fade-transition-list-item-e4i0c?file=/demo.js
The original code is from the example in the material ui transfer list page.