@phpsoftbox/react-softbox 2.6.0 → 2.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -4
- package/dist/components/Card/Card.d.ts +13 -2
- package/dist/components/Card/Card.js +34 -8
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.module.css +111 -10
- package/docs/card.md +103 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -183,6 +183,8 @@ Custom variants задаются через `--variant-{name}-*` токены:
|
|
|
183
183
|
|
|
184
184
|
### Card.Toolbar
|
|
185
185
|
|
|
186
|
+
`Card.Toolbar` занимает всю внутреннюю ширину Card. По умолчанию `inset=true` задаёт его контенту внутренние отступы Card при размещении непосредственно в Card; `inset={false}` оставляет компактный padding Toolbar без боковых границ и скруглений. `dividerTop` и `dividerBottom` независимо включают линии сверху и снизу (по умолчанию выключены). `dividers` управляет разделителями между группами.
|
|
187
|
+
|
|
186
188
|
`Card.Toolbar align="left|right|between"` задает общее выравнивание прямых групп. Если нужно разнести группы по зонам, используйте `Card.Toolbar.Section`:
|
|
187
189
|
|
|
188
190
|
```tsx
|
|
@@ -408,13 +410,20 @@ const collapsible = [
|
|
|
408
410
|
|
|
409
411
|
### Card
|
|
410
412
|
|
|
413
|
+
`Card.Header icon={<TruckIcon />} title="Параметры сдачи" subtitle="Укажите, куда и как будет передана поставка"` размещает общую иконку слева от обеих строк. Для явной композиции используйте `Card.Header.Icon`, `Card.Header.Content` и `Card.Header.Aside`: Icon читает пропс `icon` или свои `children`, Content — пропсы title/subtitle или свои `children`. Aside заменяет `right` и центрирует действия по вертикали. В Header можно вложить собственный Grid.
|
|
414
|
+
|
|
415
|
+
Отступы принадлежат `Card.Header`, `Card.Body` и `Card.Footer`; общий `Card` не имеет padding и gap. Для разделителя на всю ширину используйте `divider` у Header (снизу) или Footer (сверху). По умолчанию разделители выключены; у Body этого пропса нет. Произвольный контент с отступами размещайте в `Card.Body`. Подробнее о переходе на новый контракт — [Card](docs/card.md).
|
|
416
|
+
|
|
411
417
|
```tsx
|
|
412
418
|
<Card>
|
|
413
|
-
<Card.Header title="Заголовок"
|
|
419
|
+
<Card.Header divider title="Заголовок">
|
|
420
|
+
<Card.Header.Content />
|
|
421
|
+
<Card.Header.Aside><Button appearance="ghost">...</Button></Card.Header.Aside>
|
|
422
|
+
</Card.Header>
|
|
414
423
|
<Card.Body>
|
|
415
424
|
Контент карточки
|
|
416
425
|
</Card.Body>
|
|
417
|
-
<Card.Footer>
|
|
426
|
+
<Card.Footer divider>
|
|
418
427
|
<Button appearance="ghost">Отмена</Button>
|
|
419
428
|
<Button>Сохранить</Button>
|
|
420
429
|
</Card.Footer>
|
|
@@ -422,8 +431,10 @@ const collapsible = [
|
|
|
422
431
|
|
|
423
432
|
<Card>
|
|
424
433
|
<Card.Header>
|
|
425
|
-
<Card.Header.
|
|
426
|
-
|
|
434
|
+
<Card.Header.Content>
|
|
435
|
+
<Card.Header.Title>Заголовок</Card.Header.Title>
|
|
436
|
+
<Card.Header.Subtitle>Подзаголовок</Card.Header.Subtitle>
|
|
437
|
+
</Card.Header.Content>
|
|
427
438
|
</Card.Header>
|
|
428
439
|
</Card>
|
|
429
440
|
|
|
@@ -2,9 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import type { ButtonProps } from '../Button/Button';
|
|
3
3
|
type CardProps = React.HTMLAttributes<HTMLDivElement>;
|
|
4
4
|
type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
5
|
+
divider?: boolean;
|
|
6
|
+
icon?: React.ReactNode;
|
|
5
7
|
title?: React.ReactNode;
|
|
6
8
|
subtitle?: React.ReactNode;
|
|
7
|
-
right?: React.ReactNode;
|
|
8
9
|
titleAs?: React.ElementType;
|
|
9
10
|
subtitleAs?: React.ElementType;
|
|
10
11
|
};
|
|
@@ -17,8 +18,15 @@ type CardHeaderTextProps<TElement extends React.ElementType> = CardHeaderTextOwn
|
|
|
17
18
|
type CardHeaderTitleComponent = <TElement extends React.ElementType = 'h1'>(props: CardHeaderTextProps<TElement>) => React.ReactElement | null;
|
|
18
19
|
type CardHeaderSubtitleComponent = <TElement extends React.ElementType = 'p'>(props: CardHeaderTextProps<TElement>) => React.ReactElement | null;
|
|
19
20
|
type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
21
|
+
type CardFooterProps = CardSectionProps & {
|
|
22
|
+
divider?: boolean;
|
|
23
|
+
};
|
|
20
24
|
export type CardToolbarSectionAlign = 'left' | 'center' | 'right';
|
|
21
25
|
export type CardToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
26
|
+
/** Apply Card section padding when placed directly inside Card. Defaults to true. */
|
|
27
|
+
inset?: boolean;
|
|
28
|
+
dividerTop?: boolean;
|
|
29
|
+
dividerBottom?: boolean;
|
|
22
30
|
align?: 'left' | 'right' | 'between';
|
|
23
31
|
buttonHideLabelOn?: 'never' | 'md';
|
|
24
32
|
dividers?: boolean;
|
|
@@ -52,6 +60,9 @@ type CardToolbarComponent = React.FC<CardToolbarProps> & {
|
|
|
52
60
|
Button: CardToolbarButtonComponent;
|
|
53
61
|
};
|
|
54
62
|
type CardHeaderComponent = React.FC<CardHeaderProps> & {
|
|
63
|
+
Icon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
|
|
64
|
+
Content: React.FC<React.HTMLAttributes<HTMLDivElement>>;
|
|
65
|
+
Aside: React.FC<React.HTMLAttributes<HTMLDivElement>>;
|
|
55
66
|
Title: CardHeaderTitleComponent;
|
|
56
67
|
Subtitle: CardHeaderSubtitleComponent;
|
|
57
68
|
};
|
|
@@ -59,7 +70,7 @@ type CardComponent = React.FC<CardProps> & {
|
|
|
59
70
|
Header: CardHeaderComponent;
|
|
60
71
|
Toolbar: CardToolbarComponent;
|
|
61
72
|
Body: React.FC<CardSectionProps>;
|
|
62
|
-
Footer: React.FC<
|
|
73
|
+
Footer: React.FC<CardFooterProps>;
|
|
63
74
|
};
|
|
64
75
|
declare const CardHeaderComponent: CardHeaderComponent;
|
|
65
76
|
declare const Card: CardComponent;
|
|
@@ -6,10 +6,25 @@ function CardBase({ className, ...props }) {
|
|
|
6
6
|
const classes = [styles.card, className].filter(Boolean).join(' ');
|
|
7
7
|
return _jsx("section", { className: classes, ...props });
|
|
8
8
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
|
|
9
|
+
const CardHeaderContext = React.createContext({});
|
|
10
|
+
function CardHeaderIcon({ children, className, ...props }) {
|
|
11
|
+
const { icon } = React.useContext(CardHeaderContext);
|
|
12
|
+
const content = children === undefined ? icon : children;
|
|
13
|
+
if (content == null || typeof content === 'boolean')
|
|
14
|
+
return null;
|
|
15
|
+
return (_jsx("span", { "aria-hidden": "true", className: [styles.headerIcon, className].filter(Boolean).join(' '), ...props, children: content }));
|
|
16
|
+
}
|
|
17
|
+
function CardHeaderContent({ children, className, ...props }) {
|
|
18
|
+
const { content } = React.useContext(CardHeaderContext);
|
|
19
|
+
return (_jsx("div", { className: [styles.headerMain, className].filter(Boolean).join(' '), ...props, children: children === undefined ? content : children }));
|
|
20
|
+
}
|
|
21
|
+
function CardHeaderAside({ className, ...props }) {
|
|
22
|
+
return _jsx("div", { className: [styles.headerAside, className].filter(Boolean).join(' '), ...props });
|
|
23
|
+
}
|
|
24
|
+
function CardHeader({ divider = false, icon, title, subtitle, titleAs: TitleComponent = 'h1', subtitleAs: SubtitleComponent = 'p', className, children, ...props }) {
|
|
25
|
+
const classes = [styles.header, divider ? styles.headerDivider : null, className].filter(Boolean).join(' ');
|
|
26
|
+
const content = (_jsxs(_Fragment, { children: [title ? _jsx(TitleComponent, { className: styles.title, children: title }) : null, subtitle ? _jsx(SubtitleComponent, { className: styles.subtitle, children: subtitle }) : null] }));
|
|
27
|
+
return (_jsx("div", { className: classes, ...props, children: _jsx(CardHeaderContext.Provider, { value: { icon, content }, children: children ?? (_jsxs(_Fragment, { children: [_jsx(CardHeaderIcon, {}), _jsx(CardHeaderContent, {})] })) }) }));
|
|
13
28
|
}
|
|
14
29
|
const CardHeaderTitle = ({ as: Component = 'h1', className, ...props }) => {
|
|
15
30
|
const classes = [styles.title, className].filter(Boolean).join(' ');
|
|
@@ -23,8 +38,8 @@ function CardBody({ className, ...props }) {
|
|
|
23
38
|
const classes = [styles.body, className].filter(Boolean).join(' ');
|
|
24
39
|
return _jsx("div", { className: classes, ...props });
|
|
25
40
|
}
|
|
26
|
-
function CardFooter({ className, ...props }) {
|
|
27
|
-
const classes = [styles.footer, className].filter(Boolean).join(' ');
|
|
41
|
+
function CardFooter({ divider = false, className, ...props }) {
|
|
42
|
+
const classes = [styles.footer, divider ? styles.footerDivider : null, className].filter(Boolean).join(' ');
|
|
28
43
|
return _jsx("div", { className: classes, ...props });
|
|
29
44
|
}
|
|
30
45
|
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
@@ -68,7 +83,7 @@ const getToolbarSectionAlign = (child) => {
|
|
|
68
83
|
}
|
|
69
84
|
return child.props.align ?? 'left';
|
|
70
85
|
};
|
|
71
|
-
function CardToolbarBase({ align = 'left', buttonHideLabelOn = 'md', dividers = true, className, children, ...props }) {
|
|
86
|
+
function CardToolbarBase({ inset = true, dividerTop = false, dividerBottom = false, align = 'left', buttonHideLabelOn = 'md', dividers = true, className, children, ...props }) {
|
|
72
87
|
const alignClass = align === 'right'
|
|
73
88
|
? styles.toolbarAlignRight
|
|
74
89
|
: align === 'between'
|
|
@@ -78,7 +93,15 @@ function CardToolbarBase({ align = 'left', buttonHideLabelOn = 'md', dividers =
|
|
|
78
93
|
const [rows, setRows] = React.useState([]);
|
|
79
94
|
const toolbarChildren = React.Children.toArray(children);
|
|
80
95
|
const hasSections = toolbarChildren.some((child) => getToolbarSectionAlign(child) !== undefined);
|
|
81
|
-
const classes = [
|
|
96
|
+
const classes = [
|
|
97
|
+
styles.toolbar,
|
|
98
|
+
inset ? styles.toolbarInset : null,
|
|
99
|
+
dividerTop ? styles.toolbarDividerTop : null,
|
|
100
|
+
dividerBottom ? styles.toolbarDividerBottom : null,
|
|
101
|
+
alignClass,
|
|
102
|
+
hasSections ? styles.toolbarSections : null,
|
|
103
|
+
className,
|
|
104
|
+
]
|
|
82
105
|
.filter(Boolean)
|
|
83
106
|
.join(' ');
|
|
84
107
|
useIsomorphicLayoutEffect(() => {
|
|
@@ -191,6 +214,9 @@ const CardToolbar = Object.assign(CardToolbarBase, {
|
|
|
191
214
|
Button: CardToolbarButton,
|
|
192
215
|
});
|
|
193
216
|
const CardHeaderComponent = Object.assign(CardHeader, {
|
|
217
|
+
Icon: CardHeaderIcon,
|
|
218
|
+
Content: CardHeaderContent,
|
|
219
|
+
Aside: CardHeaderAside,
|
|
194
220
|
Title: CardHeaderTitle,
|
|
195
221
|
Subtitle: CardHeaderSubtitle,
|
|
196
222
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,19 +2,73 @@
|
|
|
2
2
|
background: var(--surface-card);
|
|
3
3
|
border: 1px solid var(--color-line);
|
|
4
4
|
border-radius: var(--card-border-radius, var(--radius-default));
|
|
5
|
-
padding:
|
|
5
|
+
padding: 0;
|
|
6
6
|
box-shadow: var(--shadow-soft);
|
|
7
7
|
display: flex;
|
|
8
8
|
flex-direction: column;
|
|
9
|
-
gap:
|
|
9
|
+
gap: 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.header,
|
|
13
|
+
.body,
|
|
14
|
+
.footer {
|
|
15
|
+
padding: var(--card-padding-y, var(--spacing-7)) var(--card-padding-x, var(--spacing-7));
|
|
16
|
+
min-width: 0;
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.card > .header:first-child,
|
|
21
|
+
.card > .body:first-child,
|
|
22
|
+
.card > .toolbarInset:first-child,
|
|
23
|
+
.card > .footer:first-child {
|
|
24
|
+
border-top-left-radius: inherit;
|
|
25
|
+
border-top-right-radius: inherit;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.card > .header:last-child,
|
|
29
|
+
.card > .body:last-child,
|
|
30
|
+
.card > .toolbarInset:last-child,
|
|
31
|
+
.card > .footer:last-child {
|
|
32
|
+
border-bottom-left-radius: inherit;
|
|
33
|
+
border-bottom-right-radius: inherit;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.headerDivider {
|
|
37
|
+
border-bottom: 1px solid var(--color-line);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.footerDivider {
|
|
41
|
+
border-top: 1px solid var(--color-line);
|
|
10
42
|
}
|
|
11
43
|
|
|
12
44
|
.header {
|
|
13
|
-
display:
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
gap: var(--spacing-4);
|
|
17
|
-
|
|
45
|
+
display: grid;
|
|
46
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
47
|
+
align-items: center;
|
|
48
|
+
row-gap: var(--spacing-4);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Empty icon/aside tracks take no space; only present slots add a gap. */
|
|
52
|
+
.header > .headerIcon {
|
|
53
|
+
grid-column: 1;
|
|
54
|
+
grid-row: 1;
|
|
55
|
+
margin-inline-end: var(--card-header-icon-gap, var(--spacing-4));
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.header > .headerMain {
|
|
59
|
+
grid-column: 2;
|
|
60
|
+
grid-row: 1;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.header > .headerAside {
|
|
64
|
+
grid-column: 3;
|
|
65
|
+
grid-row: 1;
|
|
66
|
+
margin-inline-start: var(--spacing-4);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* A custom Grid (or another layout wrapper) owns the full header width. */
|
|
70
|
+
.header > :not(.headerIcon):not(.headerMain):not(.headerAside) {
|
|
71
|
+
grid-column: 1 / -1;
|
|
18
72
|
}
|
|
19
73
|
|
|
20
74
|
.toolbar {
|
|
@@ -24,8 +78,11 @@
|
|
|
24
78
|
column-gap: var(--spacing-2);
|
|
25
79
|
row-gap: 0;
|
|
26
80
|
padding: var(--spacing-2) var(--spacing-3);
|
|
27
|
-
|
|
28
|
-
|
|
81
|
+
margin: 0;
|
|
82
|
+
min-width: 0;
|
|
83
|
+
box-sizing: border-box;
|
|
84
|
+
border-radius: 0;
|
|
85
|
+
border: 0;
|
|
29
86
|
background: var(--surface-panel-soft);
|
|
30
87
|
overflow: hidden;
|
|
31
88
|
}
|
|
@@ -34,6 +91,23 @@
|
|
|
34
91
|
justify-content: flex-start;
|
|
35
92
|
}
|
|
36
93
|
|
|
94
|
+
.toolbarInset {
|
|
95
|
+
border-radius: var(--card-toolbar-border-radius, 0);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Keep the surface and dividers full-width; inset only the content. */
|
|
99
|
+
.card > .toolbarInset {
|
|
100
|
+
padding: var(--card-padding-y, var(--spacing-7)) var(--card-padding-x, var(--spacing-7));
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.toolbarDividerTop {
|
|
104
|
+
border-top: 1px solid var(--color-line);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.toolbarDividerBottom {
|
|
108
|
+
border-bottom: 1px solid var(--color-line);
|
|
109
|
+
}
|
|
110
|
+
|
|
37
111
|
.toolbarAlignRight {
|
|
38
112
|
justify-content: flex-end;
|
|
39
113
|
}
|
|
@@ -289,6 +363,24 @@
|
|
|
289
363
|
flex-shrink: 0;
|
|
290
364
|
}
|
|
291
365
|
|
|
366
|
+
.headerIcon {
|
|
367
|
+
display: inline-flex;
|
|
368
|
+
align-items: center;
|
|
369
|
+
justify-content: center;
|
|
370
|
+
flex: 0 0 var(--card-header-icon-size, 32px);
|
|
371
|
+
width: var(--card-header-icon-size, 32px);
|
|
372
|
+
height: var(--card-header-icon-size, 32px);
|
|
373
|
+
font-size: var(--card-header-icon-size, 32px);
|
|
374
|
+
line-height: 1;
|
|
375
|
+
color: var(--card-header-icon-color, currentColor);
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.headerIcon > :where(svg, img) {
|
|
379
|
+
width: 100%;
|
|
380
|
+
height: 100%;
|
|
381
|
+
object-fit: contain;
|
|
382
|
+
}
|
|
383
|
+
|
|
292
384
|
.headerMain {
|
|
293
385
|
display: flex;
|
|
294
386
|
flex-direction: column;
|
|
@@ -299,8 +391,11 @@
|
|
|
299
391
|
.headerAside {
|
|
300
392
|
display: inline-flex;
|
|
301
393
|
align-items: center;
|
|
394
|
+
align-self: center;
|
|
395
|
+
justify-self: end;
|
|
396
|
+
flex-wrap: wrap;
|
|
397
|
+
min-width: 0;
|
|
302
398
|
gap: var(--spacing-2);
|
|
303
|
-
margin-left: auto;
|
|
304
399
|
}
|
|
305
400
|
|
|
306
401
|
.title {
|
|
@@ -333,6 +428,12 @@
|
|
|
333
428
|
}
|
|
334
429
|
|
|
335
430
|
@media (max-width: 720px) {
|
|
431
|
+
.header > .headerAside {
|
|
432
|
+
grid-column: 2 / -1;
|
|
433
|
+
grid-row: 2;
|
|
434
|
+
margin-inline-start: 0;
|
|
435
|
+
}
|
|
436
|
+
|
|
336
437
|
.toolbar {
|
|
337
438
|
padding: var(--spacing-2);
|
|
338
439
|
}
|
package/docs/card.md
CHANGED
|
@@ -4,9 +4,12 @@
|
|
|
4
4
|
|
|
5
5
|
```tsx
|
|
6
6
|
<Card>
|
|
7
|
-
<Card.Header title="Заголовок"
|
|
7
|
+
<Card.Header divider title="Заголовок">
|
|
8
|
+
<Card.Header.Content />
|
|
9
|
+
<Card.Header.Aside><Button appearance="ghost">...</Button></Card.Header.Aside>
|
|
10
|
+
</Card.Header>
|
|
8
11
|
<Card.Body>Контент</Card.Body>
|
|
9
|
-
<Card.Footer>
|
|
12
|
+
<Card.Footer divider>
|
|
10
13
|
<Button appearance="ghost">Отмена</Button>
|
|
11
14
|
<Button>Сохранить</Button>
|
|
12
15
|
</Card.Footer>
|
|
@@ -14,24 +17,117 @@
|
|
|
14
17
|
```
|
|
15
18
|
|
|
16
19
|
`Card.Header` умеет принимать:
|
|
20
|
+
|
|
21
|
+
- `divider` — разделитель снизу на всю внутреннюю ширину карточки (по умолчанию `false`)
|
|
17
22
|
- `title` и `subtitle`
|
|
23
|
+
- `icon` — общая иконка слева от блока заголовка и подзаголовка
|
|
18
24
|
- `titleAs` и `subtitleAs` для управления тегами заголовка/подзаголовка
|
|
19
|
-
- `
|
|
20
|
-
|
|
25
|
+
- `children` для явной композиции слотов или собственной сетки
|
|
26
|
+
|
|
27
|
+
`Card.Footer` принимает `divider` для разделителя сверху (по умолчанию `false`). Разделители независимы; у `Card.Body` их нет. Линию рисует секция, поэтому padding заголовка или содержимого не укорачивает её.
|
|
28
|
+
|
|
29
|
+
### Иконка заголовка
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
<Card.Header
|
|
33
|
+
icon={<TruckIcon />}
|
|
34
|
+
title="Параметры сдачи"
|
|
35
|
+
subtitle="Укажите, куда и как будет передана поставка"
|
|
36
|
+
/>
|
|
37
|
+
|
|
38
|
+
<Card.Header icon={<TruckIcon />}>
|
|
39
|
+
<Card.Header.Icon />
|
|
40
|
+
<Card.Header.Content>
|
|
41
|
+
<Card.Header.Title>Параметры сдачи</Card.Header.Title>
|
|
42
|
+
<Card.Header.Subtitle>Укажите, куда и как будет передана поставка</Card.Header.Subtitle>
|
|
43
|
+
</Card.Header.Content>
|
|
44
|
+
<Card.Header.Aside><Button>Создать</Button></Card.Header.Aside>
|
|
45
|
+
</Card.Header>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Иконка выравнивается по вертикальному центру всего текстового блока, включая многострочный subtitle, и не сжимается. Без subtitle она центрируется относительно title. `Card.Header.Aside` центрируется по вертикали в той же строке; на экранах до 720px переходит в отдельную строку справа.
|
|
49
|
+
|
|
50
|
+
`Card.Header.Icon` без `children` читает `icon` ближайшего Header. Переданные `children` заменяют иконку; явный `null` или `false` скрывает слот. Компонент работает и внутри вложенного Grid. Без `children` Header автоматически рендерит Icon и Content. При переданных `children` Header рендерит именно вашу композицию: автоматическая иконка не добавляется, поэтому явный Icon не дублируется.
|
|
51
|
+
|
|
52
|
+
`Card.Header.Content` без `children` выводит `title`/`subtitle` из Header с учётом `titleAs`/`subtitleAs`. Переданные `children` заменяют этот текст. Icon, Content и Aside принимают `className`, `style` и HTML/ARIA-атрибуты.
|
|
53
|
+
|
|
54
|
+
`icon` принимает ReactNode; SVG и изображения подстраиваются под размер слота. Настройки через CSS-переменные на Header или Card: `--card-header-icon-size` (по умолчанию `32px`), `--card-header-icon-gap` (по умолчанию `var(--spacing-4)`), `--card-header-icon-color` (по умолчанию `currentColor`). Например, `style={{ '--card-header-icon-color': '#ff6b00' } as React.CSSProperties}` задаёт оранжевый цвет для SVG с `stroke="currentColor"` или `fill="currentColor"`.
|
|
55
|
+
|
|
56
|
+
Иконка декоративная (`aria-hidden`), поэтому смысл заголовка или статус должны быть переданы текстом. Без `icon` слот и дополнительный отступ не создаются.
|
|
57
|
+
|
|
58
|
+
## Отступы секций и переход с прежней разметки
|
|
59
|
+
|
|
60
|
+
Это новый общий контракт Card без отдельного режима совместимости. Корневой `Card` отвечает за фон, рамку и скругление; его `padding` и `gap` равны нулю. `Card.Header`, `Card.Body` и `Card.Footer` имеют собственные отступы `var(--spacing-7)` по обеим осям. Внутренние gap секций сохраняются. Вертикальные padding соседних секций складываются, поэтому плотность карточек изменится.
|
|
61
|
+
|
|
62
|
+
Общие отступы секций можно настроить на Card через CSS-переменные (также работают на отдельных секциях):
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
<Card style={{ '--card-padding-x': '24px', '--card-padding-y': '16px' } as React.CSSProperties}>
|
|
66
|
+
<Card.Header title="Настройки" divider />
|
|
67
|
+
<Card.Body>Содержимое</Card.Body>
|
|
68
|
+
<Card.Footer divider>Действия</Card.Footer>
|
|
69
|
+
</Card>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
При обновлении проектов:
|
|
73
|
+
|
|
74
|
+
- Оберните контент, который раньше получал отступы непосредственно от Card, в `Card.Body`. Содержимое без обёртки теперь занимает всю внутреннюю ширину.
|
|
75
|
+
- Перенесите `padding`/`p-*` с Card на нужную секцию или используйте `--card-padding-x`/`--card-padding-y`, чтобы избежать двойных отступов.
|
|
76
|
+
- Удалите отрицательные margin и расширение ширины Header/Footer, компенсировавшие старый padding Card. Используйте `divider` вместо самодельной линии.
|
|
77
|
+
- Замените удалённый `right={actions}` на `<Card.Header.Aside>{actions}</Card.Header.Aside>`. В явной композиции добавьте `<Card.Header.Content />` для вывода пропсов title/subtitle и `<Card.Header.Icon />` для иконки из пропса. Дочерние Title и Subtitle объединяйте в Content, чтобы они занимали одну колонку.
|
|
78
|
+
- Для таблиц и другого контента на всю ширину используйте `<Card.Body style={{ padding: 0 }}>…</Card.Body>`.
|
|
79
|
+
- `Card.Toolbar`, расположенный непосредственно в Card, занимает всю внутреннюю ширину. `inset` задаёт padding контента вместо прежних внешних margin. `inset={false}` оставляет компактный padding Toolbar. Полная рамка заменена независимыми `dividerTop`/`dividerBottom`; по умолчанию оба выключены. Toolbar внутри Body и самостоятельный Toolbar сохраняют компактные отступы. Общий gap корневого Card больше не разделяет произвольные дочерние элементы.
|
|
80
|
+
|
|
81
|
+
Корень Card не обрезает overflow: выпадающие меню и другие выступающие элементы остаются видимыми. Крайние Header/Body/Footer наследуют соответствующие скругления карточки.
|
|
21
82
|
|
|
22
83
|
Также доступны подкомпоненты:
|
|
23
84
|
|
|
24
85
|
```tsx
|
|
25
|
-
<Card.Header
|
|
26
|
-
<Card.Header.
|
|
27
|
-
|
|
86
|
+
<Card.Header>
|
|
87
|
+
<Card.Header.Content>
|
|
88
|
+
<Card.Header.Title>Заголовок</Card.Header.Title>
|
|
89
|
+
<Card.Header.Subtitle>Подзаголовок</Card.Header.Subtitle>
|
|
90
|
+
</Card.Header.Content>
|
|
91
|
+
<Card.Header.Aside><Button appearance="ghost">...</Button></Card.Header.Aside>
|
|
28
92
|
</Card.Header>
|
|
29
93
|
```
|
|
30
94
|
|
|
31
95
|
`Card.Header.Title` и `Card.Header.Subtitle` поддерживают `as` с любым `React.ElementType` (включая кастомный компонент).
|
|
32
96
|
|
|
97
|
+
### Собственная сетка Header
|
|
98
|
+
|
|
99
|
+
Header использует CSS Grid для прямых слотов. Произвольная обёртка внутри Header занимает всю его ширину, поэтому можно вложить существующий `Grid` и полностью управлять колонками:
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
<Card.Header icon={<TruckIcon />} title="Параметры сдачи" subtitle="Укажите место передачи">
|
|
103
|
+
<Grid gap="16px" style={{ gridTemplateColumns: 'auto minmax(0, 1fr) auto', alignItems: 'center' }}>
|
|
104
|
+
<Card.Header.Icon />
|
|
105
|
+
<Card.Header.Content />
|
|
106
|
+
<Card.Header.Aside><Button>Создать</Button></Card.Header.Aside>
|
|
107
|
+
</Grid>
|
|
108
|
+
</Card.Header>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
В собственной сетке размеры колонок, расстояния и адаптивность задаёт Grid/ваш CSS. Для обычной сетки с долями доступны `Grid columns={12}` и классы `col-span-*`; отдельный Col для Header не требуется.
|
|
112
|
+
|
|
33
113
|
## Toolbar
|
|
34
114
|
|
|
115
|
+
Toolbar занимает всю внутреннюю ширину Card независимо от `inset`: фон и линии не имеют внешнего отступа. `inset` (по умолчанию `true`) задаёт **внутренние отступы контента** через `--card-padding-x` и `--card-padding-y` при размещении Toolbar непосредственно в Card. `inset={false}` оставляет компактный padding Toolbar (`--spacing-2` по вертикали и `--spacing-3` по горизонтали; на экранах до 720px — `--spacing-2` по обеим осям).
|
|
116
|
+
|
|
117
|
+
`dividerTop` и `dividerBottom` независимо включают разделители сверху и снизу на всю ширину Toolbar. Оба по умолчанию `false`; боковых границ нет. `dividers` по-прежнему управляет только внутренними разделителями групп.
|
|
118
|
+
|
|
119
|
+
```tsx
|
|
120
|
+
<Card>
|
|
121
|
+
<Card.Header title="Отчёты" />
|
|
122
|
+
<Card.Toolbar dividerTop dividerBottom>
|
|
123
|
+
<Card.Toolbar.Button label="Обновить" />
|
|
124
|
+
</Card.Toolbar>
|
|
125
|
+
<Card.Body>Контент</Card.Body>
|
|
126
|
+
</Card>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
Внутри `Card.Body` отступы задаёт сам Body; `inset` их не отменяет и не добавляет вторые. Верхний и нижний разделители доступны при любом размещении. При `inset={false}` боковых границ и скруглений нет, даже если Toolbar — первый или последний элемент Card. При `inset=true` крайние Toolbar наследуют соответствующие скругления Card; для остальных можно задать `--card-toolbar-border-radius`. Если соседний Header/Footer уже рисует линию на общем стыке, включайте разделитель только с одной стороны, чтобы не удваивать его толщину.
|
|
130
|
+
|
|
35
131
|
```tsx
|
|
36
132
|
<Card.Toolbar>
|
|
37
133
|
<Card.Toolbar.Group attached>
|