7.12.0
版本发布时间: 2024-08-06 00:07:06
mantinedev/mantine最新发布版本:7.12.2(2024-08-30 21:32:34)
View changelog with demos on mantine.dev website
Notifications at any position
It is now possible to display notifications at any position on the screen with @mantine/notifications package:
import { Button } from '@mantine/core';
import { notifications } from '@mantine/notifications';
const positions = [
'top-left',
'top-right',
'bottom-left',
'bottom-right',
'top-center',
'bottom-center',
] as const;
function Demo() {
const buttons = positions.map((position) => (
<Button
key={position}
onClick={() =>
notifications.show({
title: `Notification at ${position}`,
message: `Notification at ${position} message`,
position,
})
}
>
{position}
</Button>
));
return <Group>{buttons}</Group>;
}
Subscribe to notifications state
You can now subscribe to notifications state changes with useNotifications
hook:
function Demo() {
const [counter, { increment }] = useCounter();
const notificationsStore = useNotifications();
const showNotification = () => {
notifications.show({
title: `Notification ${counter}`,
message: 'Most notifications are added to queue',
});
increment();
};
return (
<>
<Button onClick={showNotification} mb="md">
Show notification
</Button>
<Text>Notifications state</Text>
<Code block>{JSON.stringify(notificationsStore.notifications, null, 2)}</Code>
<Text mt="md">Notifications queue</Text>
<Code block>{JSON.stringify(notificationsStore.queue, null, 2)}</Code>
</>
);
}
SemiCircleProgress component
New SemiCircleProgress component:
import { SemiCircleProgress } from '@mantine/core';
function Demo() {
return (
<SemiCircleProgress
fillDirection="left-to-right"
orientation="up"
filledSegmentColor="blue"
size={200}
thickness={12}
value={40}
label="Label"
/>
);
}
Tree checked state
Tree component now supports checked state:
import { IconChevronDown } from '@tabler/icons-react';
import { Checkbox, Group, RenderTreeNodePayload, Tree } from '@mantine/core';
import { data } from './data';
const renderTreeNode = ({
node,
expanded,
hasChildren,
elementProps,
tree,
}: RenderTreeNodePayload) => {
const checked = tree.isNodeChecked(node.value);
const indeterminate = tree.isNodeIndeterminate(node.value);
return (
<Group gap="xs" {...elementProps}>
<Checkbox.Indicator
checked={checked}
indeterminate={indeterminate}
onClick={() => (!checked ? tree.checkNode(node.value) : tree.uncheckNode(node.value))}
/>
<Group gap={5} onClick={() => tree.toggleExpanded(node.value)}>
<span>{node.label}</span>
{hasChildren && (
<IconChevronDown
size={14}
style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
/>
)}
</Group>
</Group>
);
};
function Demo() {
return <Tree data={data} levelOffset={23} expandOnClick={false} renderNode={renderTreeNode} />;
}
Disable specific features in postcss-preset-mantine
You can now disable specific features of the postcss-preset-mantine
by setting them to false
in the configuration object. This feature is available starting from
postcss-preset-mantine@1.17.0
.
module.exports = {
'postcss-preset-mantine': {
features: {
// Turn off `light-dark` function
lightDarkFunction: false,
// Turn off `postcss-nested` plugin
nested: false,
// Turn off `lighten`, `darken` and `alpha` functions
colorMixAlpha: false,
// Turn off `rem` and `em` functions
remEmFunctions: false,
// Turn off `postcss-mixins` plugin
mixins: false,
},
},
};
Help Center updates
-
Server components guide has been updated to include
Component.extend
usage in server components. -
A guide on applying input focus styles has been updated to work correctly with PasswordInput and other components in which the
input
selector is not used for actual input element. - The guide on how to disable all inputs in the form now includes additional instructions for use-form.
- New Can I have color schemes other than light and dark? guide explains the difference between color scheme and theme and why Mantine does not support custom color schemes.
- New Why VSCode cannot autoimport Text component? guide explains why VSCode cannot automatically import
Text
component. - New Are Mantine components accessible? question
- New How can I focus the first input with error with use-form? question
- New How to scroll to the top of the form if the form is submitted with errors? question
- New Why my notifications are displayed at a wrong position? question
- New Why my screen is completely empty after I've added notifications package? question
- New Why can I not use value/label data structure with Autocomplete/TagsInput? question
- New Why FileButton does not work in Menu? question
- New How can I display different elements in light and dark color schemes? question
Other changes
-
use-interval hook now supports
autoInvoke
option to start the interval automatically when the component mounts. -
use-form with
mode="uncontrolled"
now triggers additional rerender when dirty state changes to allow subscribing to form state changes. -
ScrollArea component now supports
onTopReached
andonBottomReached
props. The functions are called when the user scrolls to the top or bottom of the scroll area. -
Accordion.Panel component now supports
onTransitionEnd
prop that is called when the panel animation completes.