mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
Merge branch 'master' into feature-merge-master
This commit is contained in:
MadCcc
commit
6e2a7e47b6
@ -1,10 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import { Button, Space, Typography } from 'antd';
|
||||
import { Link, useLocation } from 'dumi';
|
||||
import { css } from '@emotion/react';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
import { GroupMask } from './Group';
|
||||
import * as utils from '../../../theme/utils';
|
||||
import SiteContext from './SiteContext';
|
||||
import topicImage from './images/topic.png';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
@ -20,6 +23,35 @@ const locales = {
|
||||
},
|
||||
};
|
||||
|
||||
const useStyle = () => {
|
||||
const { token } = useSiteToken();
|
||||
const { isMobile } = React.useContext(SiteContext);
|
||||
|
||||
return {
|
||||
titleBase: css`
|
||||
h1& {
|
||||
font-family: AliPuHui, ${token.fontFamily};
|
||||
}
|
||||
`,
|
||||
title: isMobile
|
||||
? css`
|
||||
h1& {
|
||||
margin-bottom: ${token.margin}px;
|
||||
font-weight: normal;
|
||||
font-size: ${token.fontSizeHeading1 + 2}px;
|
||||
line-height: ${token.lineHeightHeading2};
|
||||
}
|
||||
`
|
||||
: css`
|
||||
h1& {
|
||||
margin-bottom: ${token.marginMD}px;
|
||||
font-weight: 900;
|
||||
font-size: 68px;
|
||||
}
|
||||
`,
|
||||
};
|
||||
};
|
||||
|
||||
export interface BannerProps {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
@ -28,53 +60,59 @@ export default function Banner({ children }: BannerProps) {
|
||||
const [locale] = useLocale(locales);
|
||||
const { pathname, search } = useLocation();
|
||||
const { token } = useSiteToken();
|
||||
const styles = useStyle();
|
||||
const { isMobile } = React.useContext(SiteContext);
|
||||
|
||||
const isZhCN = utils.isZhCN(pathname);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Banner Placeholder Motion */}
|
||||
<div
|
||||
style={{
|
||||
height: 320,
|
||||
background: '#77C6FF',
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{isMobile ? (
|
||||
<img src={topicImage} alt="" style={{ width: '100%' }} />
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ)`,
|
||||
flex: 'auto',
|
||||
backgroundRepeat: 'repeat-x',
|
||||
backgroundPosition: '100% 0',
|
||||
backgroundSize: 'auto 100%',
|
||||
height: 320,
|
||||
background: '#77C6FF',
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
/>
|
||||
|
||||
<video style={{ height: '100%', objectFit: 'contain' }} autoPlay muted loop>
|
||||
<source
|
||||
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
|
||||
type="video/webm"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ)`,
|
||||
flex: 'auto',
|
||||
backgroundRepeat: 'repeat-x',
|
||||
backgroundPosition: '100% 0',
|
||||
backgroundSize: 'auto 100%',
|
||||
}}
|
||||
/>
|
||||
<source
|
||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ)`,
|
||||
flex: 'auto',
|
||||
backgroundRepeat: 'repeat-x',
|
||||
backgroundPosition: '0 0',
|
||||
backgroundSize: 'auto 100%',
|
||||
marginLeft: -1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<video style={{ height: '100%', objectFit: 'contain' }} autoPlay muted loop>
|
||||
<source
|
||||
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
|
||||
type="video/webm"
|
||||
/>
|
||||
<source
|
||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ)`,
|
||||
flex: 'auto',
|
||||
backgroundRepeat: 'repeat-x',
|
||||
backgroundPosition: '0 0',
|
||||
backgroundSize: 'auto 100%',
|
||||
marginLeft: -1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Logo */}
|
||||
<div style={{ position: 'relative', background: '#fff' }}>
|
||||
@ -94,34 +132,26 @@ export default function Banner({ children }: BannerProps) {
|
||||
>
|
||||
{/* Image Left Top */}
|
||||
<img
|
||||
style={{ position: 'absolute', left: 0, top: 0, width: 240 }}
|
||||
style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
|
||||
alt="bg"
|
||||
/>
|
||||
{/* Image Left Top */}
|
||||
{/* Image Right Top */}
|
||||
<img
|
||||
style={{ position: 'absolute', right: 120, top: 0, width: 240 }}
|
||||
style={{ position: 'absolute', right: isMobile ? 0 : 120, top: 0, width: 240 }}
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
|
||||
alt="bg"
|
||||
/>
|
||||
|
||||
<Typography.Title
|
||||
level={1}
|
||||
style={{
|
||||
fontFamily: `AliPuHui, ${token.fontFamily}`,
|
||||
fontSize: token.fontSizes[9],
|
||||
lineHeight: token.lineHeights[9],
|
||||
fontWeight: 900,
|
||||
marginBottom: token.marginMD,
|
||||
}}
|
||||
>
|
||||
<Typography.Title level={1} css={[styles.titleBase, styles.title]}>
|
||||
Ant Design 5.0
|
||||
</Typography.Title>
|
||||
<Typography.Paragraph
|
||||
style={{
|
||||
fontSize: token.fontSizeHeading5,
|
||||
lineHeight: token.lineHeightHeading5,
|
||||
fontSize: isMobile ? token.fontSizeHeading5 - 2 : token.fontSizeHeading5,
|
||||
lineHeight: isMobile ? token.lineHeightSM : token.lineHeightHeading5,
|
||||
marginBottom: token.marginMD * 2,
|
||||
padding: isMobile ? `0 ${token.paddingLG + 2}px` : 0,
|
||||
}}
|
||||
>
|
||||
<div>{locale.slogan}</div>
|
||||
|
||||
@ -1,75 +1,127 @@
|
||||
import * as React from 'react';
|
||||
import { Skeleton, Typography } from 'antd';
|
||||
import { Typography, Skeleton, Carousel } from 'antd';
|
||||
import type { SerializedStyles } from '@emotion/react';
|
||||
import { css } from '@emotion/react';
|
||||
import type { Extra, Icon } from './util';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
import SiteContext from './SiteContext';
|
||||
import { useCarouselStyle } from './util';
|
||||
|
||||
const useStyle = () => {
|
||||
const { token } = useSiteToken();
|
||||
const { carousel } = useCarouselStyle();
|
||||
|
||||
return {
|
||||
card: css`
|
||||
border: ${token.lineWidth}px solid ${token.colorBorderSecondary};
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
padding-block: ${token.paddingMD}px;
|
||||
padding-inline: ${token.paddingLG}px;
|
||||
flex: 1 1 0;
|
||||
width: 33%;
|
||||
itemBase: css`
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
text-decoration: none;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
background: ${token.colorBgContainer};
|
||||
|
||||
border: ${token.lineWidth}px solid ${token.colorBorderSecondary};
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
padding-block: ${token.paddingMD}px;
|
||||
padding-inline: ${token.paddingLG}px;
|
||||
`,
|
||||
cardItem: css`
|
||||
width: 33%;
|
||||
&:hover {
|
||||
box-shadow: ${token.boxShadowCard};
|
||||
}
|
||||
`,
|
||||
sliderItem: css`
|
||||
margin: 0 ${token.margin}px;
|
||||
text-align: start;
|
||||
`,
|
||||
container: css`
|
||||
display: flex;
|
||||
max-width: 1208px;
|
||||
margin-inline: auto;
|
||||
box-sizing: border-box;
|
||||
padding-inline: ${token.marginXXL}px;
|
||||
column-gap: ${token.paddingMD * 2}px;
|
||||
align-items: stretch;
|
||||
text-align: start;
|
||||
`,
|
||||
carousel,
|
||||
};
|
||||
};
|
||||
|
||||
interface RecommendItemProps {
|
||||
extra: Extra;
|
||||
index: number;
|
||||
icons: Icon[];
|
||||
itemCss: SerializedStyles;
|
||||
}
|
||||
const RecommendItem = ({ extra, index, icons, itemCss }: RecommendItemProps) => {
|
||||
const style = useStyle();
|
||||
const { token } = useSiteToken();
|
||||
|
||||
if (!extra) {
|
||||
return <Skeleton key={index} />;
|
||||
}
|
||||
const icon = icons.find((i) => i.name === extra.source);
|
||||
|
||||
return (
|
||||
<a
|
||||
key={extra?.title}
|
||||
href={extra.href}
|
||||
target="_blank"
|
||||
css={[style.itemBase, itemCss]}
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Typography.Title level={5}>{extra?.title}</Typography.Title>
|
||||
<Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
|
||||
{extra.description}
|
||||
</Typography.Paragraph>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography.Text>{extra.date}</Typography.Text>
|
||||
{icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export interface BannerRecommendsProps {
|
||||
extras?: Extra[];
|
||||
icons?: Icon[];
|
||||
}
|
||||
|
||||
export default function BannerRecommends({ extras = [], icons = [] }: BannerRecommendsProps) {
|
||||
const style = useStyle();
|
||||
const styles = useStyle();
|
||||
const { isMobile } = React.useContext(SiteContext);
|
||||
const first3 = extras.length === 0 ? Array(3).fill(null) : extras.slice(0, 3);
|
||||
const { token } = useSiteToken();
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
maxWidth: 1208,
|
||||
marginInline: 'auto',
|
||||
boxSizing: 'border-box',
|
||||
paddingInline: token.marginXXL,
|
||||
display: 'flex',
|
||||
columnGap: token.paddingMD * 2,
|
||||
alignItems: 'stretch',
|
||||
textAlign: 'start',
|
||||
}}
|
||||
>
|
||||
{first3.map((extra, index) => {
|
||||
if (!extra) {
|
||||
return <Skeleton key={index} />;
|
||||
}
|
||||
const icon = icons.find((i) => i.name === extra.source);
|
||||
return (
|
||||
<a key={extra?.title} href={extra.href} target="_blank" css={style.card} rel="noreferrer">
|
||||
<Typography.Title level={5}>{extra?.title}</Typography.Title>
|
||||
<Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
|
||||
{extra.description}
|
||||
</Typography.Paragraph>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography.Text>{extra.date}</Typography.Text>
|
||||
{icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
|
||||
<div>
|
||||
{isMobile ? (
|
||||
<Carousel css={styles.carousel}>
|
||||
{first3.map((extra, index) => (
|
||||
<div key={index}>
|
||||
<RecommendItem
|
||||
extra={extra}
|
||||
index={index}
|
||||
icons={icons}
|
||||
itemCss={styles.sliderItem}
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</Carousel>
|
||||
) : (
|
||||
<div css={styles.container}>
|
||||
{first3.map((extra, index) => (
|
||||
<RecommendItem
|
||||
extra={extra}
|
||||
index={index}
|
||||
icons={icons}
|
||||
itemCss={styles.cardItem}
|
||||
key={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* eslint-disable react/jsx-pascal-case */
|
||||
import React from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import {
|
||||
Space,
|
||||
Typography,
|
||||
@ -10,12 +10,15 @@ import {
|
||||
Modal,
|
||||
FloatButton,
|
||||
Progress,
|
||||
Carousel,
|
||||
} from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
|
||||
import { css } from '@emotion/react';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import SiteContext from './SiteContext';
|
||||
import { useCarouselStyle } from './util';
|
||||
|
||||
const SAMPLE_CONTENT_EN =
|
||||
'Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance.';
|
||||
@ -54,6 +57,7 @@ const locales = {
|
||||
|
||||
const useStyle = () => {
|
||||
const { token } = useSiteToken();
|
||||
const { carousel } = useCarouselStyle();
|
||||
|
||||
return {
|
||||
card: css`
|
||||
@ -80,13 +84,25 @@ const useStyle = () => {
|
||||
filter: blur(40px);
|
||||
opacity: 0.1;
|
||||
`,
|
||||
mobileCard: css`
|
||||
height: 395px;
|
||||
`,
|
||||
carousel,
|
||||
};
|
||||
};
|
||||
|
||||
interface ComponentItemProps {
|
||||
title: React.ReactNode;
|
||||
node: React.ReactNode;
|
||||
type: 'new' | 'update';
|
||||
index: number;
|
||||
}
|
||||
|
||||
export default function ComponentsList() {
|
||||
const { token } = useSiteToken();
|
||||
const styles = useStyle();
|
||||
const [locale] = useLocale(locales);
|
||||
const { isMobile } = useContext(SiteContext);
|
||||
|
||||
const COMPONENTS: {
|
||||
title: React.ReactNode;
|
||||
@ -110,12 +126,16 @@ export default function ComponentsList() {
|
||||
node: (
|
||||
<DatePicker._InternalPanelDoNotUseOrYouWillBeFired
|
||||
showToday={false}
|
||||
presets={[
|
||||
{ label: locale.yesterday, value: dayjs().add(-1, 'd') },
|
||||
{ label: locale.lastWeek, value: dayjs().add(-7, 'd') },
|
||||
{ label: locale.lastMonth, value: dayjs().add(-1, 'month') },
|
||||
{ label: locale.lastYear, value: dayjs().add(-1, 'year') },
|
||||
]}
|
||||
presets={
|
||||
isMobile
|
||||
? []
|
||||
: [
|
||||
{ label: locale.yesterday, value: dayjs().add(-1, 'd') },
|
||||
{ label: locale.lastWeek, value: dayjs().add(-7, 'd') },
|
||||
{ label: locale.lastMonth, value: dayjs().add(-1, 'month') },
|
||||
{ label: locale.lastYear, value: dayjs().add(-1, 'year') },
|
||||
]
|
||||
}
|
||||
value={dayjs('2022-11-18 14:00:00')}
|
||||
/>
|
||||
),
|
||||
@ -149,7 +169,7 @@ export default function ComponentsList() {
|
||||
<Tour._InternalPanelDoNotUseOrYouWillBeFired
|
||||
title="Ant Design 5.0"
|
||||
description={locale.tour}
|
||||
style={{ width: 350 }}
|
||||
style={{ width: isMobile ? 'auto' : 350 }}
|
||||
current={3}
|
||||
total={9}
|
||||
/>
|
||||
@ -211,49 +231,61 @@ export default function ComponentsList() {
|
||||
),
|
||||
},
|
||||
],
|
||||
[],
|
||||
[isMobile],
|
||||
);
|
||||
|
||||
return (
|
||||
const ComponentItem = ({ title, node, type, index }: ComponentItemProps) => {
|
||||
const tagColor = type === 'new' ? 'processing' : 'warning';
|
||||
const tagText = type === 'new' ? locale.new : locale.update;
|
||||
|
||||
return (
|
||||
<div key={index} css={[styles.card, isMobile && styles.mobileCard]}>
|
||||
{/* Decorator */}
|
||||
<div
|
||||
css={styles.cardCircle}
|
||||
style={{
|
||||
right: (index % 2) * -20 - 20,
|
||||
bottom: (index % 3) * -40 - 20,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Title */}
|
||||
<Space>
|
||||
<Typography.Title level={4} style={{ fontWeight: 'normal', margin: 0 }}>
|
||||
{title}
|
||||
</Typography.Title>
|
||||
<Tag color={tagColor}>{tagText}</Tag>
|
||||
</Space>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginTop: token.paddingLG,
|
||||
flex: 'auto',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{node}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return isMobile ? (
|
||||
<div style={{ margin: '0 16px' }}>
|
||||
<Carousel css={styles.carousel}>
|
||||
{COMPONENTS.map(({ title, node, type }, index) => (
|
||||
<ComponentItem title={title} node={node} type={type} index={index} key={index} />
|
||||
))}
|
||||
</Carousel>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ width: '100%', overflow: 'hidden', display: 'flex', justifyContent: 'center' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'stretch', columnGap: token.paddingLG }}>
|
||||
{COMPONENTS.map(({ title, node, type }, index) => {
|
||||
const tagColor = type === 'new' ? 'processing' : 'warning';
|
||||
const tagText = type === 'new' ? locale.new : locale.update;
|
||||
|
||||
return (
|
||||
<div key={index} css={styles.card}>
|
||||
{/* Decorator */}
|
||||
<div
|
||||
css={styles.cardCircle}
|
||||
style={{
|
||||
right: (index % 2) * -20 - 20,
|
||||
bottom: (index % 3) * -40 - 20,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Title */}
|
||||
<Space>
|
||||
<Typography.Title level={4} style={{ fontWeight: 'normal', margin: 0 }}>
|
||||
{title}
|
||||
</Typography.Title>
|
||||
<Tag color={tagColor}>{tagText}</Tag>
|
||||
</Space>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginTop: token.paddingLG,
|
||||
flex: 'auto',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{node}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{COMPONENTS.map(({ title, node, type }, index) => (
|
||||
<ComponentItem title={title} node={node} type={type} index={index} key={index} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { Col, Row, Typography } from 'antd';
|
||||
import React from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
import { Link, useLocation } from 'dumi';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
import * as utils from '../../../theme/utils';
|
||||
import SiteContext from './SiteContext';
|
||||
|
||||
const SECONDARY_LIST = [
|
||||
{
|
||||
@ -98,6 +99,8 @@ export default function DesignFramework() {
|
||||
const style = useStyle();
|
||||
const { pathname, search } = useLocation();
|
||||
const isZhCN = utils.isZhCN(pathname);
|
||||
const { isMobile } = useContext(SiteContext);
|
||||
const colSpan = isMobile ? 24 : 8;
|
||||
|
||||
const MAINLY_LIST = [
|
||||
{
|
||||
@ -124,7 +127,7 @@ export default function DesignFramework() {
|
||||
const desc = locale[`${key}Desc` as keyof typeof locale];
|
||||
|
||||
return (
|
||||
<Col key={index} span={8}>
|
||||
<Col key={index} span={colSpan}>
|
||||
<Link to={path}>
|
||||
<div css={style.card}>
|
||||
<img alt={title} src={img} />
|
||||
@ -149,7 +152,7 @@ export default function DesignFramework() {
|
||||
const desc = locale[`${key}Desc` as keyof typeof locale];
|
||||
|
||||
return (
|
||||
<Col key={index} span={8}>
|
||||
<Col key={index} span={colSpan}>
|
||||
<a css={style.cardMini} target="_blank" href={url} rel="noreferrer">
|
||||
<img alt={title} src={img} style={{ transform: `scale(${imgScale})` }} />
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { Typography } from 'antd';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
import SiteContext from './SiteContext';
|
||||
|
||||
export interface GroupMaskProps {
|
||||
style?: React.CSSProperties;
|
||||
@ -49,6 +51,7 @@ export interface GroupProps {
|
||||
export default function Group(props: GroupProps) {
|
||||
const { id, title, titleColor, description, children, decoration, background, collapse } = props;
|
||||
const { token } = useSiteToken();
|
||||
const { isMobile } = useContext(SiteContext);
|
||||
|
||||
const marginStyle: React.CSSProperties = collapse
|
||||
? {}
|
||||
@ -56,7 +59,7 @@ export default function Group(props: GroupProps) {
|
||||
maxWidth: 1208,
|
||||
marginInline: 'auto',
|
||||
boxSizing: 'border-box',
|
||||
paddingInline: token.marginXXL,
|
||||
paddingInline: isMobile ? token.margin : token.marginXXL,
|
||||
};
|
||||
const childNode = (
|
||||
<>
|
||||
@ -69,11 +72,17 @@ export default function Group(props: GroupProps) {
|
||||
color: titleColor,
|
||||
// Special for the title
|
||||
fontFamily: `AliPuHui, ${token.fontFamily}`,
|
||||
fontSize: isMobile ? token.fontSizeHeading2 : token.fontSizeHeading1,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography.Title>
|
||||
<Typography.Paragraph style={{ marginBottom: token.marginFarXS, color: titleColor }}>
|
||||
<Typography.Paragraph
|
||||
style={{
|
||||
marginBottom: isMobile ? token.marginXXL : token.marginFarXS,
|
||||
color: titleColor,
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
|
||||
11
.dumi/pages/index/components/SiteContext.tsx
Normal file
11
.dumi/pages/index/components/SiteContext.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export interface SiteContextProps {
|
||||
isMobile: boolean;
|
||||
}
|
||||
|
||||
const SiteContext = React.createContext<SiteContextProps>({
|
||||
isMobile: false,
|
||||
});
|
||||
|
||||
export default SiteContext;
|
||||
119
.dumi/pages/index/components/Theme/MobileCarousel.tsx
Normal file
119
.dumi/pages/index/components/Theme/MobileCarousel.tsx
Normal file
@ -0,0 +1,119 @@
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
import { Typography, Carousel } from 'antd';
|
||||
import { useCarouselStyle } from '../util';
|
||||
import useSiteToken from '../../../../hooks/useSiteToken';
|
||||
|
||||
const useStyle = () => {
|
||||
const { carousel } = useCarouselStyle();
|
||||
return {
|
||||
carousel,
|
||||
container: css`
|
||||
position: relative;
|
||||
`,
|
||||
title: css`
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
`,
|
||||
};
|
||||
};
|
||||
|
||||
const mobileImageConfigList = [
|
||||
{
|
||||
imageSrc:
|
||||
'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KsMrRZaciFcAAAAAAAAAAAAADrJ8AQ/original',
|
||||
titleColor: 'rgba(0,0,0,.88)',
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3FkqR6XRNgoAAAAAAAAAAAAADrJ8AQ/original',
|
||||
titleColor: '#fff',
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cSX_RbD3k9wAAAAAAAAAAAAADrJ8AQ/original',
|
||||
titleColor: '#fff',
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*MldsRZeax6EAAAAAAAAAAAAADrJ8AQ/original',
|
||||
titleColor: '#fff',
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xCAmSL0xlZ8AAAAAAAAAAAAADrJ8AQ/original',
|
||||
titleColor: '#fff',
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*vCfCSbiI_VIAAAAAAAAAAAAADrJ8AQ/original',
|
||||
titleColor: '#fff',
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xCAmSL0xlZ8AAAAAAAAAAAAADrJ8AQ/original',
|
||||
titleColor: '#fff',
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BeDBTY9UnXIAAAAAAAAAAAAADrJ8AQ/original',
|
||||
titleColor: '#fff',
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Q63XTbk8YaMAAAAAAAAAAAAADrJ8AQ/original',
|
||||
titleColor: '#fff',
|
||||
},
|
||||
];
|
||||
|
||||
export interface MobileCarouselProps {
|
||||
id?: string;
|
||||
title?: React.ReactNode;
|
||||
description?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function MobileCarousel(props: MobileCarouselProps) {
|
||||
const styles = useStyle();
|
||||
const { id, title, description } = props;
|
||||
const { token } = useSiteToken();
|
||||
const [currentSlider, setCurrentSlider] = useState<number>(0);
|
||||
|
||||
return (
|
||||
<div css={styles.container}>
|
||||
<div css={styles.title}>
|
||||
<Typography.Title
|
||||
id={id}
|
||||
level={1}
|
||||
style={{
|
||||
fontWeight: 900,
|
||||
color: mobileImageConfigList[currentSlider].titleColor,
|
||||
// Special for the title
|
||||
fontFamily: `AliPuHui, ${token.fontFamily}`,
|
||||
fontSize: token.fontSizeHeading2,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography.Title>
|
||||
<Typography.Paragraph
|
||||
style={{
|
||||
marginBottom: token.marginXXL,
|
||||
color: mobileImageConfigList[currentSlider].titleColor,
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
<Carousel css={styles.carousel} afterChange={setCurrentSlider}>
|
||||
{mobileImageConfigList.map((item, index) => (
|
||||
<div key={index}>
|
||||
<img src={item.imageSrc} alt="" style={{ width: '100%' }} />
|
||||
</div>
|
||||
))}
|
||||
</Carousel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -30,6 +30,9 @@ import RadiusPicker from './RadiusPicker';
|
||||
import Group from '../Group';
|
||||
import BackgroundImage from './BackgroundImage';
|
||||
import { DEFAULT_COLOR, getAvatarURL, getClosetColor, PINK_COLOR } from './colorUtil';
|
||||
import SiteContext from '../SiteContext';
|
||||
import { useCarouselStyle } from '../util';
|
||||
import MobileCarousel from './MobileCarousel';
|
||||
|
||||
const { Header, Content, Sider } = Layout;
|
||||
|
||||
@ -81,6 +84,7 @@ const locales = {
|
||||
// ============================= Style =============================
|
||||
const useStyle = () => {
|
||||
const { token } = useSiteToken();
|
||||
const { carousel } = useCarouselStyle();
|
||||
|
||||
return {
|
||||
demo: css`
|
||||
@ -177,6 +181,7 @@ const useStyle = () => {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
`,
|
||||
carousel,
|
||||
};
|
||||
};
|
||||
|
||||
@ -278,6 +283,7 @@ export default function Theme() {
|
||||
const { compact, themeType, ...themeToken } = themeData;
|
||||
const isLight = themeType !== 'dark';
|
||||
const [form] = Form.useForm();
|
||||
const { isMobile } = React.useContext(SiteContext);
|
||||
|
||||
// const algorithmFn = isLight ? theme.defaultAlgorithm : theme.darkAlgorithm;
|
||||
const algorithmFn = React.useMemo(() => {
|
||||
@ -487,8 +493,22 @@ export default function Theme() {
|
||||
const posStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
};
|
||||
const leftTopImageStyle = {
|
||||
left: '50%',
|
||||
transform: 'translate3d(-900px, 0, 0)',
|
||||
top: -100,
|
||||
height: 500,
|
||||
};
|
||||
const rightBottomImageStyle = {
|
||||
right: '50%',
|
||||
transform: 'translate3d(750px, 0, 0)',
|
||||
bottom: -100,
|
||||
height: 287,
|
||||
};
|
||||
|
||||
return (
|
||||
return isMobile ? (
|
||||
<MobileCarousel title={locale.themeTitle} description={locale.themeDesc} id="flexible" />
|
||||
) : (
|
||||
<Group
|
||||
title={locale.themeTitle}
|
||||
titleColor={getTitleColor(themeData.colorPrimary, isLight)}
|
||||
@ -509,10 +529,7 @@ export default function Theme() {
|
||||
<img
|
||||
style={{
|
||||
...posStyle,
|
||||
left: '50%',
|
||||
transform: 'translate3d(-900px, 0, 0)',
|
||||
top: -100,
|
||||
height: 500,
|
||||
...leftTopImageStyle,
|
||||
}}
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/bd71b0c6-f93a-4e52-9c8a-f01a9b8fe22b.svg"
|
||||
alt=""
|
||||
@ -521,10 +538,7 @@ export default function Theme() {
|
||||
<img
|
||||
style={{
|
||||
...posStyle,
|
||||
right: '50%',
|
||||
transform: 'translate3d(750px, 0, 0)',
|
||||
bottom: -100,
|
||||
height: 287,
|
||||
...rightBottomImageStyle,
|
||||
}}
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/84ad805a-74cb-4916-b7ba-9cdc2bdec23a.svg"
|
||||
alt=""
|
||||
|
||||
BIN
.dumi/pages/index/components/images/topic.png
Normal file
BIN
.dumi/pages/index/components/images/topic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
@ -1,5 +1,6 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import * as React from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
export interface Author {
|
||||
avatar: string;
|
||||
@ -98,3 +99,28 @@ export function useSiteData(): [Partial<SiteData>, boolean] {
|
||||
|
||||
return [data, loading];
|
||||
}
|
||||
|
||||
export const useCarouselStyle = () => ({
|
||||
carousel: css`
|
||||
.slick-dots.slick-dots-bottom {
|
||||
bottom: -22px;
|
||||
li {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #e1eeff;
|
||||
border-radius: 50%;
|
||||
button {
|
||||
height: 6px;
|
||||
background: #e1eeff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.slick-active {
|
||||
background: #4b9cff;
|
||||
button {
|
||||
background: #4b9cff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import { useLocale as useDumiLocale } from 'dumi';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import useLocale from '../../hooks/useLocale';
|
||||
@ -9,6 +9,7 @@ import Theme from './components/Theme';
|
||||
import BannerRecommends from './components/BannerRecommends';
|
||||
import ComponentsList from './components/ComponentsList';
|
||||
import DesignFramework from './components/DesignFramework';
|
||||
import SiteContext from './components/SiteContext';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
@ -33,44 +34,61 @@ const Homepage: React.FC = () => {
|
||||
const localeStr = localeId === 'zh-CN' ? 'cn' : 'en';
|
||||
|
||||
const [siteData] = useSiteData();
|
||||
const [isMobile, setIsMobile] = React.useState<boolean>(false);
|
||||
|
||||
const updateMobileMode = () => {
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
updateMobileMode();
|
||||
window.addEventListener('resize', updateMobileMode);
|
||||
return () => {
|
||||
window.removeEventListener('resize', updateMobileMode);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const siteValue = useMemo(() => ({ isMobile }), [isMobile]);
|
||||
|
||||
return (
|
||||
<ConfigProvider theme={{ algorithm: undefined }}>
|
||||
<section>
|
||||
<Banner>
|
||||
<BannerRecommends extras={siteData?.extras?.[localeStr]} icons={siteData?.icons} />
|
||||
</Banner>
|
||||
<SiteContext.Provider value={siteValue}>
|
||||
<section>
|
||||
<Banner>
|
||||
<BannerRecommends extras={siteData?.extras?.[localeStr]} icons={siteData?.icons} />
|
||||
</Banner>
|
||||
|
||||
<div>
|
||||
<Theme />
|
||||
<Group
|
||||
background="#fff"
|
||||
collapse
|
||||
title={locale.assetsTitle}
|
||||
description={locale.assetsDesc}
|
||||
id="design"
|
||||
>
|
||||
<ComponentsList />
|
||||
</Group>
|
||||
<Group
|
||||
title={locale.designTitle}
|
||||
description={locale.designDesc}
|
||||
background="#F5F8FF"
|
||||
decoration={
|
||||
<>
|
||||
{/* Image Left Top */}
|
||||
<img
|
||||
style={{ position: 'absolute', left: 0, top: -50, height: 160 }}
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
|
||||
alt=""
|
||||
/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<DesignFramework />
|
||||
</Group>
|
||||
</div>
|
||||
</section>
|
||||
<div>
|
||||
<Theme />
|
||||
<Group
|
||||
background="#fff"
|
||||
collapse
|
||||
title={locale.assetsTitle}
|
||||
description={locale.assetsDesc}
|
||||
id="design"
|
||||
>
|
||||
<ComponentsList />
|
||||
</Group>
|
||||
<Group
|
||||
title={locale.designTitle}
|
||||
description={locale.designDesc}
|
||||
background="#F5F8FF"
|
||||
decoration={
|
||||
<>
|
||||
{/* Image Left Top */}
|
||||
<img
|
||||
style={{ position: 'absolute', left: 0, top: -50, height: 160 }}
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
|
||||
alt=""
|
||||
/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<DesignFramework />
|
||||
</Group>
|
||||
</div>
|
||||
</section>
|
||||
</SiteContext.Provider>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { enUS, ThemeEditor, zhCN } from 'antd-token-previewer';
|
||||
import { enUS, zhCN, ThemeEditor } from 'antd-token-previewer';
|
||||
import { Button, ConfigProvider, message, Modal, Typography } from 'antd';
|
||||
import type { ThemeConfig } from 'antd/es/config-provider/context';
|
||||
import { Helmet } from 'dumi';
|
||||
|
||||
@ -181,37 +181,6 @@ export default () => {
|
||||
}
|
||||
}
|
||||
|
||||
.markdown .dumi-default-table-content > table,
|
||||
.markdown > table {
|
||||
width: 100%;
|
||||
margin: 8px 0 16px;
|
||||
direction: ltr;
|
||||
empty-cells: show;
|
||||
border: 1px solid ${token.colorSplit};
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.markdown .dumi-default-table-content,
|
||||
.markdown {
|
||||
> table th {
|
||||
color: #5c6b77;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
}
|
||||
|
||||
.markdown .dumi-default-table-content,
|
||||
.markdown {
|
||||
> table th,
|
||||
> table td {
|
||||
padding: 16px 24px;
|
||||
text-align: left;
|
||||
border: 1px solid ${token.colorSplit};
|
||||
}
|
||||
}
|
||||
|
||||
.markdown table td > a:not(:last-child) {
|
||||
margin-right: 0 !important;
|
||||
|
||||
@ -294,12 +263,72 @@ export default () => {
|
||||
}
|
||||
|
||||
.markdown .dumi-default-table {
|
||||
.component-api-table {
|
||||
display: block;
|
||||
table {
|
||||
margin: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin: 8px 0 16px;
|
||||
direction: ltr;
|
||||
empty-cells: show;
|
||||
border: 1px solid ${token.colorSplit};
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px 24px;
|
||||
text-align: left;
|
||||
border: 1px solid ${token.colorSplit};
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid ${token.colorSplit};
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid ${token.colorSplit};
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
color: #5c6b77;
|
||||
border-width: 1px 1px 2px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(60, 90, 100, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.component-api-table {
|
||||
margin: 2em 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
font-size: ${Math.max(token.fontSize - 1, 12)}px;
|
||||
font-family: ${token.codeFamily};
|
||||
line-height: ${token.lineHeight};
|
||||
border: 1px solid ${token.colorSplit};
|
||||
border-width: 0 1px;
|
||||
|
||||
th {
|
||||
border-width: 1px 0 2px;
|
||||
}
|
||||
|
||||
td {
|
||||
border-width: 1px 0;
|
||||
&:first-child {
|
||||
width: 18%;
|
||||
min-width: 58px;
|
||||
color: #595959;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
@ -307,6 +336,7 @@ export default () => {
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 55%;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
@ -336,116 +366,10 @@ export default () => {
|
||||
}
|
||||
}
|
||||
|
||||
.markdown .dumi-default-table {
|
||||
table {
|
||||
margin: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
font-size: ${Math.max(token.fontSize - 1, 12)}px;
|
||||
font-family: ${token.codeFamily};
|
||||
line-height: ${token.lineHeight};
|
||||
border: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px;
|
||||
border-color: ${token.colorSplit};
|
||||
border-width: 1px 0;
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid ${token.colorSplit};
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid ${token.colorSplit};
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
padding-top: 14px;
|
||||
border-width: 1px 0 2px;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(60, 90, 100, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
&:first-child {
|
||||
min-width: 58px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-demo,
|
||||
[id^='components-grid-demo-'] {
|
||||
.demo-row,
|
||||
.code-box-demo .demo-row {
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
#f5f5f5 4.16666667%,
|
||||
transparent 4.16666667%,
|
||||
transparent 8.33333333%,
|
||||
#f5f5f5 8.33333333%,
|
||||
#f5f5f5 12.5%,
|
||||
transparent 12.5%,
|
||||
transparent 16.66666667%,
|
||||
#f5f5f5 16.66666667%,
|
||||
#f5f5f5 20.83333333%,
|
||||
transparent 20.83333333%,
|
||||
transparent 25%,
|
||||
#f5f5f5 25%,
|
||||
#f5f5f5 29.16666667%,
|
||||
transparent 29.16666667%,
|
||||
transparent 33.33333333%,
|
||||
#f5f5f5 33.33333333%,
|
||||
#f5f5f5 37.5%,
|
||||
transparent 37.5%,
|
||||
transparent 41.66666667%,
|
||||
#f5f5f5 41.66666667%,
|
||||
#f5f5f5 45.83333333%,
|
||||
transparent 45.83333333%,
|
||||
transparent 50%,
|
||||
#f5f5f5 50%,
|
||||
#f5f5f5 54.16666667%,
|
||||
transparent 54.16666667%,
|
||||
transparent 58.33333333%,
|
||||
#f5f5f5 58.33333333%,
|
||||
#f5f5f5 62.5%,
|
||||
transparent 62.5%,
|
||||
transparent 66.66666667%,
|
||||
#f5f5f5 66.66666667%,
|
||||
#f5f5f5 70.83333333%,
|
||||
transparent 70.83333333%,
|
||||
transparent 75%,
|
||||
#f5f5f5 75%,
|
||||
#f5f5f5 79.16666667%,
|
||||
transparent 79.16666667%,
|
||||
transparent 83.33333333%,
|
||||
#f5f5f5 83.33333333%,
|
||||
#f5f5f5 87.5%,
|
||||
transparent 87.5%,
|
||||
transparent 91.66666667%,
|
||||
#f5f5f5 91.66666667%,
|
||||
#f5f5f5 95.83333333%,
|
||||
transparent 95.83333333%
|
||||
);
|
||||
}
|
||||
|
||||
${antCls}-row > div,
|
||||
.code-box-demo ${antCls}-row > div {
|
||||
.code-box-demo ${antCls}-row > div {
|
||||
min-height: 30px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
@ -464,7 +388,7 @@ export default () => {
|
||||
}
|
||||
|
||||
${antCls}-row .demo-col,
|
||||
.code-box-demo ${antCls}-row .demo-col {
|
||||
.code-box-demo ${antCls}-row .demo-col {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 30px 0;
|
||||
@ -479,23 +403,23 @@ export default () => {
|
||||
}
|
||||
|
||||
${antCls}-row .demo-col-2,
|
||||
.code-box-demo ${antCls}-row .demo-col-2 {
|
||||
.code-box-demo ${antCls}-row .demo-col-2 {
|
||||
background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()};
|
||||
}
|
||||
|
||||
${antCls}-row .demo-col-3,
|
||||
.code-box-demo ${antCls}-row .demo-col-3 {
|
||||
.code-box-demo ${antCls}-row .demo-col-3 {
|
||||
color: #999;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
${antCls}-row .demo-col-4,
|
||||
.code-box-demo ${antCls}-row .demo-col-4 {
|
||||
.code-box-demo ${antCls}-row .demo-col-4 {
|
||||
background: ${new TinyColor(demoGridColor).setAlpha(0.6).toHexString()};
|
||||
}
|
||||
|
||||
${antCls}-row .demo-col-5,
|
||||
.code-box-demo ${antCls}-row .demo-col-5 {
|
||||
.code-box-demo ${antCls}-row .demo-col-5 {
|
||||
color: #999;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
@ -528,40 +452,6 @@ export default () => {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// For Changelog
|
||||
.markdown ul${antCls}-timeline {
|
||||
line-height: 2;
|
||||
|
||||
li${antCls}-timeline-item {
|
||||
margin: 0;
|
||||
padding: 0 0 30px;
|
||||
list-style: none;
|
||||
|
||||
${antCls}-timeline-item-content {
|
||||
position: relative;
|
||||
top: -14px;
|
||||
padding-left: 32px;
|
||||
font-size: 14px;
|
||||
|
||||
> h2 {
|
||||
margin-top: 0;
|
||||
padding-top: 4px;
|
||||
direction: ltr;
|
||||
|
||||
span {
|
||||
${antCls}-row-rtl & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li${antCls}-timeline-item:first-child {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import RcFooter from 'rc-footer';
|
||||
import { Link, FormattedMessage } from 'dumi';
|
||||
import type { FooterColumn } from 'rc-footer/lib/column';
|
||||
@ -23,6 +23,7 @@ import useLocation from '../../../hooks/useLocation';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
import AdditionalInfo from './AdditionalInfo';
|
||||
import SiteContext from '../SiteContext';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
@ -35,6 +36,7 @@ const locales = {
|
||||
|
||||
const useStyle = () => {
|
||||
const { token } = useSiteToken();
|
||||
const { isMobile } = useContext(SiteContext);
|
||||
const background = new TinyColor(getAlphaColor('#f0f3fa', '#fff'))
|
||||
.onBackground(token.colorBgContainer)
|
||||
.toHexString();
|
||||
@ -59,7 +61,10 @@ const useStyle = () => {
|
||||
}
|
||||
|
||||
.rc-footer-column {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: ${isMobile ? 60 : 0}px;
|
||||
:last-child {
|
||||
margin-bottom: ${isMobile ? 20 : 0}px;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-footer-container {
|
||||
@ -69,8 +74,10 @@ const useStyle = () => {
|
||||
}
|
||||
|
||||
.rc-footer-bottom {
|
||||
font-size: ${token.fontSize}px;
|
||||
box-shadow: inset 0 106px 36px -116px rgba(0, 0, 0, 0.14);
|
||||
.rc-footer-bottom-container {
|
||||
font-size: ${token.fontSize}px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
@ -369,7 +376,10 @@ const Footer = () => {
|
||||
css={style.footer}
|
||||
bottom={
|
||||
<>
|
||||
Made with <span style={{ color: '#fff' }}>❤</span> by {locale.owner}
|
||||
<div style={{ opacity: '0.4' }}>
|
||||
Made with <span style={{ color: '#fff' }}>❤</span> by
|
||||
</div>
|
||||
<div>{locale.owner}</div>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
2
.github/workflows/issue-open-check.yml
vendored
2
.github/workflows/issue-open-check.yml
vendored
@ -40,7 +40,7 @@ jobs:
|
||||
actions: 'check-issue'
|
||||
issue-number: ${{ github.event.issue.number }}
|
||||
# 格式如：'x1,x2' or 'x1,x2/y1,y2' 最多支持 2 个数组
|
||||
title-includes: '官网,网站,国内,镜像,mobile ant design,mobile.ant.design,ant design,ant design pro,pro.ant.design/挂了,挂掉了,无法访问,不能访问,访问速度,访问慢,访问不了,出问题,打不开,登不上,can not open,cannot open,can not be reached'
|
||||
title-includes: '官网,网站,国内,镜像,mobile ant design,mobile.ant.design,ant design,ant design pro,pro.ant.design/挂了,挂掉了,无法访问,不能访问,访问速度,访问慢,访问不了,加载太慢,加载慢,加载很慢,出问题,打不开,登不上,can not open,cannot open,can not be reached'
|
||||
|
||||
- name: deal website
|
||||
if: steps.checkid.outputs.check-result == 'true'
|
||||
|
||||
@ -15,6 +15,20 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 5.0.6
|
||||
|
||||
`2022-12-12`
|
||||
|
||||
- 🐞 Fix FloatButton `tooltip` property is not support `0` value. [#39425](https://github.com/ant-design/ant-design/pull/39425) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🐞 Fix Space wrapped Select not display clear icon problem when mouse hover. [#39468](https://github.com/ant-design/ant-design/pull/39468) [@foryuki](https://github.com/foryuki)
|
||||
- 💄 Fix Cascader ul has unexpected margin value. [#39436](https://github.com/ant-design/ant-design/pull/39436) [@ZN1996](https://github.com/ZN1996)
|
||||
- 💄 Fix Input has unexpected padding problem in compact mode. [#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
- 💄 Optimize Message padding in compact mode. [#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
- 💄 Fix Radio.Button has unexpected text color in dark mode. [#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
- 💄 Fix Select has unexpected padding problem in compact mode. [#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
- 💄 Fix Slider has unexpected size for marking dot. [#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
- 💄 Optimize Switch color in dark mode. [#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
|
||||
## 5.0.5
|
||||
|
||||
`2022-12-08`
|
||||
|
||||
@ -15,6 +15,20 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 5.0.6
|
||||
|
||||
`2022-12-12`
|
||||
|
||||
- 🐞 修复 FloatButton 的 `toolip` 属性不支持设置为 `0` 的问题。[#39425](https://github.com/ant-design/ant-design/pull/39425) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🐞 修复 Space 组件包裹的 Select 系列组件在 hover 时清除图标不展示的问题。[#39468](https://github.com/ant-design/ant-design/pull/39468) [@foryuki](https://github.com/foryuki)
|
||||
- 💄 修复 Cascader 内部 ul 的 margin 值异常的问题。[#39436](https://github.com/ant-design/ant-design/pull/39436) [@ZN1996](https://github.com/ZN1996)
|
||||
- 💄 修复 Input 组件在紧凑模式下内边距异常的问题。[#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
- 💄 优化 Message 组件在紧凑模式下的内边距。[#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
- 💄 修复 Radio.Button 组件在暗色模式下的文字颜色。[#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
- 💄 修复 Select 组件在紧凑模式下内边距异常的问题。[#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
- 💄 修复 Slider 组件标签原点样式问题。[#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
- 💄 优化 Switch 组件暗色模式下的颜色。[#39428](https://github.com/ant-design/ant-design/pull/39428)
|
||||
|
||||
## 5.0.5
|
||||
|
||||
`2022-12-08`
|
||||
|
||||
@ -1,77 +1,79 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
class="ant-col ant-col-16"
|
||||
>
|
||||
<div
|
||||
class="ant-anchor-wrapper"
|
||||
style="max-height:100vh"
|
||||
>
|
||||
id="part-1"
|
||||
style="height:100vh;background:rgba(255,0,0,0.02)"
|
||||
/>
|
||||
<div
|
||||
id="part-2"
|
||||
style="height:100vh;background:rgba(0,255,0,0.02)"
|
||||
/>
|
||||
<div
|
||||
id="part-3"
|
||||
style="height:100vh;background:rgba(0,0,255,0.02)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-8"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-anchor"
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="ant-anchor-ink"
|
||||
class="ant-anchor-wrapper"
|
||||
style="max-height:100vh"
|
||||
>
|
||||
<span
|
||||
class="ant-anchor-ink-ball"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#api"
|
||||
title="API"
|
||||
>
|
||||
API
|
||||
</a>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
class="ant-anchor"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#anchor-props"
|
||||
title="Anchor Props"
|
||||
<div
|
||||
class="ant-anchor-ink"
|
||||
>
|
||||
Anchor Props
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#link-props"
|
||||
title="Link Props"
|
||||
<span
|
||||
class="ant-anchor-ink-ball"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
Link Props
|
||||
</a>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-1"
|
||||
title="Part 1"
|
||||
>
|
||||
Part 1
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-2"
|
||||
title="Part 2"
|
||||
>
|
||||
Part 2
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-3"
|
||||
title="Part 3"
|
||||
>
|
||||
Part 3
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -459,79 +461,96 @@ exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`
|
||||
exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class=""
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-anchor-wrapper"
|
||||
style="max-height:100vh"
|
||||
class="ant-col ant-col-18"
|
||||
>
|
||||
<div
|
||||
class="ant-anchor"
|
||||
id="part-1"
|
||||
style="height:100vh;background:rgba(255,0,0,0.02);margin-top:30vh"
|
||||
>
|
||||
Part 1
|
||||
</div>
|
||||
<div
|
||||
id="part-2"
|
||||
style="height:100vh;background:rgba(0,255,0,0.02)"
|
||||
>
|
||||
Part 2
|
||||
</div>
|
||||
<div
|
||||
id="part-3"
|
||||
style="height:100vh;background:rgba(0,0,255,0.02)"
|
||||
>
|
||||
Part 3
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-anchor-ink"
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-anchor-ink-ball"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#api"
|
||||
title="API"
|
||||
>
|
||||
API
|
||||
</a>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
class="ant-anchor-wrapper"
|
||||
style="max-height:100vh"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#anchor-props"
|
||||
title="Anchor Props"
|
||||
<div
|
||||
class="ant-anchor"
|
||||
>
|
||||
Anchor Props
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#link-props"
|
||||
title="Link Props"
|
||||
>
|
||||
Link Props
|
||||
</a>
|
||||
<div
|
||||
class="ant-anchor-ink"
|
||||
>
|
||||
<span
|
||||
class="ant-anchor-ink-ball"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-1"
|
||||
title="Part 1"
|
||||
>
|
||||
Part 1
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-2"
|
||||
title="Part 2"
|
||||
>
|
||||
Part 2
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-3"
|
||||
title="Part 3"
|
||||
>
|
||||
Part 3
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="height:30vh;background:rgba(0,0,0,0.85);position:fixed;top:0;left:0;width:75%;color:#FFF"
|
||||
>
|
||||
<div>
|
||||
Fixed Top Block
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,77 +1,79 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
class="ant-col ant-col-16"
|
||||
>
|
||||
<div
|
||||
class="ant-anchor-wrapper"
|
||||
style="max-height:100vh"
|
||||
>
|
||||
id="part-1"
|
||||
style="height:100vh;background:rgba(255,0,0,0.02)"
|
||||
/>
|
||||
<div
|
||||
id="part-2"
|
||||
style="height:100vh;background:rgba(0,255,0,0.02)"
|
||||
/>
|
||||
<div
|
||||
id="part-3"
|
||||
style="height:100vh;background:rgba(0,0,255,0.02)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-8"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-anchor"
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="ant-anchor-ink"
|
||||
class="ant-anchor-wrapper"
|
||||
style="max-height:100vh"
|
||||
>
|
||||
<span
|
||||
class="ant-anchor-ink-ball"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#api"
|
||||
title="API"
|
||||
>
|
||||
API
|
||||
</a>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
class="ant-anchor"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#anchor-props"
|
||||
title="Anchor Props"
|
||||
<div
|
||||
class="ant-anchor-ink"
|
||||
>
|
||||
Anchor Props
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#link-props"
|
||||
title="Link Props"
|
||||
<span
|
||||
class="ant-anchor-ink-ball"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
Link Props
|
||||
</a>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-1"
|
||||
title="Part 1"
|
||||
>
|
||||
Part 1
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-2"
|
||||
title="Part 2"
|
||||
>
|
||||
Part 2
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-3"
|
||||
title="Part 3"
|
||||
>
|
||||
Part 3
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -459,79 +461,96 @@ exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
|
||||
exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class=""
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-anchor-wrapper"
|
||||
style="max-height:100vh"
|
||||
class="ant-col ant-col-18"
|
||||
>
|
||||
<div
|
||||
class="ant-anchor"
|
||||
id="part-1"
|
||||
style="height:100vh;background:rgba(255,0,0,0.02);margin-top:30vh"
|
||||
>
|
||||
Part 1
|
||||
</div>
|
||||
<div
|
||||
id="part-2"
|
||||
style="height:100vh;background:rgba(0,255,0,0.02)"
|
||||
>
|
||||
Part 2
|
||||
</div>
|
||||
<div
|
||||
id="part-3"
|
||||
style="height:100vh;background:rgba(0,0,255,0.02)"
|
||||
>
|
||||
Part 3
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-anchor-ink"
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-anchor-ink-ball"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#api"
|
||||
title="API"
|
||||
>
|
||||
API
|
||||
</a>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
class="ant-anchor-wrapper"
|
||||
style="max-height:100vh"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#anchor-props"
|
||||
title="Anchor Props"
|
||||
<div
|
||||
class="ant-anchor"
|
||||
>
|
||||
Anchor Props
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#link-props"
|
||||
title="Link Props"
|
||||
>
|
||||
Link Props
|
||||
</a>
|
||||
<div
|
||||
class="ant-anchor-ink"
|
||||
>
|
||||
<span
|
||||
class="ant-anchor-ink-ball"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-1"
|
||||
title="Part 1"
|
||||
>
|
||||
Part 1
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-2"
|
||||
title="Part 2"
|
||||
>
|
||||
Part 2
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#part-3"
|
||||
title="Part 3"
|
||||
>
|
||||
Part 3
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="height:30vh;background:rgba(0,0,0,0.85);position:fixed;top:0;left:0;width:75%;color:#FFF"
|
||||
>
|
||||
<div>
|
||||
Fixed Top Block
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,38 +1,35 @@
|
||||
import React from 'react';
|
||||
import { Anchor } from 'antd';
|
||||
import { Anchor, Row, Col } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
title: 'Basic demo',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
href: '#components-anchor-demo-static',
|
||||
title: 'Static demo',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
href: '#api',
|
||||
title: 'API',
|
||||
children: [
|
||||
<Row>
|
||||
<Col span={16}>
|
||||
<div id="part-1" style={{ height: '100vh', background: 'rgba(255,0,0,0.02)' }} />
|
||||
<div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }} />
|
||||
<div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Anchor
|
||||
items={[
|
||||
{
|
||||
key: '4',
|
||||
href: '#anchor-props',
|
||||
title: 'Anchor Props',
|
||||
key: 'part-1',
|
||||
href: '#part-1',
|
||||
title: 'Part 1',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
href: '#link-props',
|
||||
title: 'Link Props',
|
||||
key: 'part-2',
|
||||
href: '#part-2',
|
||||
title: 'Part 2',
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{
|
||||
key: 'part-3',
|
||||
href: '#part-3',
|
||||
title: 'Part 3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,46 +1,70 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Anchor } from 'antd';
|
||||
import { Anchor, Row, Col } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const topRef = React.useRef<HTMLDivElement>(null);
|
||||
const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
setTargetOffset(window.innerHeight / 2);
|
||||
setTargetOffset(topRef.current?.clientHeight);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Anchor
|
||||
targetOffset={targetOffset}
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
title: 'Basic demo',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
href: '#components-anchor-demo-static',
|
||||
title: 'Static demo',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
href: '#api',
|
||||
title: 'API',
|
||||
children: [
|
||||
{
|
||||
key: '4',
|
||||
href: '#anchor-props',
|
||||
title: 'Anchor Props',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
href: '#link-props',
|
||||
title: 'Link Props',
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div>
|
||||
<Row>
|
||||
<Col span={18}>
|
||||
<div
|
||||
id="part-1"
|
||||
style={{ height: '100vh', background: 'rgba(255,0,0,0.02)', marginTop: '30vh' }}
|
||||
>
|
||||
Part 1
|
||||
</div>
|
||||
<div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }}>
|
||||
Part 2
|
||||
</div>
|
||||
<div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }}>
|
||||
Part 3
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Anchor
|
||||
targetOffset={targetOffset}
|
||||
items={[
|
||||
{
|
||||
key: 'part-1',
|
||||
href: '#part-1',
|
||||
title: 'Part 1',
|
||||
},
|
||||
{
|
||||
key: 'part-2',
|
||||
href: '#part-2',
|
||||
title: 'Part 2',
|
||||
},
|
||||
{
|
||||
key: 'part-3',
|
||||
href: '#part-3',
|
||||
title: 'Part 3',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<div
|
||||
style={{
|
||||
height: '30vh',
|
||||
background: 'rgba(0,0,0,0.85)',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '75%',
|
||||
color: '#FFF',
|
||||
}}
|
||||
ref={topRef}
|
||||
>
|
||||
<div>Fixed Top Block</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -22,11 +22,11 @@ For displaying anchor hyperlinks on page and jumping between them.
|
||||
## Examples
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/basic.tsx">Basic</code>
|
||||
<code src="./demo/basic.tsx" iframe="200">Basic</code>
|
||||
<code src="./demo/static.tsx">Static Anchor</code>
|
||||
<code src="./demo/onClick.tsx">Customize the onClick event</code>
|
||||
<code src="./demo/customizeHighlight.tsx">Customize the anchor highlight</code>
|
||||
<code src="./demo/targetOffset.tsx">Set Anchor scroll offset</code>
|
||||
<code src="./demo/targetOffset.tsx" iframe="200">Set Anchor scroll offset</code>
|
||||
<code src="./demo/onChange.tsx">Listening for anchor link change</code>
|
||||
<code src="./demo/legacy-anchor.tsx" debug>Deprecated JSX demo</code>
|
||||
|
||||
|
||||
@ -23,11 +23,11 @@ group:
|
||||
## 代码演示
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/basic.tsx">基本</code>
|
||||
<code src="./demo/basic.tsx" iframe="200">基本</code>
|
||||
<code src="./demo/static.tsx">静态位置</code>
|
||||
<code src="./demo/onClick.tsx">自定义 onClick 事件</code>
|
||||
<code src="./demo/customizeHighlight.tsx">自定义锚点高亮</code>
|
||||
<code src="./demo/targetOffset.tsx">设置锚点滚动偏移量</code>
|
||||
<code src="./demo/targetOffset.tsx" iframe="200">设置锚点滚动偏移量</code>
|
||||
<code src="./demo/onChange.tsx">监听锚点链接改变</code>
|
||||
<code src="./demo/legacy-anchor.tsx" debug>废弃的 JSX 示例</code>
|
||||
|
||||
|
||||
@ -50,9 +50,6 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
|
||||
...genFocusStyle(token),
|
||||
},
|
||||
|
||||
...genCompactItemStyle(token, componentCls, { focus: false }),
|
||||
...genCompactItemVerticalStyle(token, componentCls),
|
||||
|
||||
// make `btn-icon-only` not too narrow
|
||||
'&-icon-only&-compact-item': {
|
||||
flex: 'none',
|
||||
@ -496,5 +493,9 @@ export default genComponentStyleHook('Button', (token) => {
|
||||
|
||||
// Button Group
|
||||
genGroupStyle(buttonToken),
|
||||
|
||||
// Space Compact
|
||||
genCompactItemStyle(token, { focus: false }),
|
||||
genCompactItemVerticalStyle(token),
|
||||
];
|
||||
});
|
||||
|
||||
@ -32,7 +32,6 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
|
||||
{
|
||||
[componentCls]: {
|
||||
width: token.controlWidth,
|
||||
...genCompactItemStyle(token, componentCls),
|
||||
},
|
||||
},
|
||||
// =====================================================
|
||||
@ -153,6 +152,10 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
|
||||
direction: 'rtl',
|
||||
},
|
||||
},
|
||||
// =====================================================
|
||||
// == Space Compact ==
|
||||
// =====================================================
|
||||
genCompactItemStyle(token),
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
@ -973,11 +973,6 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
borderRadius,
|
||||
transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`,
|
||||
|
||||
// Space.Compact
|
||||
...genCompactItemStyle(token, componentCls, {
|
||||
focusElCls: `${componentCls}-focused`,
|
||||
}),
|
||||
|
||||
'&:hover, &-focused': {
|
||||
...genHoverStyle(token),
|
||||
},
|
||||
@ -1426,7 +1421,16 @@ export default genComponentStyleHook(
|
||||
initInputToken<FullToken<'DatePicker'>>(token),
|
||||
initPickerPanelToken(token),
|
||||
);
|
||||
return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)];
|
||||
return [
|
||||
genPickerStyle(pickerToken),
|
||||
genPickerStatusStyle(pickerToken),
|
||||
// =====================================================
|
||||
// == Space Compact ==
|
||||
// =====================================================
|
||||
genCompactItemStyle(token, {
|
||||
focusElCls: `${token.componentCls}-focused`,
|
||||
}),
|
||||
];
|
||||
},
|
||||
(token) => ({
|
||||
presetsWidth: 120,
|
||||
|
||||
@ -388,6 +388,64 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="vertical-align-top"
|
||||
class="anticon anticon-vertical-align-top"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="vertical-align-top"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
|
||||
@ -570,6 +628,64 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="vertical-align-top"
|
||||
class="anticon anticon-vertical-align-top"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="vertical-align-top"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -256,6 +256,42 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="vertical-align-top"
|
||||
class="anticon anticon-vertical-align-top"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="vertical-align-top"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
|
||||
@ -372,6 +408,42 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="vertical-align-top"
|
||||
class="anticon anticon-vertical-align-top"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="vertical-align-top"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -7,13 +7,13 @@ const App: React.FC = () => (
|
||||
<FloatButton.Group shape="circle" style={{ right: 24 }}>
|
||||
<FloatButton icon={<QuestionCircleOutlined />} />
|
||||
<FloatButton />
|
||||
<FloatButton.BackTop visibilityHeight={-1} />
|
||||
<FloatButton.BackTop visibilityHeight={0} />
|
||||
</FloatButton.Group>
|
||||
<FloatButton.Group shape="square" style={{ right: 94 }}>
|
||||
<FloatButton icon={<QuestionCircleOutlined />} />
|
||||
<FloatButton />
|
||||
<FloatButton icon={<SyncOutlined />} />
|
||||
<FloatButton.BackTop visibilityHeight={-1} />
|
||||
<FloatButton.BackTop visibilityHeight={0} />
|
||||
</FloatButton.Group>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -63,8 +63,6 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
border: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
borderRadius,
|
||||
|
||||
...genCompactItemStyle(token, componentCls),
|
||||
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
|
||||
@ -396,7 +394,14 @@ export default genComponentStyleHook(
|
||||
'InputNumber',
|
||||
(token) => {
|
||||
const inputNumberToken = initInputToken<FullToken<'InputNumber'>>(token);
|
||||
return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)];
|
||||
return [
|
||||
genInputNumberStyles(inputNumberToken),
|
||||
genAffixWrapperStyles(inputNumberToken),
|
||||
// =====================================================
|
||||
// == Space Compact ==
|
||||
// =====================================================
|
||||
genCompactItemStyle(inputNumberToken),
|
||||
];
|
||||
},
|
||||
(token) => ({
|
||||
controlWidth: 90,
|
||||
|
||||
@ -504,7 +504,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
};
|
||||
|
||||
const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
const { prefixCls, componentCls, controlHeightSM, lineWidth } = token;
|
||||
const { componentCls, controlHeightSM, lineWidth } = token;
|
||||
|
||||
const FIXED_CHROME_COLOR_HEIGHT = 16;
|
||||
const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
|
||||
@ -514,7 +514,6 @@ const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
...resetComponent(token),
|
||||
...genBasicInputStyle(token),
|
||||
...genStatusStyle(token),
|
||||
...genCompactItemStyle(token, prefixCls),
|
||||
|
||||
'&[type="color"]': {
|
||||
height: token.controlHeight,
|
||||
@ -933,5 +932,9 @@ export default genComponentStyleHook('Input', (token) => {
|
||||
genAffixStyle(inputToken),
|
||||
genGroupStyle(inputToken),
|
||||
genSearchInputStyle(inputToken),
|
||||
// =====================================================
|
||||
// == Space Compact ==
|
||||
// =====================================================
|
||||
genCompactItemStyle(inputToken),
|
||||
];
|
||||
});
|
||||
|
||||
@ -68,7 +68,6 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
|
||||
componentCls,
|
||||
radioWrapperMarginRight,
|
||||
radioCheckedColor,
|
||||
radioTop,
|
||||
radioSize,
|
||||
motionDurationSlow,
|
||||
motionDurationMid,
|
||||
@ -135,10 +134,10 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
position: 'relative',
|
||||
insetBlockStart: radioTop,
|
||||
display: 'inline-block',
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
alignSelf: 'center',
|
||||
},
|
||||
|
||||
[`${componentCls}-wrapper:hover &,
|
||||
@ -487,8 +486,6 @@ export default genComponentStyleHook('Radio', (token) => {
|
||||
controlItemBgActiveDisabled,
|
||||
colorTextDisabled,
|
||||
colorBgContainer,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
fontSizeLG,
|
||||
controlOutline,
|
||||
colorPrimaryHover,
|
||||
@ -506,7 +503,6 @@ export default genComponentStyleHook('Radio', (token) => {
|
||||
const radioButtonFocusShadow = radioFocusShadow;
|
||||
|
||||
const radioSize = fontSizeLG;
|
||||
const radioTop = (Math.round(fontSize * lineHeight) - radioSize) / 2;
|
||||
const dotPadding = 4; // Fixed value
|
||||
const radioDotDisabledSize = radioSize - dotPadding * 2;
|
||||
const radioDotSize = wireframe ? radioDotDisabledSize : radioSize - (dotPadding + lineWidth) * 2;
|
||||
@ -524,7 +520,6 @@ export default genComponentStyleHook('Radio', (token) => {
|
||||
radioFocusShadow,
|
||||
radioButtonFocusShadow,
|
||||
radioSize,
|
||||
radioTop,
|
||||
radioDotSize,
|
||||
radioDotDisabledSize,
|
||||
radioCheckedColor,
|
||||
|
||||
@ -13,7 +13,7 @@ demo:
|
||||
## 何时使用
|
||||
|
||||
- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
|
||||
- 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio/) 是更好的选择。
|
||||
- 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio-cn/) 是更好的选择。
|
||||
|
||||
## 代码演示
|
||||
|
||||
|
||||
@ -262,11 +262,6 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
|
||||
'&&-in-form-item': {
|
||||
width: '100%',
|
||||
},
|
||||
// Space.Compact
|
||||
...genCompactItemStyle(token, componentCls, {
|
||||
borderElCls: `${componentCls}-selector`,
|
||||
focusElCls: `${componentCls}-focused`,
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
||||
@ -320,6 +315,13 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
|
||||
}),
|
||||
true,
|
||||
),
|
||||
// =====================================================
|
||||
// == Space Compact ==
|
||||
// =====================================================
|
||||
genCompactItemStyle(token, {
|
||||
borderElCls: `${componentCls}-selector`,
|
||||
focusElCls: `${componentCls}-focused`,
|
||||
}),
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
@ -448,7 +448,7 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
@ -587,6 +587,32 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-last-item"
|
||||
@ -600,7 +626,7 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-search"
|
||||
style="width:50%"
|
||||
>
|
||||
<div
|
||||
@ -778,6 +804,32 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-last-item"
|
||||
|
||||
@ -341,7 +341,7 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
@ -398,6 +398,32 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-last-item"
|
||||
@ -411,7 +437,7 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-search"
|
||||
style="width:50%"
|
||||
>
|
||||
<div
|
||||
@ -493,6 +519,32 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-last-item"
|
||||
|
||||
@ -45,7 +45,7 @@ const App: React.FC = () => (
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Select defaultValue="Zhejiang">
|
||||
<Select defaultValue="Zhejiang" allowClear>
|
||||
<Option value="Zhejiang">Zhejiang</Option>
|
||||
<Option value="Jiangsu">Jiangsu</Option>
|
||||
</Select>
|
||||
@ -53,7 +53,7 @@ const App: React.FC = () => (
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Select mode="multiple" defaultValue="Zhejianggggg" style={{ width: '50%' }}>
|
||||
<Select allowClear mode="multiple" defaultValue="Zhejianggggg" style={{ width: '50%' }}>
|
||||
<Option value="Zhejianggggg">Zhejianggggg</Option>
|
||||
<Option value="Jiangsu">Jiangsu</Option>
|
||||
</Select>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { DerivativeToken } from '../theme/internal';
|
||||
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
import type { DerivativeToken, FullToken } from '../theme/internal';
|
||||
import type { OverrideComponent } from '../theme/util/genComponentStyleHook';
|
||||
|
||||
function compactItemVerticalBorder(token: DerivativeToken): CSSObject {
|
||||
return {
|
||||
@ -43,11 +44,13 @@ function compactItemBorderVerticalRadius(prefixCls: string): CSSObject {
|
||||
};
|
||||
}
|
||||
|
||||
export function genCompactItemVerticalStyle(token: DerivativeToken, prefixCls: string): CSSObject {
|
||||
export function genCompactItemVerticalStyle<T extends OverrideComponent>(
|
||||
token: FullToken<T>,
|
||||
): CSSInterpolation {
|
||||
return {
|
||||
'&-compact-vertical': {
|
||||
[`${token.componentCls}-compact-vertical`]: {
|
||||
...compactItemVerticalBorder(token),
|
||||
...compactItemBorderVerticalRadius(prefixCls),
|
||||
...compactItemBorderVerticalRadius(token.componentCls),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { DerivativeToken } from '../theme/internal';
|
||||
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
import type { DerivativeToken, FullToken } from '../theme/internal';
|
||||
import type { OverrideComponent } from '../theme/util/genComponentStyleHook';
|
||||
|
||||
interface CompactItemOptions {
|
||||
focus?: boolean;
|
||||
@ -75,15 +76,14 @@ function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions)
|
||||
};
|
||||
}
|
||||
|
||||
export function genCompactItemStyle(
|
||||
token: DerivativeToken,
|
||||
prefixCls: string,
|
||||
export function genCompactItemStyle<T extends OverrideComponent>(
|
||||
token: FullToken<T>,
|
||||
options: CompactItemOptions = { focus: true },
|
||||
): CSSObject {
|
||||
): CSSInterpolation {
|
||||
return {
|
||||
'&-compact': {
|
||||
[`${token.componentCls}-compact`]: {
|
||||
...compactItemBorder(token, options),
|
||||
...compactItemBorderRadius(prefixCls, options),
|
||||
...compactItemBorderRadius(token.componentCls, options),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
||||
|
||||
- 卡片式的页签，提供可关闭的样式，常用于容器顶部。
|
||||
- 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
|
||||
- [Radio.Button](/components/radio/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。
|
||||
- [Radio.Button](/components/radio-cn/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。
|
||||
|
||||
## 代码演示
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ author: MadCcc
|
||||
|
||||
|
||||
|
||||
如此便可以引入一个 CSS-in-JS 被诟病已久的问题：我们在编写代码时写的并不是最终的 css，所以每次都需要重新序列化得到 css 后再次计算 hash，这就在每次渲染组件时带来了而外的开销。如果你的页面或者组件带有非常复杂或者大量的 CSS-in-JS 代码，甚至样式会跟随组件的 props 变化，那么这个性能消耗便变得不可忽视。<br />针对这个问题，各个 CSS-in-JS 库会有自己的应对方式，这里就先不做赘述，让我们来看一看 Ant Design 的方案。
|
||||
如此便可以引入一个 CSS-in-JS 被诟病已久的问题：我们在编写代码时写的并不是最终的 css，所以每次都需要重新序列化得到 css 后再次计算 hash，这就在每次渲染组件时带来了额外的开销。如果你的页面或者组件带有非常复杂或者大量的 CSS-in-JS 代码，甚至样式会跟随组件的 props 变化，那么这个性能消耗便变得不可忽视。<br />针对这个问题，各个 CSS-in-JS 库会有自己的应对方式，这里就先不做赘述，让我们来看一看 Ant Design 的方案。
|
||||
|
||||
## 计算 hash
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ date: 2022-12-08
|
||||
author: zombieJ
|
||||
---
|
||||
|
||||
在网页开发中，我们时长会遇到弹出元素的需求，比如 Select 的下拉框、或者是 Modal 组件。直接将其渲染到当前节点下时，可能会被父节点的 `overflow: hidden` 裁剪掉：
|
||||
在网页开发中，我们时常会遇到弹出元素的需求，比如 Select 的下拉框、或者是 Modal 组件。直接将其渲染到当前节点下时，可能会被父节点的 `overflow: hidden` 裁剪掉：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -164,6 +164,13 @@ Use git to save your code and install latest version:
|
||||
npm install --save antd@5.x
|
||||
```
|
||||
|
||||
If you want to use v4 deprecated component like `Comment` or `PageHeader`. You can install `@ant-design/compatible` and `@ant-design/pro-layout` for compatible:
|
||||
|
||||
```bash
|
||||
npm install --save @ant-design/compatible@v5-compatible-v4
|
||||
npm install --save @ant-design/pro-layout
|
||||
```
|
||||
|
||||
You can manually check the code one by one against the above list for modification. In addition, we also provide a codemod cli tool [@ant-design/codemod-v5](https://github.com/ant-design/codemod-v5) To help you quickly upgrade to v5.
|
||||
|
||||
Before running codemod cli, please submit your local code changes.
|
||||
|
||||
@ -156,6 +156,13 @@ title: 从 v4 到 v5
|
||||
npm install --save antd@5.x
|
||||
```
|
||||
|
||||
如果你需要使用 v4 废弃组件如 `Comment`、`PageHeader`，请安装 `@ant-design/compatible` 与 `@ant-design/pro-layout` 做兼容：
|
||||
|
||||
```bash
|
||||
npm install --save @ant-design/compatible@v5-compatible-v4
|
||||
npm install --save @ant-design/pro-layout
|
||||
```
|
||||
|
||||
你可以手动对照上面的列表逐条检查代码进行修改，另外，我们也提供了一个 codemod cli 工具 [@ant-design/codemod-v5](https://github.com/ant-design/codemod-v5) 以帮助你快速升级到 v5 版本。
|
||||
|
||||
在运行 codemod cli 前，请先提交你的本地代码修改。
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "5.0.5",
|
||||
"version": "5.0.6",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"title": "Ant Design",
|
||||
"keywords": [
|
||||
@ -116,6 +116,7 @@
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@ctrl/tinycolor": "^3.4.0",
|
||||
"@rc-component/tour": "~1.0.1-2",
|
||||
"antd-token-previewer": "^1.1.0-21",
|
||||
"classnames": "^2.2.6",
|
||||
"copy-to-clipboard": "^3.2.0",
|
||||
"dayjs": "^1.11.1",
|
||||
@ -194,7 +195,6 @@
|
||||
"@typescript-eslint/eslint-plugin": "^5.40.0",
|
||||
"@typescript-eslint/parser": "^5.40.0",
|
||||
"antd-img-crop": "^4.2.8",
|
||||
"antd-token-previewer": "^1.1.0-6",
|
||||
"array-move": "^4.0.0",
|
||||
"bundlesize2": "^0.0.31",
|
||||
"chalk": "^4.0.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user