group | title | order | slug | release | date |
---|---|---|---|---|---|
changelog |
Version 5.9.0 |
1 |
/changelog/5-9-0/ |
December 1st, 2022 |
import { Anchor } from '@mantine/core'; import { HooksDemos, ColorInputDemos } from '@mantine/demos';
New use-eye-dropper hook provides an interface to work with EyeDropper API. It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.
ColorInput component now supports withEyeDropper
prop to display eye dropper icon in the right section.
This feature depends on EyeDropper API,
the eye dropper will not be rendered if the API is not supported.
AppShell component now supports placing Navbar
and Aside
components on top of Header
and Footer
with layout="alt"
prop.
<Anchor href="/app-shell-demo-alt/" target="_blank" mb="xl" style={{ display: 'block' }}> Open alt layout example in new tab
Grid component now supports gutterXs
, gutterSm
, gutterMd
, gutterLg
, gutterXl
props:
All static components now support default props on MantineProvider.
The following example demonstrates how to add default props to Menu.Item
, Tabs.List
and
RichTextEditor.Toolbar
components:
import { MantineProvider, Button } from '@mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
components: {
MenuItem: {
defaultProps: { color: 'red' },
},
TabsList: {
defaultProps: {
position: 'right',
},
},
RichTextEditorToolbar: {
defaultProps: {
sticky: true,
stickyOffset: 60,
},
},
},
}}
>
<App />
</MantineProvider>
);
}
Input.Placeholder
component can be used to add placeholder to Input and InputBase components that are based on button
element
or do not support placeholder property natively:
- RangeSlider component now supports
maxRange
prop - Stepper component now supports any CSS color value in
color
prop - use-hotkeys hook now allows to configure whether default behavior should be prevented
- Input and other components based on it now support any valid CSS size value in
rightSectionWidth
andiconWidth
props