This is forked from [mantine-layout-components](https://github.com/kitze/mantine-layout-components) and updated to work with Mantine 7.x.x.
npm install @czechue/mantine-layout-componentsThis is forked from mantine-layout-components and updated to work with Mantine 7.x.x.
Mantine Layout Components is a collection of React components for creating horizontal and vertical layouts easily.
Built on top of Mantine's Group and Stack.
> Please note, starting from version 1.0.0, this package requires @mantine/core version 7.x.x.
> If you are using @mantine/core version < 7.0.0, please install mantine-layout-components version 0.1.2
You can install mantine-layout-components via npm or yarn:
npm:
``bash`
npm install mantine-layout-components
yarn:
`bash`
yarn add mantine-layout-components
For a complete list of props and behaviors, please refer to the stories components.
The Horizontal component allows you to create a horizontal flows for your elements.
`tsx
import React from 'react';
import { Horizontal } from 'mantine-layout-components';
const MyComponent = () => (
Element 1
Element 2
{/ Add more elements here /}
);
`
The Vertical component allows you to create a vertical flows for your elements.
`tsx
import React from 'react';
import { Vertical } from 'mantine-layout-components';
const MyComponent = () => {
return (
Element 1
Element 2
{/ Add more elements here /}
);
};
`
For debugging purposes, you can add debug prop to any component to see its boundaries.
`tsx
import React from 'react';
const MyComponent = () => {
return (
Element 1
Element 2
{/ Add more elements here /}
);
};
`
You can make any component full width or full height by adding fullW or fullH props.
`tsx
import React from 'react';
import { MantineProvider } from '@mantine/core';
const MyComponentFullW = () => (
Element 1
Element 2
{/ Add more elements here /}
);
const MyComponentFullH = () => (
Element 1
Element 2
{/ Add more elements here /}
);
`
Starting from version 1.0.0, this package requires @mantine/core version 7.x.x.
This is a brief overview of the migration steps. For a comprehensive migration guide, please refer to the official Mantine 6.x.x to 7.x.x Migration Guide.
#### Imortant Changes
1. Add Style Imports: Import styles from @mantine/core as follows:
`ts`
import '@mantine/core/styles.layer.css';
2. Use MantineProvider: Implement MantineProvider from @mantine/core:
`tsx`
import { MantineProvider } from '@mantine/core';
3. Change Spacing Property: Replace the spacing prop with the gap prop:
`tsx``