new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Mantine · all subjects

menu/props

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Menu transitions

The Menu dropdown can be animated with any of the premade transitions from the Transition component.

alignItemsLabels prop for Menu

Use the alignItemsLabels prop on Menu to control how indicator slot space is reserved when mixing Menu.Item with Menu.CheckboxItem or Menu.RadioItem. alignItemsLabels="with-indicators" (default) reserves indicator space on Menu.CheckboxItem and Menu.RadioItem only, leaving regular Menu.Item unpadded. alignItemsLabels="all" reserves indicator space on every Menu.Item so labels align. alignItemsLabels="none" reserves indicator space only on items that currently show an indicator, with layout shifts when toggled.

checkIcon prop for Menu

Use the checkIcon prop to replace the default indicator rendered by Menu.CheckboxItem and Menu.RadioItem. Setting checkIcon on Menu applies to all checkbox/radio items in the dropdown. Setting checkIcon on an individual item overrides the menu-level value.

Controlled Menu with opened and onChange

The dropdown's opened state can be controlled with the opened and onChange props. Pass opened as a boolean and onChange as a callback that receives the new state.

Controlled Menu example

```tsx import { useState } from 'react'; import { Menu } from '@mantine/core'; function Demo() { const [opened, setOpened] = useState(false); return ( <Menu opened={opened} onChange={setOpened}> {/* Menu content */} </Menu> ); } ``` This example shows how to control Menu's opened state.

Menu trigger hover mode

Set trigger="hover" to reveal the dropdown when hovering over the menu target and dropdown. The closeDelay and openDelay props can be used to control open and close delay in ms. If you set closeDelay={0} then the menu will close before the user reaches the dropdown, so set offset={0} to remove space between the target element and dropdown. Menu with trigger="hover" is not accessible for keyboard users.

Menu trigger click-hover for accessible hover menus

Use trigger="click-hover" to make a Menu accessible on all devices. The dropdown will be revealed on hover on desktop and on click on mobile devices. This provides both hover and click triggers while maintaining keyboard accessibility.

Menu.Item component prop

By default, Menu.Item renders as a button element. To change that, set the component prop. The component you pass should allow spreading props to its root element and accept a ref prop to work correctly with Menu.Item.

Menu.Item component prop requirement

The component you pass to Menu.Item's component prop should allow spreading props to its root element and support a ref parameter. A function component should destructure and spread {...props} and accept {...ref} to work correctly with Menu.Item.

Give your agent this brain