mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-11 11:59:20 +08:00
Compare commits
2 Commits
select-sna
...
guidelines
| Author | SHA1 | Date | |
|---|---|---|---|
|
9096c45df8 | ||
|
|
927fa5e63d |
@@ -5,67 +5,38 @@ import { genCompactItemStyle } from '../../style/compact-item';
|
||||
import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
import { genSubStyleComponent } from '../../theme/internal';
|
||||
import { genCssVar } from '../../theme/util/genStyleUtils';
|
||||
import type { ButtonToken } from './token';
|
||||
import { prepareComponentToken, prepareToken } from './token';
|
||||
|
||||
const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||
const { antCls, componentCls, lineWidth, calc, colorBgContainer } = token;
|
||||
|
||||
const solidSelector = `${componentCls}-variant-solid:not([disabled])`;
|
||||
const { componentCls, colorPrimaryHover, lineWidth, calc } = token;
|
||||
const insetOffset = calc(lineWidth).mul(-1).equal();
|
||||
|
||||
const [varName, varRef] = genCssVar(antCls, 'btn');
|
||||
|
||||
const getCompactBorderStyle = (vertical?: boolean): CSSObject => {
|
||||
const getCompactBorderStyle = (vertical?: boolean) => {
|
||||
const itemCls = `${componentCls}-compact${vertical ? '-vertical' : ''}-item`;
|
||||
const selector = `${itemCls}${componentCls}-primary:not([disabled])`;
|
||||
|
||||
return {
|
||||
// TODO: Border color transition should be not cover when has color.
|
||||
[itemCls]: {
|
||||
[varName('compact-connect-border-color')]: varRef('bg-color-hover'),
|
||||
|
||||
[`&${solidSelector}`]: {
|
||||
transition: `none`,
|
||||
|
||||
[`& + ${solidSelector}:before`]: [
|
||||
{
|
||||
position: 'absolute',
|
||||
backgroundColor: varRef('compact-connect-border-color'),
|
||||
content: '""',
|
||||
},
|
||||
vertical
|
||||
? {
|
||||
top: insetOffset,
|
||||
insetInline: insetOffset,
|
||||
height: lineWidth,
|
||||
}
|
||||
: {
|
||||
insetBlock: insetOffset,
|
||||
insetInlineStart: insetOffset,
|
||||
width: lineWidth,
|
||||
},
|
||||
],
|
||||
|
||||
'&:hover:before': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
transition: `none`,
|
||||
},
|
||||
|
||||
[`${selector} + ${selector}::before`]: {
|
||||
position: 'absolute',
|
||||
top: vertical ? insetOffset : 0,
|
||||
insetInlineStart: vertical ? 0 : insetOffset,
|
||||
backgroundColor: colorPrimaryHover,
|
||||
content: '""',
|
||||
width: vertical ? '100%' : lineWidth,
|
||||
height: vertical ? lineWidth : '100%',
|
||||
} as CSSObject,
|
||||
};
|
||||
};
|
||||
|
||||
// Special styles for solid Button
|
||||
return [
|
||||
getCompactBorderStyle(),
|
||||
getCompactBorderStyle(true),
|
||||
{
|
||||
[`${solidSelector}${componentCls}-color-default`]: {
|
||||
[varName('compact-connect-border-color')]:
|
||||
`color-mix(in srgb, ${varRef('bg-color-hover')} 75%, ${colorBgContainer})`,
|
||||
},
|
||||
},
|
||||
];
|
||||
// Special styles for Primary Button
|
||||
return {
|
||||
...getCompactBorderStyle(),
|
||||
...getCompactBorderStyle(true),
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
|
||||
@@ -15,6 +15,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -430,6 +431,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -1553,6 +1555,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -1968,6 +1971,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -3090,6 +3094,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -3505,6 +3510,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -4621,6 +4627,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -5036,6 +5043,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -6219,6 +6227,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -6674,6 +6683,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -7762,6 +7772,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -8177,6 +8188,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -9710,6 +9722,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2017"
|
||||
>
|
||||
2017
|
||||
@@ -10125,6 +10138,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
@@ -11250,6 +11264,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -11665,6 +11680,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -12781,6 +12797,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -13196,6 +13213,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -14318,6 +14336,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -14733,6 +14752,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -15910,6 +15930,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -16325,6 +16346,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
|
||||
@@ -15,6 +15,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -64,6 +65,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -947,6 +949,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -996,6 +999,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -1878,6 +1882,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -1927,6 +1932,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -2805,6 +2811,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -2854,6 +2861,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -3797,6 +3805,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -3846,6 +3855,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -4678,6 +4688,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -4727,6 +4738,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -6020,6 +6032,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="2017"
|
||||
>
|
||||
2017
|
||||
@@ -6069,6 +6082,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
@@ -6954,6 +6968,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -7003,6 +7018,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -7881,6 +7897,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -7930,6 +7947,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -8812,6 +8830,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -8861,6 +8880,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
@@ -9800,6 +9820,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
@@ -9849,6 +9870,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
|
||||
@@ -15,6 +15,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2019"
|
||||
>
|
||||
2019
|
||||
@@ -64,6 +65,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
@@ -944,6 +946,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2018年"
|
||||
>
|
||||
2018年
|
||||
@@ -993,6 +996,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10月"
|
||||
>
|
||||
10月
|
||||
@@ -1873,6 +1877,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -1922,6 +1927,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Sep"
|
||||
>
|
||||
Sep
|
||||
@@ -2802,6 +2808,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -2851,6 +2858,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
|
||||
@@ -601,6 +601,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
>
|
||||
<span>
|
||||
Zhejiang /
|
||||
@@ -879,6 +880,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Zhejiang / Hangzhou / West Lake"
|
||||
>
|
||||
Zhejiang / Hangzhou / West Lake
|
||||
|
||||
@@ -216,6 +216,7 @@ exports[`renders components/cascader/demo/custom-render.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
>
|
||||
<span>
|
||||
Zhejiang
|
||||
@@ -319,6 +320,7 @@ exports[`renders components/cascader/demo/default-value.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Zhejiang / Hangzhou / West Lake"
|
||||
>
|
||||
Zhejiang / Hangzhou / West Lake
|
||||
|
||||
@@ -1165,6 +1165,7 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Zhejiang / Hangzhou"
|
||||
>
|
||||
Zhejiang / Hangzhou
|
||||
@@ -1453,6 +1454,7 @@ exports[`Cascader support controlled mode 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Zhejiang / Hangzhou / West Lake"
|
||||
>
|
||||
Zhejiang / Hangzhou / West Lake
|
||||
|
||||
@@ -1102,6 +1102,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="start"
|
||||
>
|
||||
start
|
||||
|
||||
@@ -1090,6 +1090,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="start"
|
||||
>
|
||||
start
|
||||
|
||||
@@ -144,6 +144,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -517,6 +518,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -895,6 +897,7 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -1265,6 +1268,7 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -1644,6 +1648,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -1995,6 +2000,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -2308,6 +2314,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -2693,6 +2700,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HSB"
|
||||
>
|
||||
HSB
|
||||
@@ -3284,6 +3292,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="RGB"
|
||||
>
|
||||
RGB
|
||||
@@ -3975,6 +3984,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -4399,6 +4409,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -4799,6 +4810,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -5755,6 +5767,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -6132,6 +6145,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -6934,6 +6948,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -7319,6 +7334,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -7689,6 +7705,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -8059,6 +8076,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -8442,6 +8460,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -8817,6 +8836,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -9192,6 +9212,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -9569,6 +9590,7 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -9935,6 +9957,7 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -10327,6 +10350,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -10704,6 +10728,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -11098,6 +11123,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -11469,6 +11495,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -11842,6 +11869,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
|
||||
@@ -147,6 +147,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -420,6 +421,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
|
||||
@@ -1602,6 +1602,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -1651,6 +1652,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Sep"
|
||||
>
|
||||
Sep
|
||||
@@ -2528,6 +2530,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -2871,6 +2874,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -2921,6 +2925,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Sep"
|
||||
>
|
||||
Sep
|
||||
@@ -3801,6 +3806,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -4147,6 +4153,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -4196,6 +4203,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Sep"
|
||||
>
|
||||
Sep
|
||||
@@ -5073,6 +5081,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -5416,6 +5425,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -5465,6 +5475,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Sep"
|
||||
>
|
||||
Sep
|
||||
@@ -6342,6 +6353,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -6685,6 +6697,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -6734,6 +6747,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Sep"
|
||||
>
|
||||
Sep
|
||||
@@ -7611,6 +7625,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -7954,6 +7969,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -8003,6 +8019,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Sep"
|
||||
>
|
||||
Sep
|
||||
@@ -8880,6 +8897,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -9223,6 +9241,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -9272,6 +9291,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Sep"
|
||||
>
|
||||
Sep
|
||||
@@ -10149,6 +10169,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
@@ -18374,6 +18395,7 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -18506,6 +18528,7 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -18643,6 +18666,7 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -18776,6 +18800,7 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -18914,6 +18939,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -19046,6 +19072,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -19183,6 +19210,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -19315,6 +19343,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -19452,6 +19481,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -19584,6 +19614,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -19721,6 +19752,7 @@ exports[`ConfigProvider components Pagination normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -19853,6 +19885,7 @@ exports[`ConfigProvider components Pagination normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -19990,6 +20023,7 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -20122,6 +20156,7 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -23716,6 +23751,7 @@ exports[`ConfigProvider components Select configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Light"
|
||||
>
|
||||
Light
|
||||
@@ -23771,6 +23807,7 @@ exports[`ConfigProvider components Select configProvider componentDisabled 1`] =
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Light"
|
||||
>
|
||||
Light
|
||||
@@ -23824,6 +23861,7 @@ exports[`ConfigProvider components Select configProvider componentSize large 1`]
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Light"
|
||||
>
|
||||
Light
|
||||
@@ -23879,6 +23917,7 @@ exports[`ConfigProvider components Select configProvider componentSize middle 1`
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Light"
|
||||
>
|
||||
Light
|
||||
@@ -23934,6 +23973,7 @@ exports[`ConfigProvider components Select configProvider componentSize small 1`]
|
||||
>
|
||||
<div
|
||||
class="config-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Light"
|
||||
>
|
||||
Light
|
||||
@@ -23989,6 +24029,7 @@ exports[`ConfigProvider components Select normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Light"
|
||||
>
|
||||
Light
|
||||
@@ -24044,6 +24085,7 @@ exports[`ConfigProvider components Select prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
class="prefix-Select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Light"
|
||||
>
|
||||
Light
|
||||
|
||||
@@ -88094,6 +88094,7 @@ exports[`renders components/date-picker/demo/switchable.tsx extend context corre
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Time"
|
||||
>
|
||||
Time
|
||||
|
||||
@@ -7670,6 +7670,7 @@ exports[`renders components/date-picker/demo/switchable.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Time"
|
||||
>
|
||||
Time
|
||||
|
||||
@@ -93,6 +93,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
|
||||
>
|
||||
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
|
||||
@@ -345,6 +346,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
|
||||
>
|
||||
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
|
||||
@@ -2156,6 +2158,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx extend contex
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="RMB"
|
||||
>
|
||||
RMB
|
||||
@@ -5301,6 +5304,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -11350,6 +11354,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Zhejiang / Hangzhou / West Lake"
|
||||
>
|
||||
Zhejiang / Hangzhou / West Lake
|
||||
@@ -11549,6 +11554,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="+86"
|
||||
>
|
||||
+86
|
||||
@@ -11790,6 +11796,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="$"
|
||||
>
|
||||
$
|
||||
@@ -12070,6 +12077,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Male"
|
||||
>
|
||||
Male
|
||||
@@ -24523,6 +24531,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -29156,6 +29165,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Option 1"
|
||||
>
|
||||
Option 1
|
||||
|
||||
@@ -93,6 +93,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
|
||||
>
|
||||
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
|
||||
@@ -267,6 +268,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
|
||||
>
|
||||
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
|
||||
@@ -1664,6 +1666,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="RMB"
|
||||
>
|
||||
RMB
|
||||
@@ -7656,6 +7659,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Zhejiang / Hangzhou / West Lake"
|
||||
>
|
||||
Zhejiang / Hangzhou / West Lake
|
||||
@@ -7767,6 +7771,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="+86"
|
||||
>
|
||||
+86
|
||||
@@ -7930,6 +7935,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="$"
|
||||
>
|
||||
$
|
||||
@@ -8120,6 +8126,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Male"
|
||||
>
|
||||
Male
|
||||
@@ -12875,6 +12882,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Option 1"
|
||||
>
|
||||
Option 1
|
||||
|
||||
@@ -110,6 +110,7 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="+"
|
||||
>
|
||||
+
|
||||
@@ -312,6 +313,7 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="$"
|
||||
>
|
||||
$
|
||||
|
||||
@@ -110,6 +110,7 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="+"
|
||||
>
|
||||
+
|
||||
@@ -234,6 +235,7 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="$"
|
||||
>
|
||||
$
|
||||
|
||||
@@ -51,6 +51,7 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="http://"
|
||||
>
|
||||
http://
|
||||
@@ -187,6 +188,7 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title=".com"
|
||||
>
|
||||
.com
|
||||
@@ -3030,6 +3032,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Jack"
|
||||
>
|
||||
Jack
|
||||
@@ -3158,6 +3161,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title=""
|
||||
/>
|
||||
<input
|
||||
@@ -3517,6 +3521,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Zhejiang / Hangzhou / West Lake"
|
||||
>
|
||||
Zhejiang / Hangzhou / West Lake
|
||||
@@ -5773,6 +5778,7 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Zhejiang"
|
||||
>
|
||||
Zhejiang
|
||||
@@ -6714,6 +6720,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Zhejiang"
|
||||
>
|
||||
Zhejiang
|
||||
@@ -7017,6 +7024,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Option1"
|
||||
>
|
||||
Option1
|
||||
@@ -9062,6 +9070,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Option1-1"
|
||||
>
|
||||
Option1-1
|
||||
@@ -9189,6 +9198,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Option2-2"
|
||||
>
|
||||
Option2-2
|
||||
@@ -9321,6 +9331,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Between"
|
||||
>
|
||||
Between
|
||||
@@ -9476,6 +9487,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Sign Up"
|
||||
>
|
||||
Sign Up
|
||||
@@ -9704,6 +9716,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Home"
|
||||
>
|
||||
Home
|
||||
|
||||
@@ -51,6 +51,7 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="http://"
|
||||
>
|
||||
http://
|
||||
@@ -109,6 +110,7 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title=".com"
|
||||
>
|
||||
.com
|
||||
@@ -646,6 +648,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Jack"
|
||||
>
|
||||
Jack
|
||||
@@ -696,6 +699,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title=""
|
||||
/>
|
||||
<input
|
||||
@@ -839,6 +843,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Zhejiang / Hangzhou / West Lake"
|
||||
>
|
||||
Zhejiang / Hangzhou / West Lake
|
||||
@@ -1664,6 +1669,7 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Zhejiang"
|
||||
>
|
||||
Zhejiang
|
||||
@@ -2489,6 +2495,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Zhejiang"
|
||||
>
|
||||
Zhejiang
|
||||
@@ -2698,6 +2705,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Option1"
|
||||
>
|
||||
Option1
|
||||
@@ -2977,6 +2985,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Option1-1"
|
||||
>
|
||||
Option1-1
|
||||
@@ -3026,6 +3035,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Option2-2"
|
||||
>
|
||||
Option2-2
|
||||
@@ -3080,6 +3090,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Between"
|
||||
>
|
||||
Between
|
||||
@@ -3157,6 +3168,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Sign Up"
|
||||
>
|
||||
Sign Up
|
||||
@@ -3238,6 +3250,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Home"
|
||||
>
|
||||
Home
|
||||
|
||||
@@ -317,6 +317,7 @@ exports[`List.pagination should default work 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="3 / page"
|
||||
>
|
||||
3 / page
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -566,6 +566,7 @@ exports[`renders components/pagination/demo/all.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -1038,6 +1039,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -1366,6 +1368,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -1662,6 +1665,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -2001,6 +2005,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -2420,6 +2425,7 @@ exports[`renders components/pagination/demo/itemRender.tsx extend context correc
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -2753,6 +2759,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -3092,6 +3099,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -3531,6 +3539,7 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -3953,6 +3962,7 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -4383,6 +4393,7 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -4805,6 +4816,7 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -5200,6 +5212,7 @@ exports[`renders components/pagination/demo/more.tsx extend context correctly 1`
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -5803,6 +5816,7 @@ exports[`renders components/pagination/demo/style-class.tsx extend context corre
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -6138,6 +6152,7 @@ exports[`renders components/pagination/demo/style-class.tsx extend context corre
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -6428,6 +6443,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="20 / page"
|
||||
>
|
||||
20 / page
|
||||
@@ -6712,6 +6728,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="20 / page"
|
||||
>
|
||||
20 / page
|
||||
@@ -7046,6 +7063,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -7374,6 +7392,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -7703,6 +7722,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -8031,6 +8051,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
|
||||
@@ -564,6 +564,7 @@ exports[`renders components/pagination/demo/all.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -930,6 +931,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -1156,6 +1158,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -1348,6 +1351,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -1585,6 +1589,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -1898,6 +1903,7 @@ exports[`renders components/pagination/demo/itemRender.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -2127,6 +2133,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -2364,6 +2371,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -2699,6 +2707,7 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -3019,6 +3028,7 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -3347,6 +3357,7 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -3667,6 +3678,7 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -3958,6 +3970,7 @@ exports[`renders components/pagination/demo/more.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -4455,6 +4468,7 @@ exports[`renders components/pagination/demo/style-class.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -4688,6 +4702,7 @@ exports[`renders components/pagination/demo/style-class.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -4874,6 +4889,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="20 / page"
|
||||
>
|
||||
20 / page
|
||||
@@ -5056,6 +5072,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="20 / page"
|
||||
>
|
||||
20 / page
|
||||
@@ -5286,6 +5303,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -5512,6 +5530,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -5739,6 +5758,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -5965,6 +5985,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
|
||||
@@ -260,6 +260,7 @@ exports[`Pagination ConfigProvider should be rendered correctly when componentSi
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
|
||||
@@ -1781,6 +1781,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
|
||||
@@ -1696,6 +1696,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
|
||||
@@ -388,6 +388,7 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -552,6 +553,7 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -661,6 +663,7 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -769,6 +772,7 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -911,6 +915,7 @@ exports[`renders components/select/demo/coordinate.tsx extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Zhejiang"
|
||||
>
|
||||
Zhejiang
|
||||
@@ -1043,6 +1048,7 @@ exports[`renders components/select/demo/coordinate.tsx extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Hangzhou"
|
||||
>
|
||||
Hangzhou
|
||||
@@ -1388,6 +1394,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
>
|
||||
<span>
|
||||
No option match
|
||||
@@ -4133,6 +4140,7 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -4450,6 +4458,7 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -4792,6 +4801,7 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -5269,6 +5279,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy (101)"
|
||||
>
|
||||
Lucy (101)
|
||||
@@ -6638,6 +6649,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="lucy"
|
||||
>
|
||||
lucy
|
||||
@@ -6835,6 +6847,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="long, long, long piece of text"
|
||||
>
|
||||
long, long, long piece of text
|
||||
@@ -7165,6 +7178,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
>
|
||||
<div>
|
||||
normal
|
||||
@@ -8620,6 +8634,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Bamboo"
|
||||
>
|
||||
Bamboo
|
||||
@@ -8801,6 +8816,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Bamboo"
|
||||
>
|
||||
Bamboo
|
||||
@@ -9007,6 +9023,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Bamboo"
|
||||
>
|
||||
Bamboo
|
||||
@@ -9567,6 +9584,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Bamboo"
|
||||
>
|
||||
Bamboo
|
||||
@@ -10837,6 +10855,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HangZhou #310000"
|
||||
>
|
||||
HangZhou #310000
|
||||
@@ -13549,6 +13568,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="a1"
|
||||
>
|
||||
a1
|
||||
@@ -15620,6 +15640,7 @@ exports[`renders components/select/demo/suffix.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -15807,6 +15828,7 @@ exports[`renders components/select/demo/suffix.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -15971,6 +15993,7 @@ exports[`renders components/select/demo/suffix.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
|
||||
@@ -77,6 +77,7 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -131,6 +132,7 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -186,6 +188,7 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -240,6 +243,7 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -443,6 +447,7 @@ exports[`renders components/select/demo/coordinate.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Zhejiang"
|
||||
>
|
||||
Zhejiang
|
||||
@@ -497,6 +502,7 @@ exports[`renders components/select/demo/coordinate.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Hangzhou"
|
||||
>
|
||||
Hangzhou
|
||||
@@ -605,6 +611,7 @@ exports[`renders components/select/demo/custom-label-render.tsx correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
>
|
||||
<span>
|
||||
No option match
|
||||
@@ -1119,6 +1126,7 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -1239,6 +1247,7 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -1384,6 +1393,7 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -1566,6 +1576,7 @@ exports[`renders components/select/demo/label-in-value.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy (101)"
|
||||
>
|
||||
Lucy (101)
|
||||
@@ -1970,6 +1981,7 @@ exports[`renders components/select/demo/optgroup.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="lucy"
|
||||
>
|
||||
lucy
|
||||
@@ -2031,6 +2043,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="long, long, long piece of text"
|
||||
>
|
||||
long, long, long piece of text
|
||||
@@ -2163,6 +2176,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
>
|
||||
<div>
|
||||
normal
|
||||
@@ -2788,6 +2802,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Bamboo"
|
||||
>
|
||||
Bamboo
|
||||
@@ -2870,6 +2885,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Bamboo"
|
||||
>
|
||||
Bamboo
|
||||
@@ -2977,6 +2993,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Bamboo"
|
||||
>
|
||||
Bamboo
|
||||
@@ -3247,6 +3264,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Bamboo"
|
||||
>
|
||||
Bamboo
|
||||
@@ -3867,6 +3885,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="HangZhou #310000"
|
||||
>
|
||||
HangZhou #310000
|
||||
@@ -4702,6 +4721,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="a1"
|
||||
>
|
||||
a1
|
||||
@@ -5309,6 +5329,7 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -5386,6 +5407,7 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
@@ -5440,6 +5462,7 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
|
||||
@@ -468,6 +468,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Zhejiang"
|
||||
>
|
||||
Zhejiang
|
||||
@@ -1010,6 +1011,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Option1"
|
||||
>
|
||||
Option1
|
||||
@@ -4279,6 +4281,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Option1-1"
|
||||
>
|
||||
Option1-1
|
||||
@@ -4406,6 +4409,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Option2-2"
|
||||
>
|
||||
Option2-2
|
||||
@@ -4541,6 +4545,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Between"
|
||||
>
|
||||
Between
|
||||
@@ -4699,6 +4704,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Sign Up"
|
||||
>
|
||||
Sign Up
|
||||
@@ -8234,6 +8240,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="leaf1"
|
||||
>
|
||||
leaf1
|
||||
@@ -8905,6 +8912,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
@@ -9270,38 +9278,6 @@ exports[`renders components/space/demo/compact-button-vertical.tsx extend contex
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-vertical"
|
||||
>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 1
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 2
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-last-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 3
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -10407,6 +10383,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="http://"
|
||||
>
|
||||
http://
|
||||
@@ -10543,6 +10520,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title=".com"
|
||||
>
|
||||
.com
|
||||
@@ -12397,6 +12375,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Sign Up"
|
||||
>
|
||||
Sign Up
|
||||
@@ -13977,9 +13956,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
|
||||
`;
|
||||
|
||||
exports[`renders components/space/demo/compact-nested.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@@ -14106,6 +14083,7 @@ exports[`renders components/space/demo/compact-nested.tsx extend context correct
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="Opt1"
|
||||
>
|
||||
Opt1
|
||||
@@ -14327,7 +14305,8 @@ exports[`renders components/space/demo/compact-nested.tsx extend context correct
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@@ -15900,22 +15879,6 @@ exports[`renders components/space/demo/compact-nested.tsx extend context correct
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
~
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
~
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
@@ -16065,44 +16028,8 @@ exports[`renders components/space/demo/compact-nested.tsx extend context correct
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 1
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 2
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 3
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 4
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/space/demo/compact-nested.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
@@ -359,6 +359,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Zhejiang"
|
||||
>
|
||||
Zhejiang
|
||||
@@ -730,6 +731,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Option1"
|
||||
>
|
||||
Option1
|
||||
@@ -1120,6 +1122,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Option1-1"
|
||||
>
|
||||
Option1-1
|
||||
@@ -1169,6 +1172,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Option2-2"
|
||||
>
|
||||
Option2-2
|
||||
@@ -1226,6 +1230,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Between"
|
||||
>
|
||||
Between
|
||||
@@ -1306,6 +1311,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Sign Up"
|
||||
>
|
||||
Sign Up
|
||||
@@ -1576,6 +1582,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="leaf1"
|
||||
>
|
||||
leaf1
|
||||
@@ -1967,38 +1974,6 @@ exports[`renders components/space/demo/compact-button-vertical.tsx correctly 1`]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-vertical"
|
||||
>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 1
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 2
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-last-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 3
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -2594,6 +2569,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="http://"
|
||||
>
|
||||
http://
|
||||
@@ -2652,6 +2628,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title=".com"
|
||||
>
|
||||
.com
|
||||
@@ -3404,6 +3381,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Sign Up"
|
||||
>
|
||||
Sign Up
|
||||
@@ -3695,9 +3673,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@@ -3824,6 +3800,7 @@ exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="Opt1"
|
||||
>
|
||||
Opt1
|
||||
@@ -3967,7 +3944,8 @@ exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@@ -4024,22 +4002,6 @@ exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
~
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
~
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
@@ -4101,44 +4063,8 @@ exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 1
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 2
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 3
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button 4
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/space/demo/debug.tsx correctly 1`] = `
|
||||
|
||||
@@ -18,11 +18,6 @@ const App: React.FC = () => (
|
||||
<Button type="primary">Button 2</Button>
|
||||
<Button type="primary">Button 3</Button>
|
||||
</Space.Compact>
|
||||
<Space.Compact orientation="vertical">
|
||||
<Button variant="outlined">Button 1</Button>
|
||||
<Button variant="outlined">Button 2</Button>
|
||||
<Button variant="outlined">Button 3</Button>
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
);
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { CopyOutlined, SearchOutlined } from '@ant-design/icons';
|
||||
import { Button, Cascader, Flex, Input, InputNumber, Select, Space, TimePicker } from 'antd';
|
||||
import { Button, Cascader, Input, InputNumber, Select, Space, TimePicker } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Flex vertical gap="middle">
|
||||
<>
|
||||
<Space.Compact block>
|
||||
<Space.Compact>
|
||||
<Space.Compact>
|
||||
@@ -33,14 +33,12 @@ const App: React.FC = () => (
|
||||
</Space.Compact>
|
||||
</Space.Compact>
|
||||
</Space.Compact>
|
||||
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Space.Compact>
|
||||
<TimePicker />
|
||||
<Button type="primary">Submit</Button>
|
||||
</Space.Compact>
|
||||
<Button type="primary">~</Button>
|
||||
<Button type="primary">~</Button>
|
||||
<Space.Compact>
|
||||
<Cascader
|
||||
options={[
|
||||
@@ -82,22 +80,7 @@ const App: React.FC = () => (
|
||||
<Button type="primary">Submit</Button>
|
||||
</Space.Compact>
|
||||
</Space.Compact>
|
||||
|
||||
<Space.Compact>
|
||||
<Button color="default" variant="solid">
|
||||
Button 1
|
||||
</Button>
|
||||
<Button color="default" variant="solid">
|
||||
Button 2
|
||||
</Button>
|
||||
<Button color="danger" variant="solid">
|
||||
Button 3
|
||||
</Button>
|
||||
<Button color="danger" variant="solid">
|
||||
Button 4
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -9004,6 +9004,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -13634,6 +13635,7 @@ exports[`renders components/table/demo/fixed-header.tsx extend context correctly
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="50 / page"
|
||||
>
|
||||
50 / page
|
||||
@@ -15058,6 +15060,7 @@ exports[`renders components/table/demo/grouping-columns.tsx extend context corre
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -18864,6 +18867,7 @@ exports[`renders components/table/demo/narrow.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
|
||||
@@ -7958,6 +7958,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -12651,6 +12652,7 @@ exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -14656,6 +14658,7 @@ exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="50 / page"
|
||||
>
|
||||
50 / page
|
||||
@@ -15797,6 +15800,7 @@ exports[`renders components/table/demo/grouping-columns.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -17956,6 +17960,7 @@ exports[`renders components/table/demo/narrow.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
@@ -28328,6 +28333,7 @@ exports[`renders components/table/demo/sticky.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
|
||||
@@ -2250,6 +2250,7 @@ exports[`renders components/tree-select/demo/render-panel.tsx extend context cor
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="lucy"
|
||||
>
|
||||
lucy
|
||||
|
||||
@@ -594,6 +594,7 @@ exports[`renders components/tree-select/demo/render-panel.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="lucy"
|
||||
>
|
||||
lucy
|
||||
|
||||
@@ -3545,6 +3545,7 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="True"
|
||||
>
|
||||
True
|
||||
|
||||
@@ -3530,6 +3530,7 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility:visible"
|
||||
title="True"
|
||||
>
|
||||
True
|
||||
|
||||
@@ -257,6 +257,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
>
|
||||
<div
|
||||
class="ant-select-content-value"
|
||||
style="visibility: visible;"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
|
||||
115
guidelines/Guidelines.md
Normal file
115
guidelines/Guidelines.md
Normal file
@@ -0,0 +1,115 @@
|
||||
# Ant Design Guidelines for Figma Make
|
||||
|
||||
This project uses **Ant Design (antd)**, a comprehensive React UI component library and design system. Files in the `guidelines` directory show how to use Ant Design components and design tokens correctly.
|
||||
|
||||
## Always Read First
|
||||
|
||||
Before writing any code, you MUST read these files in order:
|
||||
|
||||
1. **All files with names starting with `overview-`** in the guidelines directory:
|
||||
- `overview-components.md` - Component overview and usage patterns
|
||||
- `overview-icons.md` - Icon system and usage
|
||||
|
||||
2. **All files in the `design-tokens/` folder**:
|
||||
- `design-tokens/colors.md` - Color token system
|
||||
- `design-tokens/typography.md` - Typography tokens
|
||||
- `design-tokens/spacing.md` - Spacing and size tokens
|
||||
|
||||
## Component Usage Guidelines - READ THIS FIRST
|
||||
|
||||
**IMPORTANT**: Always prefer to use components from Ant Design if they exist. For example, prefer to use a `Button` component from `antd`, rather than regular HTML button elements.
|
||||
|
||||
**IMPORTANT**: Follow these steps IN ORDER before writing any code:
|
||||
|
||||
### Step 1: Read Overview Files (REQUIRED)
|
||||
|
||||
Read ALL files with a name that starts with "overview-" in the guidelines directory:
|
||||
|
||||
- `overview-components.md`
|
||||
- `overview-icons.md` (And any other `overview-*.md` files)
|
||||
|
||||
### Step 2: Read Design Tokens (REQUIRED)
|
||||
|
||||
Read ALL files in the `design-tokens/` folder. Do NOT skip this step. Design tokens are essential for creating consistent, themeable UI.
|
||||
|
||||
### Step 3: Plan What Components You Need to Use (REQUIRED)
|
||||
|
||||
Before using ANY component, check if Ant Design provides it. Common components include:
|
||||
|
||||
- Form controls: Button, Input, Select, Checkbox, Radio, Switch, etc.
|
||||
- Data display: Table, List, Card, Tag, Badge, etc.
|
||||
- Feedback: Modal, Message, Notification, Alert, etc.
|
||||
- Navigation: Menu, Tabs, Breadcrumb, Pagination, etc.
|
||||
- Layout: Layout, Grid, Space, Divider, etc.
|
||||
|
||||
### Step 4: Read Component Guidelines BEFORE Using Components (REQUIRED)
|
||||
|
||||
BEFORE using ANY component, you MUST read its guidelines file first:
|
||||
|
||||
- Using Button? → Read `guidelines/components/button.md` FIRST
|
||||
- Using Input? → Read `guidelines/components/input.md` FIRST
|
||||
- Using Form? → Read `guidelines/components/form.md` FIRST
|
||||
- Using Table? → Read `guidelines/components/table.md` FIRST
|
||||
|
||||
If a component guideline file doesn't exist, check the component's documentation in `components/[component-name]/index.en-US.md` or `components/[component-name]/index.zh-CN.md`.
|
||||
|
||||
### Step 5: Plan What Icons You Need to Use (REQUIRED)
|
||||
|
||||
Before using ANY icon, you must check if that icon exists in the `@ant-design/icons` package. If it doesn't, pick a different icon and verify the new icon exists.
|
||||
|
||||
**DO NOT write code using a component until you have read its specific guidelines.**
|
||||
|
||||
## Import Pattern
|
||||
|
||||
Always import components from `antd`:
|
||||
|
||||
```typescript
|
||||
import { SearchOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { Button, Form, Input, Table } from 'antd';
|
||||
```
|
||||
|
||||
## Design Token Usage
|
||||
|
||||
**NEVER hardcode colors, sizes, spacing, or typography values.** Always use design tokens from Ant Design's theme system. Access tokens through:
|
||||
|
||||
1. **Theme configuration** via `ConfigProvider`:
|
||||
|
||||
```typescript
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#1890ff',
|
||||
borderRadius: 6,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* Your app */}
|
||||
</ConfigProvider>
|
||||
```
|
||||
|
||||
2. **CSS Variables** (when enabled):
|
||||
|
||||
```css
|
||||
.my-component {
|
||||
color: var(--ant-color-primary);
|
||||
padding: var(--ant-padding-md);
|
||||
}
|
||||
```
|
||||
|
||||
3. **useToken hook** in component styles:
|
||||
|
||||
```typescript
|
||||
import { theme } from 'antd';
|
||||
|
||||
const { token } = theme.useToken();
|
||||
// Use token.colorPrimary, token.paddingMD, etc.
|
||||
```
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- Component source code: `components/[component-name]/`
|
||||
- Component documentation: `components/[component-name]/index.en-US.md`
|
||||
- Design tokens interface: `components/theme/interface/`
|
||||
- Design specifications: `docs/spec/`
|
||||
33
guidelines/components/affix.md
Normal file
33
guidelines/components/affix.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# Affix Component
|
||||
|
||||
**Purpose**: Make elements stick to viewport when scrolling.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Sticky navigation
|
||||
- Fixed elements during scroll
|
||||
- Keep important elements visible
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Affix } from 'antd';
|
||||
|
||||
<Affix offsetTop={10}>
|
||||
<Button type="primary">Affix top</Button>
|
||||
</Affix>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------------- | ------------------ | ----------------- | ------------ |
|
||||
| `offsetTop` | Offset from top | number | - |
|
||||
| `offsetBottom` | Offset from bottom | number | - |
|
||||
| `target` | Target container | () => HTMLElement | () => window |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Navigation** - Use for sticky navigation
|
||||
2. **Important elements** - Keep important elements visible
|
||||
3. **Appropriate offset** - Set appropriate offset values
|
||||
84
guidelines/components/alert.md
Normal file
84
guidelines/components/alert.md
Normal file
@@ -0,0 +1,84 @@
|
||||
# Alert Component
|
||||
|
||||
**Purpose**: Display warning messages that require attention. Used for inline important messages.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show alert messages to users
|
||||
- Display persistent static containers that are closable
|
||||
- Show important information, warnings, or errors
|
||||
- Display banner messages at the top of pages
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Alert } from 'antd';
|
||||
|
||||
<Alert message="Success Text" type="success" />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `message` | Alert content | ReactNode | - |
|
||||
| `description` | Additional content | ReactNode | - |
|
||||
| `type` | Alert type | `'success'` \| `'info'` \| `'warning'` \| `'error'` | `'info'` |
|
||||
| `closable` | Show close button | boolean | false |
|
||||
| `showIcon` | Show icon | boolean | false |
|
||||
| `icon` | Custom icon | ReactNode | - |
|
||||
| `banner` | Show as banner | boolean | false |
|
||||
| `action` | Custom action | ReactNode | - |
|
||||
| `onClose` | Close handler | (e: MouseEvent) => void | - |
|
||||
|
||||
## Examples
|
||||
|
||||
### Different Types
|
||||
|
||||
```typescript
|
||||
<Alert message="Success" type="success" />
|
||||
<Alert message="Info" type="info" />
|
||||
<Alert message="Warning" type="warning" />
|
||||
<Alert message="Error" type="error" />
|
||||
```
|
||||
|
||||
### With Description
|
||||
|
||||
```typescript
|
||||
<Alert
|
||||
message="Success"
|
||||
description="Detailed description and advice about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
```
|
||||
|
||||
### Closable
|
||||
|
||||
```typescript
|
||||
<Alert
|
||||
message="Alert"
|
||||
type="info"
|
||||
closable
|
||||
onClose={() => console.log('Closed')}
|
||||
/>
|
||||
```
|
||||
|
||||
### Banner
|
||||
|
||||
```typescript
|
||||
<Alert
|
||||
message="Banner Alert"
|
||||
type="warning"
|
||||
banner
|
||||
closable
|
||||
/>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Appropriate type** - Use correct type for message severity
|
||||
2. **Clear messages** - Provide clear, actionable messages
|
||||
3. **Descriptions** - Use description for additional context
|
||||
4. **Closable for dismissible** - Make alerts closable when users can dismiss them
|
||||
5. **Banner for important** - Use banner mode for important page-level messages
|
||||
36
guidelines/components/anchor.md
Normal file
36
guidelines/components/anchor.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# Anchor Component
|
||||
|
||||
**Purpose**: Anchor navigation for jumping to different sections on the same page.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Navigate to different sections on a long page
|
||||
- Create table of contents
|
||||
- Quick navigation within a page
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Anchor } from 'antd';
|
||||
|
||||
<Anchor
|
||||
items={[
|
||||
{ key: 'part-1', href: '#part-1', title: 'Part 1' },
|
||||
{ key: 'part-2', href: '#part-2', title: 'Part 2' },
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | --------------- | ------------ | ------- |
|
||||
| `items` | Anchor items | AnchorItem[] | - |
|
||||
| `affix` | Fixed position | boolean | true |
|
||||
| `offsetTop` | Offset from top | number | 0 |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Long pages** - Use for pages with multiple sections
|
||||
2. **Fixed position** - Use affix for always-visible navigation
|
||||
3. **Smooth scrolling** - Ensure smooth scroll behavior
|
||||
29
guidelines/components/app.md
Normal file
29
guidelines/components/app.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# App Component
|
||||
|
||||
**Purpose**: App-level container for message, notification, and modal context.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Use message, notification, or modal hooks
|
||||
- Need context for static methods
|
||||
- App-level container
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { App } from 'antd';
|
||||
|
||||
function MyApp() {
|
||||
return (
|
||||
<App>
|
||||
<YourComponent />
|
||||
</App>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Wrap app** - Wrap app when using hooks like useModal, useMessage
|
||||
2. **Context provider** - Provides context for static methods
|
||||
3. **Single instance** - Usually one App component per application
|
||||
34
guidelines/components/avatar.md
Normal file
34
guidelines/components/avatar.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Avatar Component
|
||||
|
||||
**Purpose**: Avatar display for users or entities.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Display user avatars
|
||||
- Show entity images
|
||||
- Fallback to initials or icons
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Avatar } from 'antd';
|
||||
|
||||
<Avatar src="image.jpg" />
|
||||
<Avatar>U</Avatar>
|
||||
<Avatar icon={<UserOutlined />} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ------------ | ----------------------------------------------- | ----------- |
|
||||
| `src` | Image source | string | - |
|
||||
| `icon` | Icon | ReactNode | - |
|
||||
| `size` | Avatar size | number \| `'large'` \| `'small'` \| `'default'` | `'default'` |
|
||||
| `shape` | Avatar shape | `'circle'` \| `'square'` | `'circle'` |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Fallback** - Provide fallback (initials or icon)
|
||||
2. **Consistent sizing** - Use consistent sizes
|
||||
3. **Accessible** - Include alt text or aria-label
|
||||
30
guidelines/components/back-top.md
Normal file
30
guidelines/components/back-top.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# BackTop Component
|
||||
|
||||
**Purpose**: Back to top button for long pages.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Long pages that need quick scroll to top
|
||||
- Improve navigation on long content
|
||||
- Quick return to top
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { BackTop } from 'antd';
|
||||
|
||||
<BackTop />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ------------------ | --------------------------- | ----------------- | ------------ |
|
||||
| `visibilityHeight` | Show button after scrolling | number | 400 |
|
||||
| `target` | Target element to listen | () => HTMLElement | () => window |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Long pages** - Use for pages with long content
|
||||
2. **Visibility height** - Set appropriate visibility height
|
||||
3. **Smooth scroll** - Provides smooth scroll to top
|
||||
64
guidelines/components/badge.md
Normal file
64
guidelines/components/badge.md
Normal file
@@ -0,0 +1,64 @@
|
||||
# Badge Component
|
||||
|
||||
**Purpose**: Small numerical value or status descriptor for UI elements. Typically displays unread messages count.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Display notification count on icons or avatars
|
||||
- Show status indicators
|
||||
- Display small numerical values
|
||||
- Show unread message counts
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Badge } from 'antd';
|
||||
|
||||
<Badge count={5}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `count` | Number to show | ReactNode | - |
|
||||
| `dot` | Show red dot instead of count | boolean | false |
|
||||
| `overflowCount` | Max count to show | number | 99 |
|
||||
| `showZero` | Show when count is zero | boolean | false |
|
||||
| `offset` | Badge offset | [number, number] | - |
|
||||
| `color` | Custom badge color | string | - |
|
||||
| `status` | Status badge | `'success'` \| `'processing'` \| `'default'` \| `'error'` \| `'warning'` | - |
|
||||
|
||||
## Examples
|
||||
|
||||
### Dot Badge
|
||||
|
||||
```typescript
|
||||
<Badge dot>
|
||||
<NotificationOutlined />
|
||||
</Badge>
|
||||
```
|
||||
|
||||
### Status Badge
|
||||
|
||||
```typescript
|
||||
<Badge status="success" text="Success" />
|
||||
<Badge status="error" text="Error" />
|
||||
```
|
||||
|
||||
### Overflow Count
|
||||
|
||||
```typescript
|
||||
<Badge count={1000} overflowCount={999}>
|
||||
<Avatar />
|
||||
</Badge>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use for notifications** - Use badges for unread counts and notifications
|
||||
2. **Overflow handling** - Set appropriate overflowCount
|
||||
3. **Status indicators** - Use status prop for status badges
|
||||
4. **Don't overuse** - Use badges sparingly to maintain visual hierarchy
|
||||
36
guidelines/components/breadcrumb.md
Normal file
36
guidelines/components/breadcrumb.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# Breadcrumb Component
|
||||
|
||||
**Purpose**: Breadcrumb navigation to show the current page location and path.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show the current page location within a website hierarchy
|
||||
- Navigate back to parent pages
|
||||
- Display the navigation path
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ title: 'Home' },
|
||||
{ title: 'Application' },
|
||||
{ title: 'An Application' },
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | ---------------- | ---------------- | ------- |
|
||||
| `items` | Breadcrumb items | BreadcrumbItem[] | - |
|
||||
| `separator` | Custom separator | ReactNode | `/` |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Show hierarchy** - Display the full path from home to current page
|
||||
2. **Clickable items** - Make parent items clickable for navigation
|
||||
3. **Current page** - Don't make the current page clickable
|
||||
206
guidelines/components/button.md
Normal file
206
guidelines/components/button.md
Normal file
@@ -0,0 +1,206 @@
|
||||
# Button Component
|
||||
|
||||
**Purpose**: Trigger operations and actions. Buttons are the primary way users interact with the interface.
|
||||
|
||||
## When to Use
|
||||
|
||||
- **Primary Button**: Use for the main action in a section. There should be at most one primary button per section.
|
||||
- **Default Button**: Use for a series of actions without priority.
|
||||
- **Dashed Button**: Commonly used for adding more actions.
|
||||
- **Text Button**: Use for the most secondary actions.
|
||||
- **Link Button**: Use for external links or navigation.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Button } from 'antd';
|
||||
|
||||
// Primary button (main action)
|
||||
<Button type="primary">Primary</Button>
|
||||
|
||||
// Default button
|
||||
<Button>Default</Button>
|
||||
|
||||
// Dashed button
|
||||
<Button type="dashed">Dashed</Button>
|
||||
|
||||
// Text button
|
||||
<Button type="text">Text</Button>
|
||||
|
||||
// Link button
|
||||
<Button type="link">Link</Button>
|
||||
```
|
||||
|
||||
## Button Types and Variants
|
||||
|
||||
### Type vs Variant & Color
|
||||
|
||||
In Ant Design 5.21.0+, you can use either `type` (syntactic sugar) or `variant` + `color`:
|
||||
|
||||
```typescript
|
||||
// These are equivalent:
|
||||
<Button type="primary">Click</Button>
|
||||
<Button color="primary" variant="solid">Click</Button>
|
||||
```
|
||||
|
||||
**IMPORTANT**: If both `type` and `variant`/`color` are provided, `variant` and `color` take precedence.
|
||||
|
||||
### Variants
|
||||
|
||||
- **`solid`**: Solid filled button (default for primary)
|
||||
- **`outlined`**: Outlined button with transparent background
|
||||
- **`dashed`**: Dashed border button
|
||||
- **`filled`**: Filled button with background
|
||||
- **`text`**: Text-only button
|
||||
- **`link`**: Link-style button
|
||||
|
||||
### Colors
|
||||
|
||||
- **`default`**: Default button color
|
||||
- **`primary`**: Primary brand color
|
||||
- **`danger`**: Danger/destructive action color
|
||||
- **Preset colors**: `'blue'`, `'purple'`, `'cyan'`, `'green'`, `'magenta'`, `'pink'`, `'red'`, `'orange'`, `'yellow'`, `'volcano'`, `'geekblue'`, `'lime'`, `'gold'`
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `type` | Button type (syntactic sugar) | `'primary'` \| `'default'` \| `'dashed'` \| `'text'` \| `'link'` | `'default'` |
|
||||
| `variant` | Button variant | `'solid'` \| `'outlined'` \| `'dashed'` \| `'filled'` \| `'text'` \| `'link'` | - |
|
||||
| `color` | Button color | `'default'` \| `'primary'` \| `'danger'` \| PresetColors | - |
|
||||
| `size` | Button size | `'small'` \| `'middle'` \| `'large'` | `'middle'` |
|
||||
| `shape` | Button shape | `'default'` \| `'circle'` \| `'round'` | `'default'` |
|
||||
| `icon` | Icon component | ReactNode | - |
|
||||
| `iconPosition` | Icon position | `'start'` \| `'end'` | `'start'` |
|
||||
| `loading` | Loading state | boolean \| { delay: number, icon: ReactNode } | false |
|
||||
| `disabled` | Disabled state | boolean | false |
|
||||
| `danger` | Danger status | boolean | false |
|
||||
| `ghost` | Ghost button (transparent background) | boolean | false |
|
||||
| `block` | Block button (full width) | boolean | false |
|
||||
| `htmlType` | HTML button type | `'button'` \| `'submit'` \| `'reset'` | `'button'` |
|
||||
| `onClick` | Click handler | (event) => void | - |
|
||||
|
||||
## Examples
|
||||
|
||||
### With Icons
|
||||
|
||||
```typescript
|
||||
import { Button } from 'antd';
|
||||
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons';
|
||||
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
<Button icon={<DownloadOutlined />} iconPosition="end">Download</Button>
|
||||
<Button icon={<SearchOutlined />} /> // Icon-only button
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
```typescript
|
||||
<Button size="small">Small</Button>
|
||||
<Button size="middle">Middle</Button>
|
||||
<Button size="large">Large</Button>
|
||||
```
|
||||
|
||||
### Shapes
|
||||
|
||||
```typescript
|
||||
<Button shape="default">Default</Button>
|
||||
<Button shape="round">Round</Button>
|
||||
<Button shape="circle" icon={<SearchOutlined />} /> // Circle button (icon only)
|
||||
```
|
||||
|
||||
### Loading State
|
||||
|
||||
```typescript
|
||||
<Button loading>Loading</Button>
|
||||
<Button loading={{ delay: 1000 }}>Delayed Loading</Button>
|
||||
```
|
||||
|
||||
### Danger Buttons
|
||||
|
||||
```typescript
|
||||
<Button danger>Danger</Button>
|
||||
<Button type="primary" danger>Danger Primary</Button>
|
||||
```
|
||||
|
||||
### Block Button
|
||||
|
||||
```typescript
|
||||
<Button block>Full Width Button</Button>
|
||||
```
|
||||
|
||||
### Ghost Button
|
||||
|
||||
```typescript
|
||||
<Button ghost>Ghost Button</Button>
|
||||
<Button type="primary" ghost>Ghost Primary</Button>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **One primary action per section** - Use primary button for the main action only
|
||||
2. **Clear hierarchy** - Use button types to establish visual hierarchy
|
||||
3. **Appropriate sizing** - Use `middle` (default) for most cases, `large` for prominent actions, `small` for compact UI
|
||||
4. **Loading states** - Show loading state during async operations to prevent multiple submissions
|
||||
5. **Disabled states** - Disable buttons when actions are not available
|
||||
6. **Icon placement** - Icons should be on the left (start) by default, use `iconPosition="end"` only when appropriate
|
||||
7. **Danger actions** - Use `danger` prop for destructive actions like delete
|
||||
8. **Don't override styles** - Use component props instead of custom CSS when possible
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Button Groups
|
||||
|
||||
```typescript
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
<Space>
|
||||
<Button>Cancel</Button>
|
||||
<Button type="primary">Submit</Button>
|
||||
</Space>
|
||||
```
|
||||
|
||||
### Form Actions
|
||||
|
||||
```typescript
|
||||
<Form onFinish={handleSubmit}>
|
||||
{/* Form fields */}
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button onClick={handleCancel}>Cancel</Button>
|
||||
<Button type="primary" htmlType="submit" loading={loading}>
|
||||
Submit
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
```
|
||||
|
||||
### Icon-Only Buttons
|
||||
|
||||
```typescript
|
||||
<Button shape="circle" icon={<SearchOutlined />} aria-label="Search" />
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Buttons are keyboard accessible by default
|
||||
- Use `aria-label` for icon-only buttons
|
||||
- Ensure sufficient color contrast
|
||||
- Don't rely solely on color to convey meaning
|
||||
|
||||
## Styling
|
||||
|
||||
**IMPORTANT**: Do not override button styles with `className` unless absolutely necessary. Instead:
|
||||
|
||||
- Use `variant` and `color` props for styling
|
||||
- Use `ConfigProvider` theme customization for global changes
|
||||
- Use design tokens for custom styling
|
||||
|
||||
```typescript
|
||||
// ✅ CORRECT - Using props
|
||||
<Button variant="outlined" color="primary">Button</Button>
|
||||
|
||||
// ❌ WRONG - Overriding with className
|
||||
<Button className="custom-button">Button</Button>
|
||||
```
|
||||
74
guidelines/components/card.md
Normal file
74
guidelines/components/card.md
Normal file
@@ -0,0 +1,74 @@
|
||||
# Card Component
|
||||
|
||||
**Purpose**: A container for displaying information. Used to display content related to a single subject.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Display content related to a single subject
|
||||
- Group related information together
|
||||
- Create visual containers for content sections
|
||||
- Display cards in grids or lists
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Card } from 'antd';
|
||||
|
||||
<Card title="Card Title">
|
||||
Card content
|
||||
</Card>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | --------------------------- | ------------------------ | ----------- |
|
||||
| `title` | Card title | ReactNode | - |
|
||||
| `extra` | Content in top-right corner | ReactNode | - |
|
||||
| `actions` | Action list at bottom | ReactNode[] | - |
|
||||
| `cover` | Card cover image | ReactNode | - |
|
||||
| `loading` | Loading state | boolean | false |
|
||||
| `hoverable` | Lift up when hovering | boolean | false |
|
||||
| `bordered` | Show border | boolean | true |
|
||||
| `size` | Card size | `'default'` \| `'small'` | `'default'` |
|
||||
|
||||
## Examples
|
||||
|
||||
### With Cover
|
||||
|
||||
```typescript
|
||||
<Card
|
||||
cover={<img alt="example" src="..." />}
|
||||
actions={[<SettingOutlined />, <EditOutlined />]}
|
||||
>
|
||||
<Card.Meta title="Card Title" description="Card description" />
|
||||
</Card>
|
||||
```
|
||||
|
||||
### Loading Card
|
||||
|
||||
```typescript
|
||||
<Card loading={loading} title="Card Title">
|
||||
Content
|
||||
</Card>
|
||||
```
|
||||
|
||||
### Grid Cards
|
||||
|
||||
```typescript
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<Card title="Card 1">Content</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card title="Card 2">Content</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Single subject** - Each card should focus on a single subject
|
||||
2. **Clear hierarchy** - Use title, description, and actions appropriately
|
||||
3. **Loading states** - Show loading state while fetching data
|
||||
4. **Hoverable for interaction** - Use hoverable for clickable cards
|
||||
39
guidelines/components/carousel.md
Normal file
39
guidelines/components/carousel.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# Carousel Component
|
||||
|
||||
**Purpose**: Carousel/slider for cycling through content.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Image carousels
|
||||
- Content sliders
|
||||
- Rotating content display
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Carousel } from 'antd';
|
||||
|
||||
<Carousel>
|
||||
<div>
|
||||
<h3>1</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>2</h3>
|
||||
</div>
|
||||
</Carousel>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------- | ---------------- | ------- | ------- |
|
||||
| `autoplay` | Auto play | boolean | false |
|
||||
| `dots` | Show dots | boolean | true |
|
||||
| `infinite` | Infinite loop | boolean | true |
|
||||
| `speed` | Transition speed | number | 500 |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Image carousels** - Use for image galleries
|
||||
2. **Auto play** - Use autoplay sparingly
|
||||
3. **Navigation** - Provide clear navigation controls
|
||||
33
guidelines/components/cascader.md
Normal file
33
guidelines/components/cascader.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# Cascader Component
|
||||
|
||||
**Purpose**: Cascading selector for hierarchical data selection.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Select from hierarchical data
|
||||
- Multi-level selection
|
||||
- Region, category selection
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Cascader } from 'antd';
|
||||
|
||||
<Cascader options={options} onChange={onChange} placeholder="Please select" />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ------------ | ------------------ | -------------------------------- | ------- |
|
||||
| `options` | Cascader options | CascaderOption[] | - |
|
||||
| `value` | Selected value | string[] | - |
|
||||
| `onChange` | Change handler | (value, selectedOptions) => void | - |
|
||||
| `showSearch` | Enable search | boolean | false |
|
||||
| `multiple` | Multiple selection | boolean | false |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Always use within Form.Item
|
||||
2. **Search for many options** - Enable search for large option sets
|
||||
3. **Clear labels** - Provide clear option labels
|
||||
38
guidelines/components/checkbox.md
Normal file
38
guidelines/components/checkbox.md
Normal file
@@ -0,0 +1,38 @@
|
||||
# Checkbox Component
|
||||
|
||||
**Purpose**: Checkbox input for selecting one or multiple options.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Select one or multiple options
|
||||
- Use Checkbox.Group for multiple related options
|
||||
- Form inputs for boolean or multiple selections
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Checkbox } from 'antd';
|
||||
|
||||
<Checkbox>Checkbox</Checkbox>
|
||||
|
||||
<Checkbox.Group
|
||||
options={['Apple', 'Pear', 'Orange']}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------------- | ------------------- | ----------- | ------- |
|
||||
| `checked` | Checked state | boolean | false |
|
||||
| `defaultChecked` | Default checked | boolean | false |
|
||||
| `disabled` | Disabled state | boolean | false |
|
||||
| `indeterminate` | Indeterminate state | boolean | false |
|
||||
| `onChange` | Change handler | (e) => void | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Always use within Form.Item
|
||||
2. **Group for multiple** - Use Checkbox.Group for related options
|
||||
3. **Indeterminate** - Use for parent checkboxes with mixed children states
|
||||
40
guidelines/components/collapse.md
Normal file
40
guidelines/components/collapse.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# Collapse Component
|
||||
|
||||
**Purpose**: Collapsible panels for showing and hiding content.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show/hide content sections
|
||||
- Accordion-style content
|
||||
- FAQ sections
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Collapse } from 'antd';
|
||||
|
||||
<Collapse
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: 'This is panel header 1',
|
||||
children: <p>Content</p>,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ------------------ | ---------------------------- | ------------------ | ------- |
|
||||
| `items` | Collapse items | CollapseItem[] | - |
|
||||
| `activeKey` | Active panel keys | string \| string[] | - |
|
||||
| `defaultActiveKey` | Default active keys | string \| string[] | - |
|
||||
| `accordion` | Accordion mode (single open) | boolean | false |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Clear labels** - Provide clear panel labels
|
||||
2. **Accordion mode** - Use accordion for single-open behavior
|
||||
3. **Organized content** - Group related content in panels
|
||||
33
guidelines/components/color-picker.md
Normal file
33
guidelines/components/color-picker.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# ColorPicker Component
|
||||
|
||||
**Purpose**: Color picker for selecting colors.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Select colors
|
||||
- Color customization
|
||||
- Theme color selection
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { ColorPicker } from 'antd';
|
||||
|
||||
<ColorPicker defaultValue="#1677ff" onChange={onChange} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------------- | --------------- | ----------------------------- | ------- |
|
||||
| `value` | Selected color | string | - |
|
||||
| `defaultValue` | Default color | string | - |
|
||||
| `format` | Color format | `'hex'` \| `'rgb'` \| `'hsb'` | `'hex'` |
|
||||
| `onChange` | Change handler | (color, colorString) => void | - |
|
||||
| `showText` | Show color text | boolean | false |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Always use within Form.Item
|
||||
2. **Color format** - Choose appropriate color format
|
||||
3. **Show text** - Use showText for better UX
|
||||
43
guidelines/components/config-provider.md
Normal file
43
guidelines/components/config-provider.md
Normal file
@@ -0,0 +1,43 @@
|
||||
# ConfigProvider Component
|
||||
|
||||
**Purpose**: Global configuration for Ant Design components. Provides theme, locale, and other global settings.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Configure global theme
|
||||
- Set locale for internationalization
|
||||
- Customize design tokens globally
|
||||
- Configure component defaults
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#00b96b',
|
||||
},
|
||||
}}
|
||||
locale={zhCN}
|
||||
>
|
||||
<App />
|
||||
</ConfigProvider>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --------------- | -------------------- | ------------------------------------ | ------- |
|
||||
| `theme` | Theme configuration | ThemeConfig | - |
|
||||
| `locale` | Locale configuration | Locale | - |
|
||||
| `direction` | Text direction | `'ltr'` \| `'rtl'` | `'ltr'` |
|
||||
| `componentSize` | Component size | `'small'` \| `'middle'` \| `'large'` | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Wrap app** - Wrap your entire app with ConfigProvider
|
||||
2. **Theme customization** - Use theme prop for global customization
|
||||
3. **Locale** - Set locale for internationalization
|
||||
4. **Nested providers** - Can nest providers for different sections
|
||||
35
guidelines/components/date-picker.md
Normal file
35
guidelines/components/date-picker.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# DatePicker Component
|
||||
|
||||
**Purpose**: Date picker for selecting dates.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Select dates
|
||||
- Date range selection
|
||||
- Form date inputs
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { DatePicker } from 'antd';
|
||||
|
||||
<DatePicker onChange={onChange} />
|
||||
<RangePicker onChange={onChange} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------------- | --------------------- | -------------------------- | -------------- |
|
||||
| `value` | Selected date | dayjs | - |
|
||||
| `defaultValue` | Default date | dayjs | - |
|
||||
| `format` | Date format | string | `'YYYY-MM-DD'` |
|
||||
| `onChange` | Change handler | (date, dateString) => void | - |
|
||||
| `disabledDate` | Disable date function | (current) => boolean | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Always use within Form.Item
|
||||
2. **Date format** - Set appropriate date format
|
||||
3. **Range picker** - Use RangePicker for date ranges
|
||||
4. **Disabled dates** - Use disabledDate to restrict dates
|
||||
35
guidelines/components/descriptions.md
Normal file
35
guidelines/components/descriptions.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# Descriptions Component
|
||||
|
||||
**Purpose**: Display read-only fields in groups. Key-value pairs.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Display read-only information
|
||||
- Show key-value pairs
|
||||
- Detail views and information display
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Descriptions } from 'antd';
|
||||
|
||||
<Descriptions title="User Info">
|
||||
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
|
||||
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
|
||||
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
|
||||
</Descriptions>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------- | ------------------ | --------- | ------- |
|
||||
| `title` | Descriptions title | ReactNode | - |
|
||||
| `column` | Number of columns | number | 3 |
|
||||
| `bordered` | Show border | boolean | false |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Read-only data** - Use for displaying read-only information
|
||||
2. **Key-value pairs** - Perfect for key-value data display
|
||||
3. **Appropriate columns** - Set columns based on screen size
|
||||
62
guidelines/components/divider.md
Normal file
62
guidelines/components/divider.md
Normal file
@@ -0,0 +1,62 @@
|
||||
# Divider Component
|
||||
|
||||
**Purpose**: Content divider for separating sections.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Separate content sections
|
||||
- Divide different types of content
|
||||
- Create visual separation between elements
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Divider } from 'antd';
|
||||
|
||||
<Divider />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `type` | Divider type | `'horizontal'` \| `'vertical'` | `'horizontal'` |
|
||||
| `orientation` | Text orientation | `'left'` \| `'right'` \| `'center'` | `'center'` |
|
||||
| `orientationMargin` | Margin for text | number \| string | - |
|
||||
| `dashed` | Dashed line | boolean | false |
|
||||
| `plain` | Plain text (no border) | boolean | false |
|
||||
|
||||
## Examples
|
||||
|
||||
### With Text
|
||||
|
||||
```typescript
|
||||
<Divider>Text</Divider>
|
||||
<Divider orientation="left">Left Text</Divider>
|
||||
<Divider orientation="right">Right Text</Divider>
|
||||
```
|
||||
|
||||
### Dashed
|
||||
|
||||
```typescript
|
||||
<Divider dashed>Dashed</Divider>
|
||||
```
|
||||
|
||||
### Vertical
|
||||
|
||||
```typescript
|
||||
<Space>
|
||||
<span>Text</span>
|
||||
<Divider type="vertical" />
|
||||
<span>Text</span>
|
||||
<Divider type="vertical" />
|
||||
<span>Text</span>
|
||||
</Space>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use for separation** - Use dividers to separate distinct content sections
|
||||
2. **Avoid overuse** - Don't use too many dividers, use spacing instead when possible
|
||||
3. **Text orientation** - Use appropriate text orientation for context
|
||||
4. **Vertical dividers** - Use vertical dividers in inline contexts (Space, etc.)
|
||||
40
guidelines/components/drawer.md
Normal file
40
guidelines/components/drawer.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# Drawer Component
|
||||
|
||||
**Purpose**: Drawer panel that slides in from the edge of the screen.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show additional content from the side
|
||||
- Display forms or details
|
||||
- Mobile-friendly side panels
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Drawer } from 'antd';
|
||||
|
||||
<Drawer
|
||||
title="Drawer Title"
|
||||
placement="right"
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
>
|
||||
<p>Drawer content</p>
|
||||
</Drawer>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | ---------------- | ---------------------------------------------- | --------- |
|
||||
| `open` | Visible state | boolean | false |
|
||||
| `title` | Drawer title | ReactNode | - |
|
||||
| `placement` | Drawer placement | `'top'` \| `'right'` \| `'bottom'` \| `'left'` | `'right'` |
|
||||
| `width` | Drawer width | number \| string | 378 |
|
||||
| `onClose` | Close handler | (e) => void | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Right placement** - Use right placement for most cases
|
||||
2. **Appropriate width** - Set width based on content
|
||||
3. **Mobile friendly** - Drawers work well on mobile
|
||||
30
guidelines/components/empty.md
Normal file
30
guidelines/components/empty.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# Empty Component
|
||||
|
||||
**Purpose**: Empty state placeholder when there is no data.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show empty state when no data
|
||||
- Display helpful messages for empty states
|
||||
- Guide users when content is missing
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Empty } from 'antd';
|
||||
|
||||
<Empty description="No Data" />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ------------- | ----------------- | --------- | ----------- |
|
||||
| `description` | Empty description | ReactNode | `'No Data'` |
|
||||
| `image` | Custom image | ReactNode | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Helpful messages** - Provide helpful, actionable messages
|
||||
2. **Custom images** - Use custom images for branded empty states
|
||||
3. **Action guidance** - Guide users on what to do next
|
||||
69
guidelines/components/flex.md
Normal file
69
guidelines/components/flex.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# Flex Component
|
||||
|
||||
**Purpose**: Flexbox layout component for flexible layouts.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Need flexible box layout
|
||||
- Align items in rows or columns
|
||||
- Distribute space between elements
|
||||
- More control than Space component
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Flex } from 'antd';
|
||||
|
||||
<Flex>
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</Flex>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `vertical` | Vertical layout | boolean | false |
|
||||
| `wrap` | Wrap items | boolean | false |
|
||||
| `gap` | Gap between items | number \| string \| [number, number] | - |
|
||||
| `justify` | Justify content | `'start'` \| `'end'` \| `'center'` \| `'space-between'` \| `'space-around'` \| `'space-evenly'` | `'start'` |
|
||||
| `align` | Align items | `'start'` \| `'end'` \| `'center'` \| `'baseline'` \| `'stretch'` | `'start'` |
|
||||
|
||||
## Examples
|
||||
|
||||
### Vertical Layout
|
||||
|
||||
```typescript
|
||||
<Flex vertical gap="middle">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</Flex>
|
||||
```
|
||||
|
||||
### Justify Content
|
||||
|
||||
```typescript
|
||||
<Flex justify="space-between">
|
||||
<div>Left</div>
|
||||
<div>Right</div>
|
||||
</Flex>
|
||||
```
|
||||
|
||||
### With Gap
|
||||
|
||||
```typescript
|
||||
<Flex gap={16}>
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</Flex>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use for block layouts** - Use Flex for block-level element layouts
|
||||
2. **More control than Space** - Use Flex when you need more layout control
|
||||
3. **Gap for spacing** - Use gap prop for consistent spacing
|
||||
4. **Responsive** - Combine with responsive utilities for mobile layouts
|
||||
32
guidelines/components/float-button.md
Normal file
32
guidelines/components/float-button.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# FloatButton Component
|
||||
|
||||
**Purpose**: Floating action button for primary actions.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Primary action button
|
||||
- Quick access to main actions
|
||||
- Floating action buttons
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { FloatButton } from 'antd';
|
||||
|
||||
<FloatButton icon={<CustomerServiceOutlined />} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --------- | ------------ | -------------------------- | ----------- |
|
||||
| `icon` | Button icon | ReactNode | - |
|
||||
| `type` | Button type | `'default'` \| `'primary'` | `'default'` |
|
||||
| `shape` | Button shape | `'circle'` \| `'square'` | `'circle'` |
|
||||
| `tooltip` | Tooltip text | ReactNode | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Primary actions** - Use for primary, frequently used actions
|
||||
2. **Icon clarity** - Use clear, recognizable icons
|
||||
3. **Tooltip** - Provide tooltip for icon-only buttons
|
||||
426
guidelines/components/form.md
Normal file
426
guidelines/components/form.md
Normal file
@@ -0,0 +1,426 @@
|
||||
# Form Component
|
||||
|
||||
**Purpose**: Form container with validation, layout, and data management. The Form component is essential for all data entry in Ant Design applications.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Use `Form` for any data collection (user input, settings, search filters, etc.)
|
||||
- Always wrap form controls (Input, Select, etc.) in `Form.Item`
|
||||
- Use `Form` for validation, error handling, and form state management
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Form, Input, Button } from 'antd';
|
||||
|
||||
const App = () => {
|
||||
const onFinish = (values) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form
|
||||
name="basic"
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label="Username"
|
||||
name="username"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Password"
|
||||
name="password"
|
||||
rules={[{ required: true, message: 'Please input your password!' }]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Form Hook
|
||||
|
||||
Use `Form.useForm()` to access form instance for programmatic control:
|
||||
|
||||
```typescript
|
||||
import { Form, Input, Button } from 'antd';
|
||||
|
||||
const App = () => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const onFinish = (values) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
|
||||
const onReset = () => {
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
const onFill = () => {
|
||||
form.setFieldsValue({
|
||||
username: 'hello',
|
||||
password: 'world',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} onFinish={onFinish}>
|
||||
<Form.Item name="username" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="password" rules={[{ required: true }]}>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">Submit</Button>
|
||||
<Button htmlType="button" onClick={onReset}>Reset</Button>
|
||||
<Button type="link" onClick={onFill}>Fill form</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
### Form Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `form` | Form instance from `Form.useForm()` | FormInstance | - |
|
||||
| `name` | Form name | string | - |
|
||||
| `layout` | Form layout | `'horizontal'` \| `'vertical'` \| `'inline'` | `'horizontal'` |
|
||||
| `labelCol` | Label column layout | ColProps | - |
|
||||
| `wrapperCol` | Wrapper column layout | ColProps | - |
|
||||
| `colon` | Show colon after label | boolean | true |
|
||||
| `requiredMark` | Required mark style | boolean \| `'optional'` | true |
|
||||
| `onFinish` | Submit handler | (values) => void | - |
|
||||
| `onFinishFailed` | Failed submit handler | (errorInfo) => void | - |
|
||||
| `onValuesChange` | Values change handler | (changedValues, allValues) => void | - |
|
||||
| `initialValues` | Initial form values | object | - |
|
||||
| `preserve` | Preserve field values when removed | boolean | true |
|
||||
| `validateMessages` | Custom validation messages | object | - |
|
||||
|
||||
### Form.Item Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `name` | Field name (required for form data) | string \| number \| (string \| number)[] | - |
|
||||
| `label` | Label text | ReactNode | - |
|
||||
| `rules` | Validation rules | Rule[] | - |
|
||||
| `required` | Required field | boolean | false |
|
||||
| `hasFeedback` | Show validation feedback icon | boolean | false |
|
||||
| `validateStatus` | Validation status | `'success'` \| `'warning'` \| `'error'` \| `'validating'` | - |
|
||||
| `help` | Help text | ReactNode | - |
|
||||
| `extra` | Extra information | ReactNode | - |
|
||||
| `tooltip` | Tooltip for label | ReactNode | - |
|
||||
| `dependencies` | Dependencies for field updates | NamePath[] | - |
|
||||
| `noStyle` | No style wrapper | boolean | false |
|
||||
| `shouldUpdate` | Should update when values change | boolean \| (prevValues, curValues) => boolean | false |
|
||||
|
||||
## Validation Rules
|
||||
|
||||
### Built-in Rules
|
||||
|
||||
```typescript
|
||||
<Form.Item
|
||||
name="email"
|
||||
rules={[
|
||||
{ required: true, message: 'Email is required' },
|
||||
{ type: 'email', message: 'Invalid email format' },
|
||||
{ min: 6, message: 'Minimum 6 characters' },
|
||||
{ max: 20, message: 'Maximum 20 characters' },
|
||||
{ pattern: /^[A-Z]/, message: 'Must start with uppercase' },
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
### Custom Validator
|
||||
|
||||
```typescript
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[
|
||||
{ required: true },
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (!value || value.length >= 8) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(new Error('Password must be at least 8 characters'));
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
### Async Validator
|
||||
|
||||
```typescript
|
||||
<Form.Item
|
||||
name="username"
|
||||
rules={[
|
||||
{ required: true },
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
const exists = await checkUsernameExists(value);
|
||||
if (exists) {
|
||||
return Promise.reject(new Error('Username already exists'));
|
||||
}
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
## Form Layouts
|
||||
|
||||
### Horizontal Layout (Default)
|
||||
|
||||
```typescript
|
||||
<Form layout="horizontal" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
|
||||
<Form.Item label="Username" name="username">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
```
|
||||
|
||||
### Vertical Layout
|
||||
|
||||
```typescript
|
||||
<Form layout="vertical">
|
||||
<Form.Item label="Username" name="username">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
```
|
||||
|
||||
### Inline Layout
|
||||
|
||||
```typescript
|
||||
<Form layout="inline">
|
||||
<Form.Item name="username">
|
||||
<Input placeholder="Username" />
|
||||
</Form.Item>
|
||||
<Form.Item name="password">
|
||||
<Input.Password placeholder="Password" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">Submit</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
```
|
||||
|
||||
## Dependent Fields
|
||||
|
||||
### Basic Dependency
|
||||
|
||||
```typescript
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="confirmPassword"
|
||||
dependencies={['password']}
|
||||
rules={[
|
||||
{ required: true },
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
if (!value || getFieldValue('password') === value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(new Error('Passwords do not match'));
|
||||
},
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
### Conditional Fields
|
||||
|
||||
```typescript
|
||||
<Form.Item name="type">
|
||||
<Select>
|
||||
<Select.Option value="email">Email</Select.Option>
|
||||
<Select.Option value="phone">Phone</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) =>
|
||||
prevValues.type !== currentValues.type
|
||||
}
|
||||
>
|
||||
{({ getFieldValue }) =>
|
||||
getFieldValue('type') === 'email' ? (
|
||||
<Form.Item name="email" rules={[{ type: 'email' }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<Form.Item name="phone" rules={[{ pattern: /^\d+$/ }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)
|
||||
}
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
## Form Methods
|
||||
|
||||
Access form methods via `Form.useForm()`:
|
||||
|
||||
```typescript
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// Get field value
|
||||
const username = form.getFieldValue('username');
|
||||
|
||||
// Get all values
|
||||
const values = form.getFieldsValue();
|
||||
|
||||
// Set field value
|
||||
form.setFieldsValue({ username: 'new value' });
|
||||
|
||||
// Set single field
|
||||
form.setFieldValue('username', 'new value');
|
||||
|
||||
// Reset fields
|
||||
form.resetFields();
|
||||
|
||||
// Reset specific field
|
||||
form.resetFields(['username']);
|
||||
|
||||
// Validate fields
|
||||
form.validateFields().then((values) => {
|
||||
console.log('Valid:', values);
|
||||
});
|
||||
|
||||
// Validate specific field
|
||||
form.validateFields(['username']);
|
||||
|
||||
// Get field error
|
||||
const error = form.getFieldError('username');
|
||||
|
||||
// Check if field is touched
|
||||
const touched = form.isFieldTouched('username');
|
||||
|
||||
// Check if field is dirty (changed)
|
||||
const dirty = form.isFieldsTouched(['username'], true);
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Always use Form.Item** - Wrap all form controls in `Form.Item` with `name` prop
|
||||
2. **Use validation rules** - Always provide validation rules for required fields
|
||||
3. **Provide helpful messages** - Use clear, actionable error messages
|
||||
4. **Use form instance** - Use `Form.useForm()` for programmatic control
|
||||
5. **Handle submit properly** - Use `htmlType="submit"` on submit button
|
||||
6. **Use appropriate layout** - Choose layout based on form complexity
|
||||
7. **Show feedback** - Use `hasFeedback` for visual validation feedback
|
||||
8. **Dependent fields** - Use `dependencies` and `shouldUpdate` for dependent fields
|
||||
9. **Initial values** - Use `initialValues` for default values, not `defaultValue` on controls
|
||||
10. **Preserve values** - Use `preserve={false}` if you want to clear removed fields
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Login Form
|
||||
|
||||
```typescript
|
||||
<Form onFinish={handleLogin}>
|
||||
<Form.Item
|
||||
name="username"
|
||||
rules={[{ required: true, message: 'Please input username!' }]}
|
||||
>
|
||||
<Input prefix={<UserOutlined />} placeholder="Username" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[{ required: true, message: 'Please input password!' }]}
|
||||
>
|
||||
<Input.Password prefix={<LockOutlined />} placeholder="Password" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" block>
|
||||
Login
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
```
|
||||
|
||||
### Form with Reset
|
||||
|
||||
```typescript
|
||||
const [form] = Form.useForm();
|
||||
|
||||
<Form form={form} onFinish={handleSubmit}>
|
||||
{/* Form fields */}
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">Submit</Button>
|
||||
<Button onClick={() => form.resetFields()}>Reset</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
```
|
||||
|
||||
### Dynamic Form Fields
|
||||
|
||||
```typescript
|
||||
<Form.List name="items">
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
{fields.map((field) => (
|
||||
<Space key={field.key}>
|
||||
<Form.Item {...field} name={[field.name, 'name']}>
|
||||
<Input placeholder="Item name" />
|
||||
</Form.Item>
|
||||
<Form.Item {...field} name={[field.name, 'value']}>
|
||||
<Input placeholder="Item value" />
|
||||
</Form.Item>
|
||||
<Button onClick={() => remove(field.name)}>Remove</Button>
|
||||
</Space>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button type="dashed" onClick={() => add()}>Add Item</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Forms are keyboard accessible by default
|
||||
- Labels are properly associated with inputs
|
||||
- Error messages are announced to screen readers
|
||||
- Required fields are clearly marked
|
||||
84
guidelines/components/grid.md
Normal file
84
guidelines/components/grid.md
Normal file
@@ -0,0 +1,84 @@
|
||||
# Grid Component
|
||||
|
||||
**Purpose**: 24-column grid system for responsive layouts.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Create responsive page layouts
|
||||
- Need column-based layout system
|
||||
- Build forms and data displays with consistent spacing
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
<Row>
|
||||
<Col span={12}>col-12</Col>
|
||||
<Col span={12}>col-12</Col>
|
||||
</Row>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
### Row Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `gutter` | Spacing between columns | number \| [number, number] | 0 |
|
||||
| `align` | Vertical alignment | `'top'` \| `'middle'` \| `'bottom'` | `'top'` |
|
||||
| `justify` | Horizontal alignment | `'start'` \| `'end'` \| `'center'` \| `'space-around'` \| `'space-between'` | `'start'` |
|
||||
| `wrap` | Auto wrap | boolean | true |
|
||||
|
||||
### Col Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ------------------ | ---------------- | ------- |
|
||||
| `span` | Column span (1-24) | number | - |
|
||||
| `offset` | Column offset | number | 0 |
|
||||
| `push` | Column push | number | 0 |
|
||||
| `pull` | Column pull | number | 0 |
|
||||
| `xs` | <576px breakpoint | number \| object | - |
|
||||
| `sm` | ≥576px breakpoint | number \| object | - |
|
||||
| `md` | ≥768px breakpoint | number \| object | - |
|
||||
| `lg` | ≥992px breakpoint | number \| object | - |
|
||||
| `xl` | ≥1200px breakpoint | number \| object | - |
|
||||
| `xxl` | ≥1600px breakpoint | number \| object | - |
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Grid
|
||||
|
||||
```typescript
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>col-8</Col>
|
||||
<Col span={8}>col-8</Col>
|
||||
<Col span={8}>col-8</Col>
|
||||
</Row>
|
||||
```
|
||||
|
||||
### Responsive Grid
|
||||
|
||||
```typescript
|
||||
<Row gutter={16}>
|
||||
<Col xs={24} sm={12} md={8} lg={6} xl={4}>
|
||||
Responsive column
|
||||
</Col>
|
||||
</Row>
|
||||
```
|
||||
|
||||
### Gutter
|
||||
|
||||
```typescript
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={12}>Column 1</Col>
|
||||
<Col span={12}>Column 2</Col>
|
||||
</Row>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Total 24 columns** - Sum of spans should equal 24
|
||||
2. **Use gutter** - Always set gutter for spacing between columns
|
||||
3. **Responsive design** - Use breakpoint props for responsive layouts
|
||||
4. **Nested grids** - Can nest Row/Col for complex layouts
|
||||
36
guidelines/components/image.md
Normal file
36
guidelines/components/image.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# Image Component
|
||||
|
||||
**Purpose**: Image display with preview functionality.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Display images with preview
|
||||
- Image galleries
|
||||
- Images that need zoom/preview
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Image } from 'antd';
|
||||
|
||||
<Image
|
||||
width={200}
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --------- | -------------- | ----------------- | ------- |
|
||||
| `src` | Image source | string | - |
|
||||
| `width` | Image width | number | - |
|
||||
| `height` | Image height | number | - |
|
||||
| `preview` | Enable preview | boolean \| object | true |
|
||||
| `alt` | Alt text | string | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Alt text** - Always provide alt text for accessibility
|
||||
2. **Preview** - Enable preview for detailed images
|
||||
3. **Appropriate sizing** - Set appropriate width/height
|
||||
36
guidelines/components/input-number.md
Normal file
36
guidelines/components/input-number.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# InputNumber Component
|
||||
|
||||
**Purpose**: Number input field with increment/decrement controls.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Input numeric values
|
||||
- Need increment/decrement controls
|
||||
- Form inputs for numbers
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { InputNumber } from 'antd';
|
||||
|
||||
<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------------- | ----------------- | ------------------------------- | ------- |
|
||||
| `value` | Current value | number | - |
|
||||
| `defaultValue` | Default value | number | - |
|
||||
| `min` | Minimum value | number | - |
|
||||
| `max` | Maximum value | number | - |
|
||||
| `step` | Step value | number \| string | 1 |
|
||||
| `precision` | Decimal precision | number | - |
|
||||
| `disabled` | Disabled state | boolean | false |
|
||||
| `onChange` | Change handler | (value: number \| null) => void | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Always use within Form.Item
|
||||
2. **Set min/max** - Set appropriate min and max values
|
||||
3. **Precision** - Set precision for decimal numbers
|
||||
252
guidelines/components/input.md
Normal file
252
guidelines/components/input.md
Normal file
@@ -0,0 +1,252 @@
|
||||
# Input Component
|
||||
|
||||
**Purpose**: Text input field for single-line text entry.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Use `Input` for single-line text input
|
||||
- Use `Input.Password` for password fields
|
||||
- Use `Input.Search` for search inputs with search button
|
||||
- Use `Input.TextArea` for multiline text input (or use `TextArea` component)
|
||||
- Use `Input.Group` for input groups with addons
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Input } from 'antd';
|
||||
|
||||
// Basic input
|
||||
<Input placeholder="Enter text" />
|
||||
|
||||
// Controlled input
|
||||
const [value, setValue] = useState('');
|
||||
<Input value={value} onChange={(e) => setValue(e.target.value)} />
|
||||
|
||||
// Uncontrolled input
|
||||
<Input defaultValue="Initial value" />
|
||||
```
|
||||
|
||||
## Input Variants
|
||||
|
||||
### Password Input
|
||||
|
||||
```typescript
|
||||
import { Input } from 'antd';
|
||||
|
||||
<Input.Password placeholder="Enter password" />
|
||||
```
|
||||
|
||||
### Search Input
|
||||
|
||||
```typescript
|
||||
<Input.Search
|
||||
placeholder="Search"
|
||||
onSearch={(value) => console.log(value)}
|
||||
enterButton
|
||||
/>
|
||||
```
|
||||
|
||||
### TextArea
|
||||
|
||||
```typescript
|
||||
<Input.TextArea
|
||||
rows={4}
|
||||
placeholder="Enter multiline text"
|
||||
/>
|
||||
```
|
||||
|
||||
Or use the dedicated `TextArea` component:
|
||||
|
||||
```typescript
|
||||
import { Input } from 'antd';
|
||||
const { TextArea } = Input;
|
||||
|
||||
<TextArea rows={4} placeholder="Enter text" />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `value` | Input value (controlled) | string | - |
|
||||
| `defaultValue` | Default value (uncontrolled) | string | - |
|
||||
| `placeholder` | Placeholder text | string | - |
|
||||
| `size` | Input size | `'small'` \| `'middle'` \| `'large'` | `'middle'` |
|
||||
| `prefix` | Prefix icon or element | ReactNode | - |
|
||||
| `suffix` | Suffix icon or element | ReactNode | - |
|
||||
| `addonBefore` | Addon before input | ReactNode | - |
|
||||
| `addonAfter` | Addon after input | ReactNode | - |
|
||||
| `allowClear` | Show clear button | boolean | false |
|
||||
| `disabled` | Disabled state | boolean | false |
|
||||
| `readOnly` | Read-only state | boolean | false |
|
||||
| `maxLength` | Maximum length | number | - |
|
||||
| `showCount` | Show character count | boolean | false |
|
||||
| `onChange` | Change handler | (e: ChangeEvent) => void | - |
|
||||
| `onPressEnter` | Enter key handler | (e: KeyboardEvent) => void | - |
|
||||
|
||||
## Examples
|
||||
|
||||
### With Icons
|
||||
|
||||
```typescript
|
||||
import { Input } from 'antd';
|
||||
import { UserOutlined, LockOutlined, SearchOutlined } from '@ant-design/icons';
|
||||
|
||||
<Input prefix={<UserOutlined />} placeholder="Username" />
|
||||
<Input.Password prefix={<LockOutlined />} placeholder="Password" />
|
||||
<Input suffix={<SearchOutlined />} placeholder="Search" />
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
```typescript
|
||||
<Input size="small" placeholder="Small" />
|
||||
<Input size="middle" placeholder="Middle" />
|
||||
<Input size="large" placeholder="Large" />
|
||||
```
|
||||
|
||||
### With Addons
|
||||
|
||||
```typescript
|
||||
<Input.Group compact>
|
||||
<Input style={{ width: '20%' }} defaultValue="0571" />
|
||||
<Input style={{ width: '30%' }} defaultValue="26888888" />
|
||||
</Input.Group>
|
||||
|
||||
<Input
|
||||
addonBefore="https://"
|
||||
addonAfter=".com"
|
||||
defaultValue="mysite"
|
||||
/>
|
||||
```
|
||||
|
||||
### Clearable Input
|
||||
|
||||
```typescript
|
||||
<Input allowClear placeholder="Clearable input" />
|
||||
```
|
||||
|
||||
### With Character Count
|
||||
|
||||
```typescript
|
||||
<Input showCount maxLength={20} placeholder="Max 20 characters" />
|
||||
<Input.TextArea showCount maxLength={100} rows={4} />
|
||||
```
|
||||
|
||||
### Disabled and ReadOnly
|
||||
|
||||
```typescript
|
||||
<Input disabled value="Disabled input" />
|
||||
<Input readOnly value="Read-only input" />
|
||||
```
|
||||
|
||||
## Form Integration
|
||||
|
||||
Always use `Input` within `Form.Item` for proper validation and form handling:
|
||||
|
||||
```typescript
|
||||
import { Form, Input } from 'antd';
|
||||
|
||||
<Form onFinish={handleSubmit}>
|
||||
<Form.Item
|
||||
name="username"
|
||||
rules={[{ required: true, message: 'Please input username!' }]}
|
||||
>
|
||||
<Input prefix={<UserOutlined />} placeholder="Username" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[{ required: true, message: 'Please input password!' }]}
|
||||
>
|
||||
<Input.Password prefix={<LockOutlined />} placeholder="Password" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
```
|
||||
|
||||
## Status States
|
||||
|
||||
Inputs can have different status states when used in Forms:
|
||||
|
||||
```typescript
|
||||
<Form.Item
|
||||
name="email"
|
||||
validateStatus="error"
|
||||
help="Please enter a valid email"
|
||||
>
|
||||
<Input placeholder="Email" />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
Status values: `'error'`, `'warning'`, `'success'`, `'validating'`
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Always use in Forms** - Wrap inputs in `Form.Item` for proper validation
|
||||
2. **Use appropriate input type** - Use `Input.Password` for passwords, `Input.Search` for search
|
||||
3. **Provide placeholders** - Always include helpful placeholder text
|
||||
4. **Show validation feedback** - Use Form validation for user feedback
|
||||
5. **Use icons appropriately** - Prefix icons for context (user, lock, etc.)
|
||||
6. **Character limits** - Use `maxLength` and `showCount` for text limits
|
||||
7. **Clearable inputs** - Use `allowClear` for inputs where users might want to clear
|
||||
8. **Accessible labels** - Always provide labels (via Form.Item or aria-label)
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Search Input
|
||||
|
||||
```typescript
|
||||
<Input.Search
|
||||
placeholder="Search..."
|
||||
onSearch={(value) => handleSearch(value)}
|
||||
enterButton
|
||||
allowClear
|
||||
/>
|
||||
```
|
||||
|
||||
### Password with Strength Indicator
|
||||
|
||||
```typescript
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[
|
||||
{ required: true },
|
||||
{ min: 8, message: 'Password must be at least 8 characters' },
|
||||
]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined />}
|
||||
placeholder="Password"
|
||||
/>
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
### Input with Validation
|
||||
|
||||
```typescript
|
||||
<Form.Item
|
||||
name="email"
|
||||
rules={[
|
||||
{ required: true, message: 'Email is required' },
|
||||
{ type: 'email', message: 'Invalid email format' },
|
||||
]}
|
||||
>
|
||||
<Input prefix={<MailOutlined />} placeholder="Email" />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Inputs are keyboard accessible by default
|
||||
- Use `Form.Item` with `label` for proper labeling
|
||||
- Use `aria-label` for icon-only inputs
|
||||
- Ensure sufficient color contrast for validation states
|
||||
|
||||
## Styling
|
||||
|
||||
**IMPORTANT**: Do not override input styles with `className` unless absolutely necessary. Instead:
|
||||
|
||||
- Use `size` prop for sizing
|
||||
- Use `prefix`/`suffix` for icons
|
||||
- Use `ConfigProvider` theme customization for global changes
|
||||
- Use design tokens for custom styling
|
||||
121
guidelines/components/layout.md
Normal file
121
guidelines/components/layout.md
Normal file
@@ -0,0 +1,121 @@
|
||||
# Layout Component
|
||||
|
||||
**Purpose**: Handling the overall layout of a page. Provides Header, Sider, Content, and Footer components for building page structures.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Build page layouts with header, sidebar, content, and footer
|
||||
- Create top navigation layouts
|
||||
- Create side navigation layouts
|
||||
- Need responsive layout structures
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Layout } from 'antd';
|
||||
|
||||
const { Header, Sider, Content, Footer } = Layout;
|
||||
|
||||
<Layout>
|
||||
<Header>Header</Header>
|
||||
<Layout>
|
||||
<Sider>Sider</Sider>
|
||||
<Content>Content</Content>
|
||||
</Layout>
|
||||
<Footer>Footer</Footer>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
## Component Structure
|
||||
|
||||
- **`Layout`**: The layout wrapper, can nest Header, Sider, Content, Footer, or Layout itself
|
||||
- **`Header`**: Top layout with default style
|
||||
- **`Sider`**: Sidebar with default style and basic functions
|
||||
- **`Content`**: Content layout with default style
|
||||
- **`Footer`**: Bottom layout with default style
|
||||
|
||||
## Common Props
|
||||
|
||||
### Layout Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------- | ----------------- | ------- | ------- |
|
||||
| `hasSider` | Whether has sider | boolean | false |
|
||||
|
||||
### Sider Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ------------------ | ----------------------- | ------------------------- | --------- |
|
||||
| `collapsed` | Whether to collapse | boolean | false |
|
||||
| `collapsedWidth` | Width when collapsed | number | 80 |
|
||||
| `defaultCollapsed` | Default collapsed state | boolean | false |
|
||||
| `reverseArrow` | Reverse arrow direction | boolean | false |
|
||||
| `trigger` | Custom trigger | ReactNode | - |
|
||||
| `width` | Width of sidebar | number \| string | 200 |
|
||||
| `theme` | Theme | `'light'` \| `'dark'` | `'light'` |
|
||||
| `onCollapse` | Collapse callback | (collapsed, type) => void | - |
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Layout
|
||||
|
||||
```typescript
|
||||
<Layout>
|
||||
<Header style={{ background: '#fff', padding: 0 }}>Header</Header>
|
||||
<Layout>
|
||||
<Sider width={200} theme="light">Sider</Sider>
|
||||
<Content style={{ padding: '24px', minHeight: 280 }}>Content</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
### Top Navigation
|
||||
|
||||
```typescript
|
||||
<Layout>
|
||||
<Header>Top Navigation</Header>
|
||||
<Content>Main Content</Content>
|
||||
<Footer>Footer</Footer>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
### Collapsible Sider
|
||||
|
||||
```typescript
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
<Layout>
|
||||
<Sider
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
onCollapse={setCollapsed}
|
||||
>
|
||||
Sidebar
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Content>Content</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
### Fixed Header
|
||||
|
||||
```typescript
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
|
||||
Fixed Header
|
||||
</Header>
|
||||
<Layout style={{ marginTop: 64 }}>
|
||||
<Content>Content</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use Layout wrapper** - Always wrap layout components in Layout
|
||||
2. **Proper nesting** - Header, Sider, Content, Footer must be inside Layout
|
||||
3. **Responsive design** - Use responsive breakpoints for mobile layouts
|
||||
4. **Fixed elements** - Use fixed positioning for headers/siders when needed
|
||||
5. **Theme consistency** - Use consistent theme (light/dark) across layout
|
||||
6. **Accessible navigation** - Ensure keyboard navigation works for collapsible siders
|
||||
35
guidelines/components/list.md
Normal file
35
guidelines/components/list.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# List Component
|
||||
|
||||
**Purpose**: List display for structured data.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Display list of items
|
||||
- Show structured data
|
||||
- Simple list displays (use Table for complex data)
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { List } from 'antd';
|
||||
|
||||
<List
|
||||
dataSource={data}
|
||||
renderItem={(item) => <List.Item>{item}</List.Item>}
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ------------ | ----------------- | -------------------------- | ------- |
|
||||
| `dataSource` | Data source | any[] | - |
|
||||
| `renderItem` | Render function | (item, index) => ReactNode | - |
|
||||
| `loading` | Loading state | boolean | false |
|
||||
| `pagination` | Pagination config | boolean \| object | false |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Simple data** - Use List for simple data, Table for complex
|
||||
2. **Custom render** - Use renderItem for custom item rendering
|
||||
3. **Loading states** - Show loading during data fetch
|
||||
77
guidelines/components/menu.md
Normal file
77
guidelines/components/menu.md
Normal file
@@ -0,0 +1,77 @@
|
||||
# Menu Component
|
||||
|
||||
**Purpose**: A versatile menu for navigation. Supports top and side navigation.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Top navigation for website categories and functions
|
||||
- Side navigation for multi-level structure
|
||||
- Navigation menus with submenus
|
||||
- Context menus
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Menu } from 'antd';
|
||||
|
||||
const items = [
|
||||
{ key: '1', label: 'Navigation One' },
|
||||
{ key: '2', label: 'Navigation Two' },
|
||||
{
|
||||
key: '3',
|
||||
label: 'Navigation Three',
|
||||
children: [
|
||||
{ key: '3-1', label: 'Option 1' },
|
||||
{ key: '3-2', label: 'Option 2' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
<Menu items={items} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `items` | Menu items | MenuItem[] | - |
|
||||
| `mode` | Menu mode | `'vertical'` \| `'horizontal'` \| `'inline'` | `'vertical'` |
|
||||
| `theme` | Menu theme | `'light'` \| `'dark'` | `'light'` |
|
||||
| `selectedKeys` | Selected menu items | string[] | - |
|
||||
| `defaultSelectedKeys` | Default selected items | string[] | - |
|
||||
| `openKeys` | Open submenu keys | string[] | - |
|
||||
| `defaultOpenKeys` | Default open submenus | string[] | - |
|
||||
| `onClick` | Click handler | ({ key, keyPath }) => void | - |
|
||||
| `onSelect` | Select handler | ({ key, keyPath }) => void | - |
|
||||
|
||||
## Examples
|
||||
|
||||
### Horizontal Menu
|
||||
|
||||
```typescript
|
||||
<Menu mode="horizontal" items={items} />
|
||||
```
|
||||
|
||||
### Vertical Menu
|
||||
|
||||
```typescript
|
||||
<Menu mode="vertical" items={items} />
|
||||
```
|
||||
|
||||
### With Icons
|
||||
|
||||
```typescript
|
||||
import { AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
|
||||
const items = [
|
||||
{ key: '1', icon: <AppstoreOutlined />, label: 'Nav 1' },
|
||||
{ key: '2', icon: <SettingOutlined />, label: 'Nav 2' },
|
||||
];
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use items prop** - Prefer `items` prop for menu configuration
|
||||
2. **Unique keys** - Ensure all menu items have unique keys
|
||||
3. **Theme consistency** - Use consistent theme with layout
|
||||
4. **Accessible navigation** - Ensure keyboard navigation works
|
||||
35
guidelines/components/message.md
Normal file
35
guidelines/components/message.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# Message Component
|
||||
|
||||
**Purpose**: Global message feedback for operations. Non-blocking notifications.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show operation feedback
|
||||
- Display success, error, warning, or info messages
|
||||
- Non-blocking notifications
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { message } from 'antd';
|
||||
|
||||
message.success('Success message');
|
||||
message.error('Error message');
|
||||
message.warning('Warning message');
|
||||
message.info('Info message');
|
||||
```
|
||||
|
||||
## API Methods
|
||||
|
||||
- `message.success(content, duration, onClose)`
|
||||
- `message.error(content, duration, onClose)`
|
||||
- `message.warning(content, duration, onClose)`
|
||||
- `message.info(content, duration, onClose)`
|
||||
- `message.loading(content, duration, onClose)`
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Short messages** - Keep messages concise
|
||||
2. **Appropriate type** - Use correct type for message severity
|
||||
3. **Auto dismiss** - Messages auto-dismiss after duration
|
||||
4. **Stack messages** - Multiple messages stack vertically
|
||||
53
guidelines/components/modal.md
Normal file
53
guidelines/components/modal.md
Normal file
@@ -0,0 +1,53 @@
|
||||
# Modal Component
|
||||
|
||||
**Purpose**: Modal dialog for important confirmations, forms, or information display.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Important confirmations
|
||||
- Forms that need focus
|
||||
- Display detailed information
|
||||
- User interactions that require attention
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Modal } from 'antd';
|
||||
|
||||
Modal.confirm({
|
||||
title: 'Confirm',
|
||||
content: 'Some descriptions',
|
||||
onOk() {
|
||||
console.log('OK');
|
||||
},
|
||||
});
|
||||
|
||||
// Or as component
|
||||
<Modal
|
||||
title="Modal Title"
|
||||
open={isOpen}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<p>Modal content</p>
|
||||
</Modal>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------- | ----------------- | ---------------- | ------- |
|
||||
| `open` | Visible state | boolean | false |
|
||||
| `title` | Modal title | ReactNode | - |
|
||||
| `footer` | Modal footer | ReactNode | null |
|
||||
| `onOk` | OK button handler | () => void | - |
|
||||
| `onCancel` | Cancel handler | () => void | - |
|
||||
| `width` | Modal width | number \| string | 520 |
|
||||
| `centered` | Center modal | boolean | false |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use for important actions** - Use modals for important confirmations
|
||||
2. **Clear actions** - Provide clear OK/Cancel actions
|
||||
3. **Form modals** - Use Modal with Form for form dialogs
|
||||
4. **Accessible** - Ensure keyboard navigation and focus management
|
||||
35
guidelines/components/notification.md
Normal file
35
guidelines/components/notification.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# Notification Component
|
||||
|
||||
**Purpose**: Notification box that appears in the corner of the page. More detailed than Message.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show detailed notifications
|
||||
- Display notifications with descriptions
|
||||
- Show notifications that need more information than Message
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { notification } from 'antd';
|
||||
|
||||
notification.open({
|
||||
message: 'Notification Title',
|
||||
description: 'This is the content of the notification.',
|
||||
});
|
||||
```
|
||||
|
||||
## API Methods
|
||||
|
||||
- `notification.success(config)`
|
||||
- `notification.error(config)`
|
||||
- `notification.warning(config)`
|
||||
- `notification.info(config)`
|
||||
- `notification.open(config)`
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Detailed content** - Use for notifications with descriptions
|
||||
2. **Placement** - Choose appropriate placement (topRight, topLeft, etc.)
|
||||
3. **Duration** - Set appropriate duration for message importance
|
||||
4. **Actions** - Add action buttons when needed
|
||||
37
guidelines/components/pagination.md
Normal file
37
guidelines/components/pagination.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# Pagination Component
|
||||
|
||||
**Purpose**: Pagination controls for navigating through pages of data.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Navigate through paginated data
|
||||
- Show page numbers and navigation controls
|
||||
- Display total count and page information
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Pagination } from 'antd';
|
||||
|
||||
<Pagination
|
||||
current={current}
|
||||
total={500}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------------- | ----------------------- | ------------------------ | ------- |
|
||||
| `current` | Current page | number | - |
|
||||
| `total` | Total number of items | number | 0 |
|
||||
| `pageSize` | Items per page | number | 10 |
|
||||
| `showSizeChanger` | Show page size selector | boolean | false |
|
||||
| `onChange` | Page change handler | (page, pageSize) => void | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Server-side pagination** - Use for large datasets with server-side pagination
|
||||
2. **Show totals** - Display total count when helpful
|
||||
3. **Page size options** - Allow users to change page size for better UX
|
||||
41
guidelines/components/popconfirm.md
Normal file
41
guidelines/components/popconfirm.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# Popconfirm Component
|
||||
|
||||
**Purpose**: Popup confirmation dialog before an action.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Confirm before destructive actions
|
||||
- Ask for confirmation before operations
|
||||
- Delete, remove, or critical actions
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Popconfirm } from 'antd';
|
||||
|
||||
<Popconfirm
|
||||
title="Delete the task"
|
||||
description="Are you sure to delete this task?"
|
||||
onConfirm={handleConfirm}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<Button danger>Delete</Button>
|
||||
</Popconfirm>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ------------- | ------------------------ | ----------- | ---------- |
|
||||
| `title` | Confirmation title | ReactNode | - |
|
||||
| `description` | Confirmation description | ReactNode | - |
|
||||
| `onConfirm` | Confirm handler | (e) => void | - |
|
||||
| `onCancel` | Cancel handler | (e) => void | - |
|
||||
| `okText` | OK button text | string | `'OK'` |
|
||||
| `cancelText` | Cancel button text | string | `'Cancel'` |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Destructive actions** - Use for delete, remove, or critical actions
|
||||
2. **Clear messages** - Provide clear confirmation messages
|
||||
3. **Appropriate placement** - Choose placement that doesn't obstruct
|
||||
34
guidelines/components/popover.md
Normal file
34
guidelines/components/popover.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Popover Component
|
||||
|
||||
**Purpose**: Popup container for more complex content than Tooltip.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show complex content on hover/click
|
||||
- Display forms or actions in popup
|
||||
- More detailed information than Tooltip
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Popover } from 'antd';
|
||||
|
||||
<Popover content={content} title="Title">
|
||||
<Button>Hover me</Button>
|
||||
</Popover>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | ----------------- | ----------------------------------- | --------- |
|
||||
| `content` | Popover content | ReactNode | - |
|
||||
| `title` | Popover title | ReactNode | - |
|
||||
| `trigger` | Trigger action | `'hover'` \| `'focus'` \| `'click'` | `'hover'` |
|
||||
| `placement` | Popover placement | string | `'top'` |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Complex content** - Use for content more complex than Tooltip
|
||||
2. **Interactive content** - Use for interactive content (forms, buttons)
|
||||
3. **Appropriate trigger** - Choose trigger based on interaction needs
|
||||
34
guidelines/components/progress.md
Normal file
34
guidelines/components/progress.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Progress Component
|
||||
|
||||
**Purpose**: Progress indicator to show the completion percentage of an operation.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show operation progress
|
||||
- Display completion percentage
|
||||
- Loading progress indicators
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Progress } from 'antd';
|
||||
|
||||
<Progress percent={30} />
|
||||
<Progress percent={50} status="active" />
|
||||
<Progress percent={100} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `percent` | Progress percentage | number | 0 |
|
||||
| `status` | Progress status | `'success'` \| `'exception'` \| `'active'` \| `'normal'` | `'normal'` |
|
||||
| `type` | Progress type | `'line'` \| `'circle'` \| `'dashboard'` | `'line'` |
|
||||
| `showInfo` | Show percentage | boolean | true |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Clear progress** - Show meaningful progress percentages
|
||||
2. **Status indication** - Use status for success/error states
|
||||
3. **Appropriate type** - Choose type based on space and context
|
||||
32
guidelines/components/qrcode.md
Normal file
32
guidelines/components/qrcode.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# QRCode Component
|
||||
|
||||
**Purpose**: QR code display component.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Display QR codes
|
||||
- Share links or information
|
||||
- Mobile scanning
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { QRCode } from 'antd';
|
||||
|
||||
<QRCode value="https://ant.design/" />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ------------ | ---------------------- | -------------------------------- | ------- |
|
||||
| `value` | QR code value | string | - |
|
||||
| `size` | QR code size | number | 160 |
|
||||
| `errorLevel` | Error correction level | `'L'` \| `'M'` \| `'Q'` \| `'H'` | `'M'` |
|
||||
| `icon` | Icon in center | string | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Clear value** - Provide valid QR code value
|
||||
2. **Appropriate size** - Set size based on display context
|
||||
3. **Error level** - Use higher error level for important codes
|
||||
35
guidelines/components/radio.md
Normal file
35
guidelines/components/radio.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# Radio Component
|
||||
|
||||
**Purpose**: Radio button for selecting a single option from a group.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Select a single option from multiple choices
|
||||
- Use Radio.Group for related options
|
||||
- Form inputs for single selection
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Radio } from 'antd';
|
||||
|
||||
<Radio.Group onChange={handleChange} value={value}>
|
||||
<Radio value={1}>Option 1</Radio>
|
||||
<Radio value={2}>Option 2</Radio>
|
||||
</Radio.Group>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------------- | -------------- | ----------- | ------- |
|
||||
| `value` | Selected value | any | - |
|
||||
| `defaultValue` | Default value | any | - |
|
||||
| `disabled` | Disabled state | boolean | false |
|
||||
| `onChange` | Change handler | (e) => void | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Always use within Form.Item
|
||||
2. **Group for options** - Use Radio.Group for related options
|
||||
3. **Few options** - Use Radio for 2-4 options, Select for more
|
||||
35
guidelines/components/rate.md
Normal file
35
guidelines/components/rate.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# Rate Component
|
||||
|
||||
**Purpose**: Rating component for displaying or selecting ratings.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Display ratings
|
||||
- Allow users to rate
|
||||
- Star ratings
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Rate } from 'antd';
|
||||
|
||||
<Rate defaultValue={3} />
|
||||
<Rate disabled defaultValue={2} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------------- | --------------- | ----------------------- | ------- |
|
||||
| `value` | Current value | number | - |
|
||||
| `defaultValue` | Default value | number | - |
|
||||
| `count` | Star count | number | 5 |
|
||||
| `allowHalf` | Allow half star | boolean | false |
|
||||
| `disabled` | Disabled state | boolean | false |
|
||||
| `onChange` | Change handler | (value: number) => void | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Always use within Form.Item
|
||||
2. **Clear labels** - Provide context for ratings
|
||||
3. **Half stars** - Use allowHalf for finer ratings
|
||||
41
guidelines/components/result.md
Normal file
41
guidelines/components/result.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# Result Component
|
||||
|
||||
**Purpose**: Result page for displaying operation results.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show operation results (success, error, etc.)
|
||||
- Display final states after operations
|
||||
- Result pages for forms or processes
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Result } from 'antd';
|
||||
|
||||
<Result
|
||||
status="success"
|
||||
title="Successfully Purchased Cloud Server ECS!"
|
||||
subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
|
||||
extra={[
|
||||
<Button type="primary" key="console">Go Console</Button>,
|
||||
<Button key="buy">Buy Again</Button>,
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `status` | Result status | `'success'` \| `'error'` \| `'info'` \| `'warning'` \| `'403'` \| `'404'` \| `'500'` | `'info'` |
|
||||
| `title` | Result title | ReactNode | - |
|
||||
| `subTitle` | Result subtitle | ReactNode | - |
|
||||
| `extra` | Extra actions | ReactNode | - |
|
||||
| `icon` | Custom icon | ReactNode | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Clear status** - Use appropriate status for result type
|
||||
2. **Actionable** - Provide next steps in extra prop
|
||||
3. **Helpful messages** - Provide clear, helpful messages
|
||||
100
guidelines/components/select.md
Normal file
100
guidelines/components/select.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# Select Component
|
||||
|
||||
**Purpose**: A dropdown menu for displaying choices. An elegant alternative to the native `<select>` element.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Display choices in a dropdown menu
|
||||
- Use when there are 4-20 predefined options
|
||||
- For single or multiple selection
|
||||
- When you need searchable options
|
||||
|
||||
**Note**: Use `Radio` for fewer options (less than 5). Use `AutoComplete` if you need an input that can be typed or selected.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Select } from 'antd';
|
||||
|
||||
// Recommended usage (5.11.0+)
|
||||
<Select
|
||||
options={[
|
||||
{ value: '1', label: 'Option 1' },
|
||||
{ value: '2', label: 'Option 2' },
|
||||
]}
|
||||
/>
|
||||
|
||||
// Legacy usage (deprecated)
|
||||
<Select>
|
||||
<Select.Option value="1">Option 1</Select.Option>
|
||||
<Select.Option value="2">Option 2</Select.Option>
|
||||
</Select>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `options` | Select options (recommended) | { label, value }[] | - |
|
||||
| `value` | Selected value | string \| string[] \| number | - |
|
||||
| `defaultValue` | Default selected value | string \| string[] | - |
|
||||
| `mode` | Set mode | `'multiple'` \| `'tags'` | - |
|
||||
| `size` | Size | `'small'` \| `'middle'` \| `'large'` | `'middle'` |
|
||||
| `placeholder` | Placeholder | ReactNode | - |
|
||||
| `showSearch` | Whether select is searchable | boolean | single: false, multiple: true |
|
||||
| `allowClear` | Show clear button | boolean | false |
|
||||
| `disabled` | Disabled state | boolean | false |
|
||||
| `loading` | Loading state | boolean | false |
|
||||
| `onChange` | Change handler | (value, option) => void | - |
|
||||
| `onSearch` | Search handler | (value: string) => void | - |
|
||||
|
||||
## Examples
|
||||
|
||||
### Multiple Selection
|
||||
|
||||
```typescript
|
||||
<Select
|
||||
mode="multiple"
|
||||
placeholder="Select items"
|
||||
options={options}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
```
|
||||
|
||||
### With Search
|
||||
|
||||
```typescript
|
||||
<Select
|
||||
showSearch
|
||||
placeholder="Search and select"
|
||||
optionFilterProp="label"
|
||||
options={options}
|
||||
/>
|
||||
```
|
||||
|
||||
### With Loading
|
||||
|
||||
```typescript
|
||||
<Select
|
||||
loading={loading}
|
||||
options={options}
|
||||
/>
|
||||
```
|
||||
|
||||
### Tags Mode
|
||||
|
||||
```typescript
|
||||
<Select
|
||||
mode="tags"
|
||||
placeholder="Add tags"
|
||||
tokenSeparators={[',']}
|
||||
/>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use options prop** - Prefer `options` prop over children (better performance)
|
||||
2. **Search for many options** - Enable `showSearch` when you have many options
|
||||
3. **Multiple selection** - Use `mode="multiple"` for multiple selections
|
||||
4. **Form integration** - Always use within `Form.Item` for form handling
|
||||
5. **Loading states** - Show loading state during async data fetching
|
||||
34
guidelines/components/skeleton.md
Normal file
34
guidelines/components/skeleton.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Skeleton Component
|
||||
|
||||
**Purpose**: Loading skeleton placeholder for content.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show loading placeholders
|
||||
- Better UX than spinners for content loading
|
||||
- Indicate content structure while loading
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Skeleton } from 'antd';
|
||||
|
||||
<Skeleton />
|
||||
<Skeleton active />
|
||||
<Skeleton avatar paragraph={{ rows: 4 }} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | ----------------------- | --------------------------------- | ------- |
|
||||
| `active` | Show animation | boolean | false |
|
||||
| `avatar` | Show avatar placeholder | boolean \| SkeletonAvatarProps | false |
|
||||
| `paragraph` | Paragraph placeholder | boolean \| SkeletonParagraphProps | true |
|
||||
| `title` | Show title placeholder | boolean \| SkeletonTitleProps | true |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Match content** - Match skeleton structure to actual content
|
||||
2. **Active animation** - Use active for better visual feedback
|
||||
3. **Appropriate rows** - Set appropriate paragraph rows
|
||||
36
guidelines/components/slider.md
Normal file
36
guidelines/components/slider.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# Slider Component
|
||||
|
||||
**Purpose**: Range slider for selecting numeric values.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Select numeric values in a range
|
||||
- Range selection
|
||||
- Volume, price range selection
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Slider } from 'antd';
|
||||
|
||||
<Slider defaultValue={30} />
|
||||
<Slider range defaultValue={[20, 50]} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------------- | -------------- | -------------------------- | ------- |
|
||||
| `value` | Current value | number \| [number, number] | - |
|
||||
| `defaultValue` | Default value | number \| [number, number] | - |
|
||||
| `min` | Minimum value | number | 0 |
|
||||
| `max` | Maximum value | number | 100 |
|
||||
| `step` | Step value | number \| null | 1 |
|
||||
| `range` | Range mode | boolean | false |
|
||||
| `onChange` | Change handler | (value) => void | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Always use within Form.Item
|
||||
2. **Clear range** - Set appropriate min/max values
|
||||
3. **Step values** - Set step for discrete values
|
||||
89
guidelines/components/space.md
Normal file
89
guidelines/components/space.md
Normal file
@@ -0,0 +1,89 @@
|
||||
# Space Component
|
||||
|
||||
**Purpose**: Set components spacing. Provides consistent spacing between inline elements.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Avoid components clinging together and set unified space
|
||||
- Need equidistant arrangement of multiple child elements
|
||||
- Use Space.Compact for form components with collapsed borders
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Space } from 'antd';
|
||||
|
||||
<Space>
|
||||
<Button>Button 1</Button>
|
||||
<Button>Button 2</Button>
|
||||
<Button>Button 3</Button>
|
||||
</Space>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `direction` | Space direction | `'vertical'` \| `'horizontal'` | `'horizontal'` |
|
||||
| `size` | Space size | `'small'` \| `'middle'` \| `'large'` \| number \| [number, number] | `'small'` |
|
||||
| `align` | Align items | `'start'` \| `'end'` \| `'center'` \| `'baseline'` | - |
|
||||
| `wrap` | Auto wrap line | boolean | false |
|
||||
| `split` | Set split element | ReactNode | - |
|
||||
|
||||
## Examples
|
||||
|
||||
### Vertical Space
|
||||
|
||||
```typescript
|
||||
<Space direction="vertical" size="middle">
|
||||
<Button>Button 1</Button>
|
||||
<Button>Button 2</Button>
|
||||
<Button>Button 3</Button>
|
||||
</Space>
|
||||
```
|
||||
|
||||
### Different Sizes
|
||||
|
||||
```typescript
|
||||
<Space size="small">
|
||||
<Button>Small</Button>
|
||||
<Button>Small</Button>
|
||||
</Space>
|
||||
|
||||
<Space size="middle">
|
||||
<Button>Middle</Button>
|
||||
<Button>Middle</Button>
|
||||
</Space>
|
||||
|
||||
<Space size="large">
|
||||
<Button>Large</Button>
|
||||
<Button>Large</Button>
|
||||
</Space>
|
||||
```
|
||||
|
||||
### With Split
|
||||
|
||||
```typescript
|
||||
<Space split={<Divider type="vertical" />}>
|
||||
<Link>Link 1</Link>
|
||||
<Link>Link 2</Link>
|
||||
<Link>Link 3</Link>
|
||||
</Space>
|
||||
```
|
||||
|
||||
### Compact Mode
|
||||
|
||||
```typescript
|
||||
<Space.Compact>
|
||||
<Input placeholder="Input" />
|
||||
<Button type="primary">Submit</Button>
|
||||
</Space.Compact>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use for inline spacing** - Use Space for spacing between inline elements
|
||||
2. **Prefer over manual margins** - Use Space instead of manual margin styling
|
||||
3. **Consistent sizing** - Use standard sizes (small, middle, large)
|
||||
4. **Compact for forms** - Use Space.Compact for connected form components
|
||||
5. **Wrap when needed** - Enable wrap for responsive layouts
|
||||
34
guidelines/components/spin.md
Normal file
34
guidelines/components/spin.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Spin Component
|
||||
|
||||
**Purpose**: Loading spinner to indicate loading state.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show loading state
|
||||
- Indicate async operations
|
||||
- Loading indicators for content
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Spin } from 'antd';
|
||||
|
||||
<Spin />
|
||||
<Spin tip="Loading...">
|
||||
<div>Content</div>
|
||||
</Spin>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------- | -------------- | ------------------------------------- | ----------- |
|
||||
| `spinning` | Spinning state | boolean | true |
|
||||
| `tip` | Loading text | ReactNode | - |
|
||||
| `size` | Spin size | `'small'` \| `'default'` \| `'large'` | `'default'` |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Wrap content** - Wrap content to show loading overlay
|
||||
2. **Loading text** - Provide helpful loading text
|
||||
3. **Appropriate size** - Use appropriate size for context
|
||||
33
guidelines/components/statistic.md
Normal file
33
guidelines/components/statistic.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# Statistic Component
|
||||
|
||||
**Purpose**: Statistic display for numbers and data.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Display statistics
|
||||
- Show numbers with formatting
|
||||
- Dashboard metrics
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Statistic } from 'antd';
|
||||
|
||||
<Statistic title="Active Users" value={1128} prefix={<UserOutlined />} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | ----------------- | ---------------- | ------- |
|
||||
| `title` | Statistic title | ReactNode | - |
|
||||
| `value` | Statistic value | number \| string | - |
|
||||
| `prefix` | Prefix element | ReactNode | - |
|
||||
| `suffix` | Suffix element | ReactNode | - |
|
||||
| `precision` | Decimal precision | number | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Clear titles** - Provide clear statistic titles
|
||||
2. **Formatting** - Use precision for decimal formatting
|
||||
3. **Prefix/suffix** - Use for units or icons
|
||||
39
guidelines/components/steps.md
Normal file
39
guidelines/components/steps.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# Steps Component
|
||||
|
||||
**Purpose**: Step-by-step process indicator. Guide users through a process.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show step-by-step process
|
||||
- Guide users through multi-step forms
|
||||
- Display process progress
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Steps } from 'antd';
|
||||
|
||||
<Steps
|
||||
current={1}
|
||||
items={[
|
||||
{ title: 'Finished', description: 'This is a description.' },
|
||||
{ title: 'In Progress', description: 'This is a description.' },
|
||||
{ title: 'Waiting', description: 'This is a description.' },
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `current` | Current step | number | 0 |
|
||||
| `items` | Step items | StepItem[] | - |
|
||||
| `direction` | Direction | `'horizontal'` \| `'vertical'` | `'horizontal'` |
|
||||
| `status` | Current step status | `'wait'` \| `'process'` \| `'finish'` \| `'error'` | `'process'` |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Clear steps** - Use clear, descriptive step titles
|
||||
2. **Progress indication** - Show current step clearly
|
||||
3. **Error handling** - Use error status for failed steps
|
||||
34
guidelines/components/switch.md
Normal file
34
guidelines/components/switch.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Switch Component
|
||||
|
||||
**Purpose**: Toggle switch for switching between two states.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Toggle between two states (on/off)
|
||||
- Enable or disable settings
|
||||
- Binary choices in forms
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Switch } from 'antd';
|
||||
|
||||
<Switch defaultChecked onChange={handleChange} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------------- | --------------- | ------------------------ | ----------- |
|
||||
| `checked` | Checked state | boolean | false |
|
||||
| `defaultChecked` | Default checked | boolean | false |
|
||||
| `disabled` | Disabled state | boolean | false |
|
||||
| `loading` | Loading state | boolean | false |
|
||||
| `size` | Switch size | `'default'` \| `'small'` | `'default'` |
|
||||
| `onChange` | Change handler | (checked) => void | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Always use within Form.Item
|
||||
2. **Clear labels** - Provide clear labels for on/off states
|
||||
3. **Loading states** - Show loading during async operations
|
||||
354
guidelines/components/table.md
Normal file
354
guidelines/components/table.md
Normal file
@@ -0,0 +1,354 @@
|
||||
# Table Component
|
||||
|
||||
**Purpose**: Display structured data in rows and columns with sorting, filtering, pagination, and selection capabilities.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Use `Table` for displaying tabular data
|
||||
- Use when you need sorting, filtering, or pagination
|
||||
- Use for data that has a clear row/column structure
|
||||
- Use for large datasets that need pagination or virtualization
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Table } from 'antd';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
},
|
||||
];
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
},
|
||||
];
|
||||
|
||||
<Table dataSource={dataSource} columns={columns} />
|
||||
```
|
||||
|
||||
## Column Configuration
|
||||
|
||||
### Basic Column
|
||||
|
||||
```typescript
|
||||
{
|
||||
title: 'Name', // Column header
|
||||
dataIndex: 'name', // Data field name
|
||||
key: 'name', // Unique key (required if no dataIndex)
|
||||
}
|
||||
```
|
||||
|
||||
### Column with Custom Render
|
||||
|
||||
```typescript
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (text, record, index) => {
|
||||
return <a>{text}</a>;
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Sorted Column
|
||||
|
||||
```typescript
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
sorter: (a, b) => a.age - b.age,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
}
|
||||
```
|
||||
|
||||
### Filtered Column
|
||||
|
||||
```typescript
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
filters: [
|
||||
{ text: 'Active', value: 'active' },
|
||||
{ text: 'Inactive', value: 'inactive' },
|
||||
],
|
||||
onFilter: (value, record) => record.status === value,
|
||||
}
|
||||
```
|
||||
|
||||
### Fixed Column
|
||||
|
||||
```typescript
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
fixed: 'left', // or 'right'
|
||||
width: 100,
|
||||
}
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `dataSource` | Table data | object[] | - |
|
||||
| `columns` | Column configuration | ColumnType[] | - |
|
||||
| `rowKey` | Row key function or string | string \| (record) => string | 'key' |
|
||||
| `pagination` | Pagination config | object \| false | true |
|
||||
| `loading` | Loading state | boolean \| SpinProps | false |
|
||||
| `size` | Table size | `'large'` \| `'middle'` \| `'small'` | `'middle'` |
|
||||
| `bordered` | Show borders | boolean | false |
|
||||
| `scroll` | Scroll configuration | { x?: number, y?: number } | - |
|
||||
| `rowSelection` | Row selection config | object | - |
|
||||
| `expandable` | Expandable rows config | object | - |
|
||||
| `onChange` | Table change handler | (pagination, filters, sorter, extra) => void | - |
|
||||
|
||||
## Examples
|
||||
|
||||
### With Pagination
|
||||
|
||||
```typescript
|
||||
<Table
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
pagination={{
|
||||
current: currentPage,
|
||||
pageSize: 10,
|
||||
total: total,
|
||||
onChange: (page) => setCurrentPage(page),
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### With Loading
|
||||
|
||||
```typescript
|
||||
<Table
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
/>
|
||||
```
|
||||
|
||||
### With Row Selection
|
||||
|
||||
```typescript
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||||
|
||||
<Table
|
||||
rowSelection={{
|
||||
selectedRowKeys,
|
||||
onChange: (keys) => setSelectedRowKeys(keys),
|
||||
}}
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
/>
|
||||
```
|
||||
|
||||
### With Expandable Rows
|
||||
|
||||
```typescript
|
||||
<Table
|
||||
expandable={{
|
||||
expandedRowRender: (record) => (
|
||||
<p style={{ margin: 0 }}>{record.description}</p>
|
||||
),
|
||||
rowExpandable: (record) => record.name !== 'Not Expandable',
|
||||
}}
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
/>
|
||||
```
|
||||
|
||||
### With Fixed Columns
|
||||
|
||||
```typescript
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
scroll={{ x: 1500, y: 300 }}
|
||||
/>
|
||||
```
|
||||
|
||||
### With Custom Row Class
|
||||
|
||||
```typescript
|
||||
<Table
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
onRow={(record) => ({
|
||||
onClick: () => handleRowClick(record),
|
||||
className: record.status === 'active' ? 'active-row' : '',
|
||||
})}
|
||||
/>
|
||||
```
|
||||
|
||||
## Column Types
|
||||
|
||||
### Action Column
|
||||
|
||||
```typescript
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button size="small">Edit</Button>
|
||||
<Button size="small" danger>Delete</Button>
|
||||
</Space>
|
||||
),
|
||||
}
|
||||
```
|
||||
|
||||
### Image Column
|
||||
|
||||
```typescript
|
||||
{
|
||||
title: 'Avatar',
|
||||
dataIndex: 'avatar',
|
||||
key: 'avatar',
|
||||
render: (url) => <Avatar src={url} />,
|
||||
}
|
||||
```
|
||||
|
||||
### Tag Column
|
||||
|
||||
```typescript
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: (status) => (
|
||||
<Tag color={status === 'active' ? 'green' : 'red'}>
|
||||
{status}
|
||||
</Tag>
|
||||
),
|
||||
}
|
||||
```
|
||||
|
||||
### Date Column
|
||||
|
||||
```typescript
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
{
|
||||
title: 'Date',
|
||||
dataIndex: 'date',
|
||||
key: 'date',
|
||||
sorter: (a, b) => dayjs(a.date).unix() - dayjs(b.date).unix(),
|
||||
render: (date) => dayjs(date).format('YYYY-MM-DD'),
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Always provide rowKey** - Use unique `rowKey` prop for each row
|
||||
2. **Use dataIndex** - Always specify `dataIndex` for columns
|
||||
3. **Optimize renders** - Use `render` function efficiently, avoid inline functions
|
||||
4. **Handle large data** - Use pagination or virtualization for large datasets
|
||||
5. **Provide loading states** - Show loading indicator during data fetching
|
||||
6. **Use appropriate size** - Choose size based on data density
|
||||
7. **Fixed important columns** - Fix first/last columns for horizontal scrolling
|
||||
8. **Accessible headers** - Provide clear, descriptive column titles
|
||||
9. **Sortable columns** - Make numeric and date columns sortable
|
||||
10. **Filterable columns** - Add filters for categorical data
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Server-Side Pagination
|
||||
|
||||
```typescript
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const handleTableChange = (newPagination) => {
|
||||
setPagination(newPagination);
|
||||
fetchData(newPagination);
|
||||
};
|
||||
|
||||
<Table
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
pagination={pagination}
|
||||
onChange={handleTableChange}
|
||||
loading={loading}
|
||||
/>
|
||||
```
|
||||
|
||||
### Editable Table
|
||||
|
||||
```typescript
|
||||
const EditableCell = ({ editing, dataIndex, title, record, children, ...restProps }) => {
|
||||
return (
|
||||
<td {...restProps}>
|
||||
{editing ? (
|
||||
<Form.Item
|
||||
name={dataIndex}
|
||||
style={{ margin: 0 }}
|
||||
rules={[{ required: true, message: `Please input ${title}!` }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Table with Search
|
||||
|
||||
```typescript
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
const filteredData = dataSource.filter(item =>
|
||||
item.name.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
|
||||
<>
|
||||
<Input.Search
|
||||
placeholder="Search"
|
||||
onSearch={setSearchText}
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
<Table dataSource={filteredData} columns={columns} />
|
||||
</>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Tables are keyboard accessible
|
||||
- Sortable columns are announced to screen readers
|
||||
- Row selection is keyboard accessible
|
||||
- Column headers are properly associated with cells
|
||||
74
guidelines/components/tabs.md
Normal file
74
guidelines/components/tabs.md
Normal file
@@ -0,0 +1,74 @@
|
||||
# Tabs Component
|
||||
|
||||
**Purpose**: Tabs make it easy to explore and switch between different views.
|
||||
|
||||
## When to Use
|
||||
|
||||
- **Card Tabs**: For managing too many closeable views
|
||||
- **Normal Tabs**: For functional aspects of a page
|
||||
- **Radio.Button**: For secondary tabs
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Tabs } from 'antd';
|
||||
|
||||
const items = [
|
||||
{ key: '1', label: 'Tab 1', children: 'Content 1' },
|
||||
{ key: '2', label: 'Tab 2', children: 'Content 2' },
|
||||
{ key: '3', label: 'Tab 3', children: 'Content 3' },
|
||||
];
|
||||
|
||||
<Tabs items={items} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| `items` | Tab items | TabItem[] | - |
|
||||
| `activeKey` | Active tab key | string | - |
|
||||
| `defaultActiveKey` | Default active tab | string | - |
|
||||
| `type` | Tab type | `'line'` \| `'card'` \| `'editable-card'` | `'line'` |
|
||||
| `size` | Tab size | `'large'` \| `'middle'` \| `'small'` | `'middle'` |
|
||||
| `tabPosition` | Tab position | `'top'` \| `'right'` \| `'bottom'` \| `'left'` | `'top'` |
|
||||
| `onChange` | Tab change handler | (key: string) => void | - |
|
||||
|
||||
## Examples
|
||||
|
||||
### Card Tabs
|
||||
|
||||
```typescript
|
||||
<Tabs type="card" items={items} />
|
||||
```
|
||||
|
||||
### Editable Card Tabs
|
||||
|
||||
```typescript
|
||||
<Tabs
|
||||
type="editable-card"
|
||||
items={items}
|
||||
onEdit={(targetKey, action) => {
|
||||
if (action === 'add') {
|
||||
// Add tab
|
||||
} else {
|
||||
// Remove tab
|
||||
}
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### With Icons
|
||||
|
||||
```typescript
|
||||
const items = [
|
||||
{ key: '1', label: <span><AppleOutlined />Tab 1</span>, children: 'Content' },
|
||||
];
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use items prop** - Prefer `items` prop for tab configuration
|
||||
2. **Card tabs for many views** - Use card tabs when you have many closeable views
|
||||
3. **Controlled tabs** - Use `activeKey` for controlled tabs
|
||||
4. **Accessible tabs** - Ensure keyboard navigation works
|
||||
32
guidelines/components/tag.md
Normal file
32
guidelines/components/tag.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# Tag Component
|
||||
|
||||
**Purpose**: Tag/label for categorizing or markup.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Categorize content
|
||||
- Display labels
|
||||
- Show status or categories
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Tag } from 'antd';
|
||||
|
||||
<Tag>Tag</Tag>
|
||||
<Tag color="blue">Blue Tag</Tag>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------- | ----------------- | ----------- | ------- |
|
||||
| `color` | Tag color | string | - |
|
||||
| `closable` | Show close button | boolean | false |
|
||||
| `onClose` | Close handler | (e) => void | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Color coding** - Use colors for categorization
|
||||
2. **Closable tags** - Make tags closable when removable
|
||||
3. **Consistent colors** - Use consistent color scheme
|
||||
33
guidelines/components/textarea.md
Normal file
33
guidelines/components/textarea.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# TextArea Component
|
||||
|
||||
**Purpose**: Multiline text input component for longer form input.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Multiline text input
|
||||
- Longer form input
|
||||
- Comments, descriptions, notes
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Input } from 'antd';
|
||||
const { TextArea } = Input;
|
||||
|
||||
<TextArea rows={4} placeholder="Enter text" />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | -------------------- | ------------------------------- | ------- |
|
||||
| `rows` | Number of rows | number | 4 |
|
||||
| `maxLength` | Maximum length | number | - |
|
||||
| `showCount` | Show character count | boolean | false |
|
||||
| `autoSize` | Auto resize | boolean \| { minRows, maxRows } | false |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Always use within Form.Item
|
||||
2. **Show count** - Use showCount for character limits
|
||||
3. **Auto size** - Use autoSize for dynamic height
|
||||
32
guidelines/components/time-picker.md
Normal file
32
guidelines/components/time-picker.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# TimePicker Component
|
||||
|
||||
**Purpose**: Time picker for selecting time.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Select time
|
||||
- Time range selection
|
||||
- Form time inputs
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { TimePicker } from 'antd';
|
||||
|
||||
<TimePicker onChange={onChange} />
|
||||
<TimePicker.RangePicker onChange={onChange} />
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------- | -------------- | -------------------------- | ------------ |
|
||||
| `value` | Selected time | dayjs | - |
|
||||
| `format` | Time format | string | `'HH:mm:ss'` |
|
||||
| `onChange` | Change handler | (time, timeString) => void | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Always use within Form.Item
|
||||
2. **Time format** - Set appropriate time format
|
||||
3. **Range picker** - Use RangePicker for time ranges
|
||||
37
guidelines/components/timeline.md
Normal file
37
guidelines/components/timeline.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# Timeline Component
|
||||
|
||||
**Purpose**: Timeline display for showing chronological events.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Display chronological events
|
||||
- Show process steps
|
||||
- Activity timelines
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Timeline } from 'antd';
|
||||
|
||||
<Timeline
|
||||
items={[
|
||||
{ children: 'Create a services site 2015-09-01' },
|
||||
{ children: 'Solve initial network problems 2015-09-01' },
|
||||
{ children: 'Technical testing 2015-09-01' },
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --------- | -------------- | -------------------------------------- | ------- |
|
||||
| `items` | Timeline items | TimelineItem[] | - |
|
||||
| `mode` | Timeline mode | `'left'` \| `'right'` \| `'alternate'` | - |
|
||||
| `pending` | Pending node | ReactNode | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Chronological order** - Display events in chronological order
|
||||
2. **Clear content** - Provide clear event descriptions
|
||||
3. **Pending state** - Use pending for ongoing processes
|
||||
33
guidelines/components/tooltip.md
Normal file
33
guidelines/components/tooltip.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# Tooltip Component
|
||||
|
||||
**Purpose**: Simple text popup tips on hover.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Show additional information on hover
|
||||
- Provide context or help text
|
||||
- Explain functionality
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Tooltip } from 'antd';
|
||||
|
||||
<Tooltip title="prompt text">
|
||||
<Button>Hover me</Button>
|
||||
</Tooltip>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | ----------------- | ----------------------------------- | --------- |
|
||||
| `title` | Tooltip content | ReactNode | - |
|
||||
| `placement` | Tooltip placement | string | `'top'` |
|
||||
| `trigger` | Trigger action | `'hover'` \| `'focus'` \| `'click'` | `'hover'` |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Helpful content** - Provide useful, concise information
|
||||
2. **Appropriate placement** - Choose placement that doesn't obstruct content
|
||||
3. **Accessible** - Ensure keyboard accessibility
|
||||
41
guidelines/components/tour.md
Normal file
41
guidelines/components/tour.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# Tour Component
|
||||
|
||||
**Purpose**: Tour guide to help users understand new features.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Guide new users
|
||||
- Introduce new features
|
||||
- Onboarding tours
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Tour } from 'antd';
|
||||
|
||||
<Tour
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
steps={[
|
||||
{
|
||||
title: 'Upload File',
|
||||
description: 'Put your files here.',
|
||||
target: () => ref1.current,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --------- | ------------------ | --------------- | ------- |
|
||||
| `open` | Tour visible state | boolean | false |
|
||||
| `steps` | Tour steps | TourStepProps[] | - |
|
||||
| `onClose` | Close handler | () => void | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Clear steps** - Provide clear, concise step descriptions
|
||||
2. **Skip option** - Allow users to skip tour
|
||||
3. **Progressive disclosure** - Show one step at a time
|
||||
39
guidelines/components/transfer.md
Normal file
39
guidelines/components/transfer.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# Transfer Component
|
||||
|
||||
**Purpose**: Two-column transfer for moving items between lists.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Move items between two lists
|
||||
- Select multiple items from a list
|
||||
- User permission assignment
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { Transfer } from 'antd';
|
||||
|
||||
<Transfer
|
||||
dataSource={mockData}
|
||||
titles={['Source', 'Target']}
|
||||
targetKeys={targetKeys}
|
||||
onChange={handleChange}
|
||||
render={(item) => item.title}
|
||||
/>
|
||||
```
|
||||
|
||||
## Common Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ------------ | --------------- | ----------------------------------------- | ------- |
|
||||
| `dataSource` | Data source | TransferItem[] | [] |
|
||||
| `targetKeys` | Selected keys | string[] | [] |
|
||||
| `onChange` | Change handler | (targetKeys, direction, moveKeys) => void | - |
|
||||
| `render` | Render function | (item) => ReactNode | - |
|
||||
| `titles` | Column titles | [string, string] | - |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Form integration** - Use with Form for form data
|
||||
2. **Clear labels** - Provide clear source and target labels
|
||||
3. **Search** - Enable search for large lists
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user