mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
site: rewrite with CSS logical properties (#50109)
* site: use CSS logical properties * Update components/anchor/demo/targetOffset.tsx Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> * fix: fix * fix: fix * chore: fix * fix: add more * fix: add more --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
lijianan
GitHub
parent
be3d440959
commit
e8fa5938ab
@ -43,7 +43,7 @@ const useStyle = createStyles(({ token }, markPos: [number, number, number, numb
|
||||
z-index: 999999;
|
||||
box-shadow: 0 0 0 1px #fff;
|
||||
pointer-events: none;
|
||||
left: ${markPos[0] - MARK_BORDER_SIZE}px;
|
||||
inset-inline-start: ${markPos[0] - MARK_BORDER_SIZE}px;
|
||||
top: ${markPos[1] - MARK_BORDER_SIZE}px;
|
||||
width: ${markPos[2] + MARK_BORDER_SIZE * 2}px;
|
||||
height: ${markPos[3] + MARK_BORDER_SIZE * 2}px;
|
||||
|
||||
@ -126,7 +126,7 @@ const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index
|
||||
{/* Decorator */}
|
||||
<div
|
||||
className={styles.cardCircle}
|
||||
style={{ right: (index % 2) * -20 - 20, bottom: (index % 3) * -40 - 20 }}
|
||||
style={{ insetInlineEnd: (index % 2) * -20 - 20, bottom: (index % 3) * -40 - 20 }}
|
||||
/>
|
||||
|
||||
{/* Title */}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { Suspense } from 'react';
|
||||
import { ConfigProvider, Flex, Typography } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
import { useLocation } from 'dumi';
|
||||
|
||||
import useLocale from '../../../../hooks/useLocale';
|
||||
@ -27,6 +28,7 @@ const locales = {
|
||||
|
||||
const useStyle = () => {
|
||||
const { direction } = React.useContext(ConfigProvider.ConfigContext);
|
||||
const { isMobile } = React.useContext(SiteContext);
|
||||
const isRTL = direction === 'rtl';
|
||||
return createStyles(({ token, css, cx }) => {
|
||||
const textShadow = `0 0 4px ${token.colorBgContainer}`;
|
||||
@ -102,11 +104,23 @@ const useStyle = () => {
|
||||
btnWrap: css`
|
||||
margin-bottom: ${token.marginXL}px;
|
||||
`,
|
||||
bgImg: css`
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
`,
|
||||
bgImgTop: css`
|
||||
top: 0;
|
||||
inset-inline-start: ${isMobile ? '-120px' : 0};
|
||||
`,
|
||||
bgImgBottom: css`
|
||||
bottom: 120px;
|
||||
inset-inline-end: ${isMobile ? 0 : '40%'};
|
||||
`,
|
||||
};
|
||||
})();
|
||||
};
|
||||
|
||||
const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
|
||||
const PreviewBanner: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
|
||||
const { children } = props;
|
||||
const [locale] = useLocale(locales);
|
||||
const { styles } = useStyle();
|
||||
@ -118,17 +132,17 @@ const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
|
||||
<GroupMaskLayer>
|
||||
{/* Image Left Top */}
|
||||
<img
|
||||
draggable={false}
|
||||
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"
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
|
||||
draggable={false}
|
||||
className={classNames(styles.bgImg, styles.bgImgTop)}
|
||||
/>
|
||||
{/* Image Right Top */}
|
||||
<img
|
||||
draggable={false}
|
||||
style={{ position: 'absolute', right: isMobile ? 0 : '40%', bottom: 120, width: 240 }}
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
|
||||
alt="bg"
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
|
||||
draggable={false}
|
||||
className={classNames(styles.bgImg, styles.bgImgBottom)}
|
||||
/>
|
||||
|
||||
<div className={styles.holder}>
|
||||
|
||||
@ -14,7 +14,7 @@ const useStyle = createStyles(({ token }) => ({
|
||||
image: css`
|
||||
transition: all ${token.motionDurationSlow};
|
||||
position: absolute;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
QuestionCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { MenuProps, ThemeConfig, GetProp, ColorPickerProps } from 'antd';
|
||||
import type { ColorPickerProps, GetProp, MenuProps, ThemeConfig } from 'antd';
|
||||
import {
|
||||
Breadcrumb,
|
||||
Card,
|
||||
@ -195,23 +195,23 @@ const useStyle = createStyles(({ token, css, cx }) => {
|
||||
position: absolute;
|
||||
`,
|
||||
leftTopImagePos: css`
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: -100px;
|
||||
height: 500px;
|
||||
`,
|
||||
rightBottomPos: css`
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: -100px;
|
||||
height: 287px;
|
||||
`,
|
||||
leftTopImage: css`
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
transform: translate3d(-900px, 0, 0);
|
||||
top: -100px;
|
||||
height: 500px;
|
||||
`,
|
||||
rightBottomImage: css`
|
||||
right: 50%;
|
||||
inset-inline-end: 50%;
|
||||
transform: translate3d(750px, 0, 0);
|
||||
bottom: -100px;
|
||||
height: 287px;
|
||||
|
||||
@ -15,7 +15,7 @@ const Theme = React.lazy(() => import('./components/Theme'));
|
||||
const useStyle = createStyles(() => ({
|
||||
image: css`
|
||||
position: absolute;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: -50px;
|
||||
height: 160px;
|
||||
`,
|
||||
|
||||
@ -50,8 +50,8 @@
|
||||
.mirror-modal-dialog {
|
||||
position: fixed;
|
||||
top: 120px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: 0 auto;
|
||||
width: 420px;
|
||||
display: flex;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import * as AntdIcons from '@ant-design/icons';
|
||||
import { Badge, App } from 'antd';
|
||||
import { App, Badge } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
@ -33,7 +33,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
content: 'Copied!';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
|
||||
@ -9,23 +9,23 @@ const { Paragraph } = Typography;
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
card: css`
|
||||
position: relative;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.${token.antCls}-card-cover {
|
||||
overflow: hidden;
|
||||
|
||||
.ant-card-cover {
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
transition: all ${token.motionDurationSlow} ease-out;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
transform: scale(1.3);
|
||||
`,
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
transition: all ${token.motionDurationSlow} ease-out;
|
||||
}
|
||||
&:hover img {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
`,
|
||||
badge: css`
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
inset-inline-end: 8px;
|
||||
padding: ${token.paddingXXS}px ${token.paddingXS}px;
|
||||
color: #fff;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
|
||||
@ -6,7 +6,7 @@ import classNames from 'classnames';
|
||||
const useStyles = createStyles(({ cx, token }) => {
|
||||
const play = css`
|
||||
position: absolute;
|
||||
right: ${token.paddingLG}px;
|
||||
inset-inline-end: ${token.paddingLG}px;
|
||||
bottom: ${token.paddingLG}px;
|
||||
font-size: 64px;
|
||||
display: flex;
|
||||
|
||||
@ -227,14 +227,14 @@ const useStyle = createStyles(({ token }) => ({
|
||||
title: css`
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
inset-inline-start: 20px;
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
`,
|
||||
tips: css`
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
inset-inline-end: 20px;
|
||||
`,
|
||||
mvp: css`
|
||||
margin-inline-end: ${token.marginMD}px;
|
||||
|
||||
@ -10,7 +10,7 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1.25em;
|
||||
left: 1em;
|
||||
inset-inline-start: 1em;
|
||||
display: block;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
@ -27,7 +27,7 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1.6em;
|
||||
left: 5.5em;
|
||||
inset-inline-start: 5.5em;
|
||||
width: calc(100% - 6em);
|
||||
height: 1.2em;
|
||||
background-color: #fff;
|
||||
|
||||
@ -40,9 +40,9 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -9px;
|
||||
inset-inline-start: -9px;
|
||||
bottom: -5px;
|
||||
right: -9px;
|
||||
inset-inline-end: -9px;
|
||||
}
|
||||
}
|
||||
${antCls}-typography-copy:not(${antCls}-typography-copy-success) {
|
||||
|
||||
@ -176,7 +176,7 @@ ${makeGrayPalette(index + 1)}
|
||||
|
||||
&-item &-value {
|
||||
position: relative;
|
||||
left: 3px;
|
||||
inset-inline-start: 3px;
|
||||
float: right;
|
||||
transform: scale(0.85);
|
||||
transform-origin: 100% 50%;
|
||||
@ -203,7 +203,7 @@ ${makeGrayPalette(index + 1)}
|
||||
|
||||
.main-color:hover {
|
||||
.main-color-value {
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
@ -264,7 +264,7 @@ ${makeGrayPalette(index + 1)}
|
||||
&-value {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform-origin: unset;
|
||||
|
||||
@ -108,7 +108,7 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
a.edit-button {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: -16px;
|
||||
inset-inline-end: -16px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
text-decoration: none;
|
||||
background: inherit;
|
||||
@ -125,8 +125,8 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
}
|
||||
|
||||
${antCls}-row${antCls}-row-rtl & {
|
||||
right: auto;
|
||||
left: -22px;
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: -22px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -184,7 +184,7 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
.code-expand-icon-hide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
@ -193,8 +193,8 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
user-select: none;
|
||||
|
||||
${antCls}-row-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -70,14 +70,14 @@ export default () => {
|
||||
+ svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image-wrapper.good::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
@ -88,7 +88,7 @@ export default () => {
|
||||
.preview-image-wrapper.bad::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
|
||||
@ -11,7 +11,7 @@ export default () => {
|
||||
.nav-phone-icon {
|
||||
position: absolute;
|
||||
bottom: 17px;
|
||||
right: 30px;
|
||||
inset-inline-end: 30px;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
width: 16px;
|
||||
@ -98,8 +98,8 @@ export default () => {
|
||||
.drawer {
|
||||
.ant-menu-inline .ant-menu-item::after,
|
||||
.ant-menu-vertical .ant-menu-item::after {
|
||||
right: auto;
|
||||
left: 0;
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,8 +15,8 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
affixTabs: css`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 1001;
|
||||
padding: 0 40px;
|
||||
background: #fff;
|
||||
|
||||
@ -28,7 +28,7 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`,
|
||||
left: css`
|
||||
leftCard: css`
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
@ -117,7 +117,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
|
||||
card,
|
||||
bigTitle,
|
||||
cardBody,
|
||||
left,
|
||||
leftCard,
|
||||
title,
|
||||
subTitle,
|
||||
logo,
|
||||
@ -136,7 +136,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
|
||||
<>
|
||||
<Divider />
|
||||
<div className={cardBody}>
|
||||
<div className={left}>
|
||||
<div className={leftCard}>
|
||||
<img draggable={false} src={ANTD_IMG_URL} alt="antd" />
|
||||
<div>
|
||||
<p className={title}>Ant Design</p>
|
||||
@ -170,7 +170,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
|
||||
<>
|
||||
<Divider />
|
||||
<div className={cardBody}>
|
||||
<div className={left}>
|
||||
<div className={leftCard}>
|
||||
<img draggable={false} src={ANTD_IMG_URL} alt="antd" />
|
||||
<div>
|
||||
<p className={title}>Ant Design</p>
|
||||
@ -204,7 +204,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
|
||||
<>
|
||||
<Divider />
|
||||
<div className={cardBody}>
|
||||
<div className={left}>
|
||||
<div className={leftCard}>
|
||||
<img draggable={false} src={ANTD_IMG_URL} alt="antd" />
|
||||
<div>
|
||||
<p className={title}>Ant Design</p>
|
||||
|
||||
@ -23,8 +23,8 @@ const locales = {
|
||||
const useStyle = createStyles(({ css, token }) => ({
|
||||
container: css`
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 99999999;
|
||||
|
||||
@ -69,7 +69,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
color: ${colorText};
|
||||
`,
|
||||
label1Style: css`
|
||||
left: -5%;
|
||||
inset-inline-start: -5%;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background-color: ${colorText};
|
||||
@ -78,7 +78,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
transform-origin: 0 0;
|
||||
`,
|
||||
label2Style: css`
|
||||
right: -5%;
|
||||
inset-inline-end: -5%;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
transform: scale(0.5);
|
||||
|
||||
@ -770,7 +770,7 @@ exports[`renders components/anchor/demo/targetOffset.tsx extend context correctl
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="height: 30vh; background: rgba(0, 0, 0, 0.85); position: fixed; top: 0px; left: 0px; width: 75%; color: rgb(255, 255, 255);"
|
||||
style="height: 30vh; background-color: rgba(0, 0, 0, 0.85); position: fixed; top: 0px; inset-inline-start: 0; width: 75%; color: rgb(255, 255, 255);"
|
||||
>
|
||||
<div>
|
||||
Fixed Top Block
|
||||
|
||||
@ -742,7 +742,7 @@ exports[`renders components/anchor/demo/targetOffset.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="height:30vh;background:rgba(0,0,0,0.85);position:fixed;top:0;left:0;width:75%;color:#FFF"
|
||||
style="height:30vh;background-color:rgba(0, 0, 0, 0.85);position:fixed;top:0;inset-inline-start:0;width:75%;color:#fff"
|
||||
>
|
||||
<div>
|
||||
Fixed Top Block
|
||||
|
||||
@ -1,6 +1,16 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Anchor, Col, Row } from 'antd';
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
height: '30vh',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.85)',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
insetInlineStart: 0,
|
||||
width: '75%',
|
||||
color: '#fff',
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const topRef = React.useRef<HTMLDivElement>(null);
|
||||
const [targetOffset, setTargetOffset] = useState<number>();
|
||||
@ -30,38 +40,14 @@ const App: React.FC = () => {
|
||||
<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',
|
||||
},
|
||||
{ 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 style={style} ref={topRef}>
|
||||
<div>Fixed Top Block</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,7 +17,7 @@ Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spe
|
||||
}
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item {
|
||||
padding-left: 16px;
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
|
||||
|
||||
@ -8,28 +8,18 @@ export interface UnitNumberProps {
|
||||
current?: boolean;
|
||||
}
|
||||
|
||||
function UnitNumber({ prefixCls, value, current, offset = 0 }: UnitNumberProps) {
|
||||
const UnitNumber: React.FC<Readonly<UnitNumberProps>> = (props) => {
|
||||
const { prefixCls, value, current, offset = 0 } = props;
|
||||
let style: React.CSSProperties | undefined;
|
||||
|
||||
if (offset) {
|
||||
style = {
|
||||
position: 'absolute',
|
||||
top: `${offset}00%`,
|
||||
left: 0,
|
||||
};
|
||||
style = { position: 'absolute', top: `${offset}00%`, left: 0 };
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
style={style}
|
||||
className={classNames(`${prefixCls}-only-unit`, {
|
||||
current,
|
||||
})}
|
||||
>
|
||||
<span style={style} className={classNames(`${prefixCls}-only-unit`, { current })}>
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export interface SingleNumberProps {
|
||||
prefixCls: string;
|
||||
@ -49,7 +39,7 @@ function getOffset(start: number, end: number, unit: -1 | 1) {
|
||||
return offset;
|
||||
}
|
||||
|
||||
export default function SingleNumber(props: SingleNumberProps) {
|
||||
const SingleNumber: React.FC<Readonly<SingleNumberProps>> = (props) => {
|
||||
const { prefixCls, count: originCount, value: originValue } = props;
|
||||
const value = Number(originValue);
|
||||
const count = Math.abs(originCount);
|
||||
@ -57,20 +47,15 @@ export default function SingleNumber(props: SingleNumberProps) {
|
||||
const [prevCount, setPrevCount] = React.useState(count);
|
||||
|
||||
// ============================= Events =============================
|
||||
const onTransitionEnd = () => {
|
||||
const onTransitionEnd: React.TransitionEventHandler<HTMLSpanElement> = () => {
|
||||
setPrevValue(value);
|
||||
setPrevCount(count);
|
||||
};
|
||||
|
||||
// Fallback if transition events are not supported
|
||||
React.useEffect(() => {
|
||||
const timeout = setTimeout(() => {
|
||||
onTransitionEnd();
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
const timer = setTimeout(onTransitionEnd, 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [value]);
|
||||
|
||||
// ============================= Render =============================
|
||||
@ -121,4 +106,6 @@ export default function SingleNumber(props: SingleNumberProps) {
|
||||
{unitNodes}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default SingleNumber;
|
||||
|
||||
@ -24,15 +24,15 @@ const useStyle = createStyles(({ token, css, cx }) => {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
max-width: 40px;
|
||||
max-height: 40px;
|
||||
background: transparent;
|
||||
transition: background 300ms;
|
||||
transition: background-color 300ms;
|
||||
border-radius: ${token.borderRadiusOuter}px;
|
||||
border: 1px solid transparent;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -324,7 +324,7 @@ exports[`renders components/collapse/demo/borderless.tsx extend context correctl
|
||||
class="ant-collapse-content-box"
|
||||
>
|
||||
<p
|
||||
style="padding-left: 24px;"
|
||||
style="padding-inline-start: 24px;"
|
||||
>
|
||||
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
|
||||
</p>
|
||||
|
||||
@ -320,7 +320,7 @@ exports[`renders components/collapse/demo/borderless.tsx correctly 1`] = `
|
||||
class="ant-collapse-content-box"
|
||||
>
|
||||
<p
|
||||
style="padding-left:24px"
|
||||
style="padding-inline-start:24px"
|
||||
>
|
||||
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
|
||||
</p>
|
||||
|
||||
@ -3,7 +3,7 @@ import type { CollapseProps } from 'antd';
|
||||
import { Collapse } from 'antd';
|
||||
|
||||
const text = (
|
||||
<p style={{ paddingLeft: 24 }}>
|
||||
<p style={{ paddingInlineStart: 24 }}>
|
||||
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found
|
||||
as a welcome guest in many households across the world.
|
||||
</p>
|
||||
|
||||
@ -6077,7 +6077,7 @@ exports[`renders components/color-picker/demo/presets.tsx extend context correct
|
||||
|
||||
exports[`renders components/color-picker/demo/pure-panel.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
style="padding-left: 100px;"
|
||||
style="padding-inline-start: 100px;"
|
||||
>
|
||||
<div
|
||||
style="padding-bottom: 0px; position: relative; min-width: 0;"
|
||||
|
||||
@ -292,7 +292,7 @@ exports[`renders components/color-picker/demo/presets.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/color-picker/demo/pure-panel.tsx correctly 1`] = `
|
||||
<div
|
||||
style="padding-left:100px"
|
||||
style="padding-inline-start:100px"
|
||||
>
|
||||
<div
|
||||
style="padding-bottom:0;position:relative;min-width:0"
|
||||
|
||||
@ -9,7 +9,7 @@ type Color = GetProp<ColorPickerProps, 'value'>;
|
||||
const Demo: React.FC = () => {
|
||||
const [color, setColor] = useState<Color>('#1677ff');
|
||||
return (
|
||||
<div style={{ paddingLeft: 100 }}>
|
||||
<div style={{ paddingInlineStart: 100 }}>
|
||||
<PureRenderColorPicker value={color} onChange={setColor} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -9,13 +9,13 @@ Components which support rtl direction are listed here, you can toggle the direc
|
||||
```css
|
||||
.button-demo .ant-btn,
|
||||
.button-demo .ant-btn-group {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.button-demo .ant-btn-group > .ant-btn,
|
||||
.button-demo .ant-btn-group > span > .ant-btn {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.head-example {
|
||||
@ -28,10 +28,11 @@ Components which support rtl direction are listed here, you can toggle the direc
|
||||
}
|
||||
|
||||
.ant-badge:not(.ant-badge-not-a-wrapper) {
|
||||
margin-right: 20px;
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
|
||||
.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -492,17 +492,13 @@ const App: React.FC = () => {
|
||||
const changeDirection = (e: RadioChangeEvent) => {
|
||||
const directionValue = e.target.value;
|
||||
setDirection(directionValue);
|
||||
if (directionValue === 'rtl') {
|
||||
setPlacement('bottomRight');
|
||||
} else {
|
||||
setPlacement('bottomLeft');
|
||||
}
|
||||
setPlacement(directionValue === 'rtl' ? 'bottomRight' : 'bottomLeft');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span style={{ marginRight: 16 }}>Change direction of components:</span>
|
||||
<span style={{ marginInlineEnd: 16 }}>Change direction of components:</span>
|
||||
<Radio.Group defaultValue="ltr" onChange={changeDirection}>
|
||||
<Radio.Button key="ltr" value="ltr">
|
||||
LTR
|
||||
|
||||
@ -223,7 +223,7 @@ const App: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span style={{ marginRight: 16 }}>Change locale of components:</span>
|
||||
<span style={{ marginInlineEnd: 16 }}>Change locale of components:</span>
|
||||
<Radio.Group value={locale} onChange={changeLocale}>
|
||||
<Radio.Button key="en" value={enUS}>
|
||||
English
|
||||
|
||||
@ -21589,7 +21589,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
|
||||
</div>
|
||||
<span
|
||||
class="ant-form-text"
|
||||
style="margin-left: 8px;"
|
||||
style="margin-inline-start: 8px;"
|
||||
>
|
||||
machines
|
||||
</span>
|
||||
|
||||
@ -9012,7 +9012,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
|
||||
</div>
|
||||
<span
|
||||
class="ant-form-text"
|
||||
style="margin-left:8px"
|
||||
style="margin-inline-start:8px"
|
||||
>
|
||||
machines
|
||||
</span>
|
||||
|
||||
@ -80,7 +80,7 @@ const App: React.FC = () => (
|
||||
<Form.Item name="input-number" noStyle>
|
||||
<InputNumber min={1} max={10} />
|
||||
</Form.Item>
|
||||
<span className="ant-form-text" style={{ marginLeft: 8 }}>
|
||||
<span className="ant-form-text" style={{ marginInlineStart: 8 }}>
|
||||
machines
|
||||
</span>
|
||||
</Form.Item>
|
||||
|
||||
@ -10,7 +10,7 @@ You can customize the toolbar and add a button for downloading the original imag
|
||||
.toolbar-wrapper {
|
||||
position: fixed;
|
||||
bottom: 32px;
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
padding: 0px 24px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
|
||||
@ -155,7 +155,7 @@ exports[`renders components/layout/demo/component-token.tsx extend context corre
|
||||
class="demo-logo"
|
||||
/>
|
||||
<div
|
||||
style="margin-left: 24px; font-size: 24px;"
|
||||
style="margin-inline-start: 24px; font-size: 24px;"
|
||||
>
|
||||
Ant Design
|
||||
</div>
|
||||
@ -1353,7 +1353,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
|
||||
>
|
||||
<aside
|
||||
class="ant-layout-sider ant-layout-sider-dark"
|
||||
style="overflow: auto; height: 100vh; position: fixed; left: 0px; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
|
||||
style="overflow: auto; height: 100vh; position: fixed; inset-inline-start: 0; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
|
||||
>
|
||||
<div
|
||||
class="ant-layout-sider-children"
|
||||
@ -1768,7 +1768,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
|
||||
</aside>
|
||||
<div
|
||||
class="ant-layout"
|
||||
style="margin-left: 200px;"
|
||||
style="margin-inline-start: 200px;"
|
||||
>
|
||||
<header
|
||||
class="ant-layout-header"
|
||||
|
||||
@ -153,7 +153,7 @@ exports[`renders components/layout/demo/component-token.tsx correctly 1`] = `
|
||||
class="demo-logo"
|
||||
/>
|
||||
<div
|
||||
style="margin-left:24px;font-size:24px"
|
||||
style="margin-inline-start:24px;font-size:24px"
|
||||
>
|
||||
Ant Design
|
||||
</div>
|
||||
@ -747,7 +747,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
|
||||
>
|
||||
<aside
|
||||
class="ant-layout-sider ant-layout-sider-dark"
|
||||
style="overflow:auto;height:100vh;position:fixed;left:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-color:unset;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
|
||||
style="overflow:auto;height:100vh;position:fixed;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-color:unset;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
|
||||
>
|
||||
<div
|
||||
class="ant-layout-sider-children"
|
||||
@ -1018,7 +1018,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
|
||||
</aside>
|
||||
<div
|
||||
class="ant-layout"
|
||||
style="margin-left:200px"
|
||||
style="margin-inline-start:200px"
|
||||
>
|
||||
<header
|
||||
class="ant-layout-header"
|
||||
|
||||
@ -48,7 +48,7 @@ const App: React.FC = () => {
|
||||
<Layout>
|
||||
<Header style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div className="demo-logo" />
|
||||
<div style={{ marginLeft: 24, fontSize: 24 }}>Ant Design</div>
|
||||
<div style={{ marginInlineStart: 24, fontSize: 24 }}>Ant Design</div>
|
||||
</Header>
|
||||
<Layout>
|
||||
<Sider width={200} style={{ background: colorBgContainer }}>
|
||||
|
||||
@ -18,7 +18,7 @@ const siderStyle: React.CSSProperties = {
|
||||
overflow: 'auto',
|
||||
height: '100vh',
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
insetInlineStart: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
scrollbarWidth: 'thin',
|
||||
@ -51,7 +51,7 @@ const App: React.FC = () => {
|
||||
<div className="demo-logo-vertical" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
|
||||
</Sider>
|
||||
<Layout style={{ marginLeft: 200 }}>
|
||||
<Layout style={{ marginInlineStart: 200 }}>
|
||||
<Header style={{ padding: 0, background: colorBgContainer }} />
|
||||
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
|
||||
<div
|
||||
|
||||
@ -8,15 +8,16 @@ There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }`
|
||||
|
||||
<style>
|
||||
#popconfirm-demo-placement .ant-btn {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 8px;
|
||||
margin-bottom: 8px;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#popconfirm-demo-placement .ant-btn-rtl {
|
||||
margin-left: 8px;
|
||||
margin-right: 0;
|
||||
margin-inline-start: 8px;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,7 +18,7 @@ const App: React.FC = () => {
|
||||
<Radio value={3}>Option C</Radio>
|
||||
<Radio value={4}>
|
||||
More...
|
||||
{value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
|
||||
{value === 4 ? <Input style={{ width: 100, marginInlineStart: 10 }} /> : null}
|
||||
</Radio>
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
|
||||
@ -9134,7 +9134,7 @@ exports[`renders components/select/demo/placement-debug.tsx extend context corre
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="position: absolute; top: 0px; left: 50%; transform: translateX(-50%);"
|
||||
style="position: absolute; top: 0px; inset-inline-start: 50%; transform: translateX(-50%);"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
|
||||
@ -3150,7 +3150,7 @@ exports[`renders components/select/demo/placement-debug.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="position:absolute;top:0;left:50%;transform:translateX(-50%)"
|
||||
style="position:absolute;top:0;inset-inline-start:50%;transform:translateX(-50%)"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
|
||||
@ -35,7 +35,14 @@ const App: React.FC = () => {
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Space style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)' }}>
|
||||
<Space
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineStart: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
}}
|
||||
>
|
||||
<Radio.Group value={placement} onChange={placementChange}>
|
||||
<Radio.Button value="topLeft">TL</Radio.Button>
|
||||
<Radio.Button value="topRight">TR</Radio.Button>
|
||||
|
||||
@ -234,7 +234,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display: inline-block; height: 300px; margin-left: 70px;"
|
||||
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
@ -282,7 +282,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display: inline-block; height: 300px; margin-left: 70px;"
|
||||
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
@ -344,7 +344,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display: inline-block; height: 300px; margin-left: 70px;"
|
||||
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical ant-slider-with-marks"
|
||||
@ -1845,7 +1845,7 @@ exports[`renders components/slider/demo/tip-formatter.tsx extend context correct
|
||||
exports[`renders components/slider/demo/vertical.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
style="display: inline-block; height: 300px; margin-left: 70px;"
|
||||
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
@ -1893,7 +1893,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display: inline-block; height: 300px; margin-left: 70px;"
|
||||
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
@ -1955,7 +1955,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display: inline-block; height: 300px; margin-left: 70px;"
|
||||
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical ant-slider-with-marks"
|
||||
|
||||
@ -160,7 +160,7 @@ Array [
|
||||
/>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;height:300px;margin-left:70px"
|
||||
style="display:inline-block;height:300px;margin-inline-start:70px"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
@ -189,7 +189,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;height:300px;margin-left:70px"
|
||||
style="display:inline-block;height:300px;margin-inline-start:70px"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
@ -234,7 +234,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;height:300px;margin-left:70px"
|
||||
style="display:inline-block;height:300px;margin-inline-start:70px"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical ant-slider-with-marks"
|
||||
@ -1359,7 +1359,7 @@ Array [
|
||||
exports[`renders components/slider/demo/vertical.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
style="display:inline-block;height:300px;margin-left:70px"
|
||||
style="display:inline-block;height:300px;margin-inline-start:70px"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
@ -1388,7 +1388,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;height:300px;margin-left:70px"
|
||||
style="display:inline-block;height:300px;margin-inline-start:70px"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical"
|
||||
@ -1433,7 +1433,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="display:inline-block;height:300px;margin-left:70px"
|
||||
style="display:inline-block;height:300px;margin-inline-start:70px"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-vertical ant-slider-with-marks"
|
||||
|
||||
@ -4,7 +4,7 @@ import { ConfigProvider, Slider } from 'antd';
|
||||
const style: React.CSSProperties = {
|
||||
display: 'inline-block',
|
||||
height: 300,
|
||||
marginLeft: 70,
|
||||
marginInlineStart: 70,
|
||||
};
|
||||
|
||||
const marks = {
|
||||
|
||||
@ -9,7 +9,7 @@ You can add an icon beside the slider to make it meaningful.
|
||||
```css
|
||||
.icon-wrapper {
|
||||
position: relative;
|
||||
padding: 0px 30px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.icon-wrapper .anticon {
|
||||
@ -27,10 +27,10 @@ You can add an icon beside the slider to make it meaningful.
|
||||
}
|
||||
|
||||
.icon-wrapper .anticon:first-child {
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.icon-wrapper .anticon:last-child {
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
```
|
||||
|
||||
@ -5,7 +5,7 @@ import type { SliderSingleProps } from 'antd';
|
||||
const style: React.CSSProperties = {
|
||||
display: 'inline-block',
|
||||
height: 300,
|
||||
marginLeft: 70,
|
||||
marginInlineStart: 70,
|
||||
};
|
||||
|
||||
const marks: SliderSingleProps['marks'] = {
|
||||
|
||||
@ -8,11 +8,11 @@ You can add extra actions to the right or left or even both side of Tabs.
|
||||
|
||||
```css
|
||||
.tabs-extra-demo-button {
|
||||
margin-right: 16px;
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
|
||||
.ant-row-rtl .tabs-extra-demo-button {
|
||||
margin-right: 0;
|
||||
margin-left: 16px;
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user