John Outcast
Levi Capitan
}
>
Life is like an npm install β you never know what you are going to get.); } ``` #### Props **Blockquote props** | Prop | Type | Default | Description | |------|------|---------|-------------| | cite | React.ReactNode | - | Reference to a cited quote | | color | MantineColor | - | Key of `theme.colors` or any valid CSS color | | icon | React.ReactNode | - | Blockquote icon, displayed at the top left side | | iconSize | string \| number | - | Controls icon `width` and `height`, numbers are converted to rem | | radius | MantineRadius \| number | - | Key of `theme.radius` or any valid CSS value to set `border-radius` | #### Styles API Blockquote component supports Styles API. With Styles API, you can customize styles of any inner element. Follow the documentation to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles. **Blockquote selectors** | Selector | Static selector | Description | |----------|----------------|-------------| | root | .mantine-Blockquote-root | Root element | | icon | .mantine-Blockquote-icon | Icon element | | cite | .mantine-Blockquote-cite | Cite element | **Blockquote CSS variables** | Selector | Variable | Description | |----------|----------|-------------| | root | --bq-bd | Controls `border` | | root | --bq-bg-dark | Controls `background-color` in dark color scheme | | root | --bq-bg-light | Controls `background-color` in light color scheme | | root | --bq-icon-size | Controls `width` and `height` of the icon | | root | --bq-radius | Controls `border-radius` | -------------------------------------------------------------------------------- ### Box Package: @mantine/core Import: import { Box } from '@mantine/core'; Description: Base component for all Mantine components ## Usage `Box` component is used as a base for all other components. `Box` supports the following features: * [component prop](https://alpha.mantine.dev/llms/guides-polymorphic.md) * [style props](https://alpha.mantine.dev/llms/styles-style-props.md) * [style prop](https://alpha.mantine.dev/llms/styles-style.md) You can use `Box` as a base for your own components or as a replacement for HTML elements: ```tsx import { Box } from '@mantine/core'; function Demo() { return (
React.createElement();
}
```
## Block code
To render code in a `pre` element, pass the `block` prop to the Code component:
```tsx
import { Code } from '@mantine/core';
const codeForPreviousDemo = `import { Code } from '@mantine/core';
function Demo() {
return React.createElement();
}`;
function Demo() {
return {codeForPreviousDemo};
}
```
## Custom color
By default, the code color is gray. You can change it to any valid CSS color or to one
of the [theme.colors](https://alpha.mantine.dev/llms/theming-colors.md):
```tsx
import { Code, Group } from '@mantine/core';
function Demo() {
return (
React.createElement()
React.createElement()
Breakout
Container inside breakout
Drawer with scroll
); return ( <>Drawer with scroll
); return ( <>
width: 100%
right: 0
);
}
```
## Accessibility
`Drawer` component follows [WAI-ARIA recommendations](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog) on accessibility.
Set `title` props to make component accessible, will add `aria-labelledby` to the content element:
```tsx
import { Drawer } from '@mantine/core';
function Demo() {
return -
{files.map((file, index) => (
- {file.name} ))}
{controls}
);
}
```
## Multiple rows
`FloatingIndicator` can be used to highlight the active element in a group with multiple rows:
```tsx
import { useState } from 'react';
import { ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, CircleIcon } from '@phosphor-icons/react';
import { FloatingIndicator, UnstyledButton } from '@mantine/core';
import classes from './Demo.module.css';
function Demo() {
const [rootRef, setRootRef] = useState
flex-start
center
flex-end
element inside fragment
another inside fragment
{20}
β + Shift + M
);
}
```
## Size
```tsx
import { Kbd } from '@mantine/core';
function Demo() {
return Shift;
}
```
#### Props
**Kbd props**
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | MantineSize \| number | - | Controls `font-size` and `padding` |
#### Styles API
Kbd component supports Styles API. With Styles API, you can customize styles of any inner element. Follow the documentation to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles.
**Kbd selectors**
| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-Kbd-root | Root element |
**Kbd CSS variables**
| Selector | Variable | Description |
|----------|----------|-------------|
| root | --kbd-fz | Controls `font-size` |
--------------------------------------------------------------------------------
### List
Package: @mantine/core
Import: import { List } from '@mantine/core';
Description: Display ordered or unordered list
## Usage
```tsx
import { List } from '@mantine/core';
function Demo() {
return (
Your content
}}`.
You can put any React node inside `loaderProps.children`:
```tsx
import { useDisclosure } from '@mantine/hooks';
import { LoadingOverlay, Button, Group, Box } from '@mantine/core';
function Demo() {
const [visible, { toggle }] = useDisclosure(false);
return (
<>
Modal with scroll
); return ( <>Modal with scroll
); return ( <>
width: 100%
right: 0
);
}
```
## Accessibility
The `Modal` component follows [WAI-ARIA recommendations](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog) on accessibility.
Set the `title` prop to make the component accessible, which will add `aria-labelledby` to the content element:
```tsx
import { Modal } from '@mantine/core';
function Demo() {
return
With prefix:
With suffix:
);
}
```
## Thousands separator
Set the `thousandSeparator` prop to separate thousands with a character. You can control
the grouping logic with `thousandsGroupStyle`, which accepts: `thousand`, `lakh`, `wan`, `none` values.
```tsx
import { NumberFormatter } from '@mantine/core';
function Demo() {
return (
<>
With default separator:
With custom separator:{' '}
);
}
```
## Decimal scale
The `decimalScale` prop controls the number of allowed decimal places:
```tsx
import { NumberFormatter } from '@mantine/core';
function Demo() {
return {item.label}
}
renderOverflow={(items) => +{items.length} more
}
/>
);
}
```
## Max rows
Use `maxRows` to limit visible rows count. By default, 1 row is visible.
```tsx
// OverflowListDemo.tsx
import { Badge, OverflowList } from '@mantine/core';
import { data } from './data';
function Demo() {
return (
{item}
))}
{visible && 
{visible && (
setPopoverOpened(true)}
onBlurCapture={() => setPopoverOpened(false)}
>
setValue(event.currentTarget.value)}
/>
Your modal content
First
Second
Third
Fractions: 2
Fractions: 3
Fractions: 4
{`{ x: ${scrollPosition.x}, y: ${scrollPosition.y} }`}
{lorem}
); return ( <>