Sourced from @​mantine/form's
releases.
7.13.0 🎇
View changelog with demos on mantine.dev website
Container queries support in Grid
You can now use container queries in Grid component. With container queries, all responsive values are adjusted based on the container width, not the viewport width.
Example of using container queries. To see how the grid changes, resize the root element of the demo with the resize handle located at the bottom right corner of the demo:
import { Grid } from '@mantine/core';function Demo() { return ( // Wrapper div is added for demonstration purposes only, // it is not required in real projects <div style={{ resize: 'horizontal', overflow: 'hidden', maxWidth: '100%' }}> <Grid type="container" breakpoints={{ xs: '100px', sm: '200px', md: '300px', lg: '400px', xl: '500px' }} > <Col span={{ base: 12, md: 6, lg: 3 }}>1</Col> <Col span={{ base: 12, md: 6, lg: 3 }}>2</Col> <Col span={{ base: 12, md: 6, lg: 3 }}>3</Col> <Col span={{ base: 12, md: 6, lg: 3 }}>4</Col> </Grid> </div> ); }
CompositeChart component
New CompositeChart component allows using
Line,AreaandBarcharts together in a single chart:import { CompositeChart } from '@mantine/charts'; import { data } from './data';function Demo() { return ( <CompositeChart h={300} data={data} dataKey="date" unit="$" maxBarWidth={30} </tr></table>
... (truncated)