site: rewrite with CSS logical properties again (#50113)

* 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

* site: rewrite with CSS logical properties

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
lijianan 2024-07-29 01:33:18 +08:00 committed by GitHub
parent 836d1bbbad
commit 2e4b9cb098
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
26 changed files with 85 additions and 77 deletions

View File

@ -86,7 +86,7 @@ const MultiDrawer: React.FC<DrawerPropsType> = (props) => {
borderRadius: '0 0 4px 4px', borderRadius: '0 0 4px 4px',
}} }}
> >
<Button style={{ marginRight: 8 }} onClick={onClose}> <Button style={{ marginInlineEnd: 8 }} onClick={onClose}>
Cancel Cancel
</Button> </Button>
<Button onClick={onClose} type="primary"> <Button onClick={onClose} type="primary">

View File

@ -9,8 +9,8 @@ Use a form in Drawer with a submit button.
```css ```css
.site-form-in-drawer-wrapper { .site-form-in-drawer-wrapper {
position: absolute; position: absolute;
right: 0px; inset-inline-end: 0;
bottom: 0px; bottom: 0;
width: 100%; width: 100%;
padding: 10px 16px; padding: 10px 16px;
text-align: right; text-align: right;

View File

@ -24,7 +24,7 @@ Use Drawer to quickly preview details of an object, such as those in a list.
.site-description-item-profile-p-label { .site-description-item-profile-p-label {
display: inline-block; display: inline-block;
margin-right: 8px; margin-inline-end: 8px;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
} }
``` ```

View File

@ -34,7 +34,7 @@ exports[`renders components/float-button/demo/badge.tsx extend context correctly
Array [ Array [
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle" class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
style="right: 164px;" style="inset-inline-end: 164px;"
type="button" type="button"
> >
<span <span
@ -79,7 +79,7 @@ Array [
</button>, </button>,
<div <div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow" class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
style="right: 94px;" style="inset-inline-end: 94px;"
> >
<a <a
class="ant-float-btn ant-float-btn-default ant-float-btn-circle" class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -554,7 +554,7 @@ exports[`renders components/float-button/demo/controlled.tsx extend context corr
Array [ Array [
<div <div
class="ant-float-btn-group ant-float-btn-group-circle" class="ant-float-btn-group ant-float-btn-group-circle"
style="right: 24px;" style="inset-inline-end: 24px;"
> >
<div <div
class="ant-float-btn-group-wrap-appear ant-float-btn-group-wrap-appear-start ant-float-btn-group-wrap ant-float-btn-group-wrap" class="ant-float-btn-group-wrap-appear ant-float-btn-group-wrap-appear-start ant-float-btn-group-wrap ant-float-btn-group-wrap"
@ -709,7 +709,7 @@ exports[`renders components/float-button/demo/description.tsx extend context cor
Array [ Array [
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-square" class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right: 24px;" style="inset-inline-end: 24px;"
type="button" type="button"
> >
<div <div
@ -751,7 +751,7 @@ Array [
</button>, </button>,
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-square" class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right: 94px;" style="inset-inline-end: 94px;"
type="button" type="button"
> >
<div <div
@ -770,7 +770,7 @@ Array [
</button>, </button>,
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-square" class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right: 164px;" style="inset-inline-end: 164px;"
type="button" type="button"
> >
<div <div
@ -819,7 +819,7 @@ exports[`renders components/float-button/demo/group.tsx extend context correctly
Array [ Array [
<div <div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow" class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
style="right: 24px;" style="inset-inline-end: 24px;"
> >
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle" class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -935,7 +935,7 @@ Array [
</div>, </div>,
<div <div
class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow" class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
style="right: 94px;" style="inset-inline-end: 94px;"
> >
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-square" class="ant-float-btn ant-float-btn-default ant-float-btn-square"
@ -1094,7 +1094,7 @@ exports[`renders components/float-button/demo/group-menu.tsx extend context corr
Array [ Array [
<div <div
class="ant-float-btn-group ant-float-btn-group-circle" class="ant-float-btn-group ant-float-btn-group-circle"
style="right: 24px;" style="inset-inline-end: 24px;"
> >
<button <button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle" class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1135,7 +1135,7 @@ Array [
</div>, </div>,
<div <div
class="ant-float-btn-group ant-float-btn-group-circle" class="ant-float-btn-group ant-float-btn-group-circle"
style="right: 94px;" style="inset-inline-end: 94px;"
> >
<button <button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle" class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1579,7 +1579,7 @@ exports[`renders components/float-button/demo/shape.tsx extend context correctly
Array [ Array [
<button <button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle" class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
style="right: 94px;" style="inset-inline-end: 94px;"
type="button" type="button"
> >
<div <div
@ -1616,7 +1616,7 @@ Array [
</button>, </button>,
<button <button
class="ant-float-btn ant-float-btn-primary ant-float-btn-square" class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
style="right: 24px;" style="inset-inline-end: 24px;"
type="button" type="button"
> >
<div <div
@ -1722,7 +1722,7 @@ exports[`renders components/float-button/demo/type.tsx extend context correctly
Array [ Array [
<button <button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle" class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
style="right: 24px;" style="inset-inline-end: 24px;"
type="button" type="button"
> >
<div <div
@ -1762,7 +1762,7 @@ Array [
</button>, </button>,
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle" class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
style="right: 94px;" style="inset-inline-end: 94px;"
type="button" type="button"
> >
<div <div

View File

@ -32,7 +32,7 @@ exports[`renders components/float-button/demo/badge.tsx correctly 1`] = `
Array [ Array [
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle" class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
style="right:164px" style="inset-inline-end:164px"
type="button" type="button"
> >
<span <span
@ -77,7 +77,7 @@ Array [
</button>, </button>,
<div <div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow" class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
style="right:94px" style="inset-inline-end:94px"
> >
<a <a
class="ant-float-btn ant-float-btn-default ant-float-btn-circle" class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -506,7 +506,7 @@ exports[`renders components/float-button/demo/controlled.tsx correctly 1`] = `
Array [ Array [
<div <div
class="ant-float-btn-group ant-float-btn-group-circle" class="ant-float-btn-group ant-float-btn-group-circle"
style="right:24px" style="inset-inline-end:24px"
> >
<div <div
class="ant-float-btn-group-wrap" class="ant-float-btn-group-wrap"
@ -659,7 +659,7 @@ exports[`renders components/float-button/demo/description.tsx correctly 1`] = `
Array [ Array [
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-square" class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right:24px" style="inset-inline-end:24px"
type="button" type="button"
> >
<div <div
@ -701,7 +701,7 @@ Array [
</button>, </button>,
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-square" class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right:94px" style="inset-inline-end:94px"
type="button" type="button"
> >
<div <div
@ -720,7 +720,7 @@ Array [
</button>, </button>,
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-square" class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right:164px" style="inset-inline-end:164px"
type="button" type="button"
> >
<div <div
@ -767,7 +767,7 @@ exports[`renders components/float-button/demo/group.tsx correctly 1`] = `
Array [ Array [
<div <div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow" class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
style="right:24px" style="inset-inline-end:24px"
> >
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle" class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -883,7 +883,7 @@ Array [
</div>, </div>,
<div <div
class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow" class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
style="right:94px" style="inset-inline-end:94px"
> >
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-square" class="ant-float-btn ant-float-btn-default ant-float-btn-square"
@ -1040,7 +1040,7 @@ exports[`renders components/float-button/demo/group-menu.tsx correctly 1`] = `
Array [ Array [
<div <div
class="ant-float-btn-group ant-float-btn-group-circle" class="ant-float-btn-group ant-float-btn-group-circle"
style="right:24px" style="inset-inline-end:24px"
> >
<button <button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle" class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1081,7 +1081,7 @@ Array [
</div>, </div>,
<div <div
class="ant-float-btn-group ant-float-btn-group-circle" class="ant-float-btn-group ant-float-btn-group-circle"
style="right:94px" style="inset-inline-end:94px"
> >
<button <button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle" class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1521,7 +1521,7 @@ exports[`renders components/float-button/demo/shape.tsx correctly 1`] = `
Array [ Array [
<button <button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle" class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
style="right:94px" style="inset-inline-end:94px"
type="button" type="button"
> >
<div <div
@ -1558,7 +1558,7 @@ Array [
</button>, </button>,
<button <button
class="ant-float-btn ant-float-btn-primary ant-float-btn-square" class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
style="right:24px" style="inset-inline-end:24px"
type="button" type="button"
> >
<div <div
@ -1639,7 +1639,7 @@ exports[`renders components/float-button/demo/type.tsx correctly 1`] = `
Array [ Array [
<button <button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle" class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
style="right:24px" style="inset-inline-end:24px"
type="button" type="button"
> >
<div <div
@ -1679,7 +1679,7 @@ Array [
</button>, </button>,
<button <button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle" class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
style="right:94px" style="inset-inline-end:94px"
type="button" type="button"
> >
<div <div

View File

@ -4,8 +4,8 @@ import { FloatButton } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<FloatButton shape="circle" badge={{ dot: true }} style={{ right: 24 + 70 + 70 }} /> <FloatButton shape="circle" style={{ insetInlineEnd: 24 + 70 + 70 }} badge={{ dot: true }} />
<FloatButton.Group shape="circle" style={{ right: 24 + 70 }}> <FloatButton.Group shape="circle" style={{ insetInlineEnd: 24 + 70 }}>
<FloatButton <FloatButton
href="https://ant.design/index-cn" href="https://ant.design/index-cn"
tooltip={<div>custom badge color</div>} tooltip={<div>custom badge color</div>}

View File

@ -14,7 +14,7 @@ const App: React.FC = () => {
<FloatButton.Group <FloatButton.Group
open={open} open={open}
trigger="click" trigger="click"
style={{ right: 24 }} style={{ insetInlineEnd: 24 }}
icon={<CustomerServiceOutlined />} icon={<CustomerServiceOutlined />}
> >
<FloatButton /> <FloatButton />

View File

@ -8,14 +8,14 @@ const App: React.FC = () => (
icon={<FileTextOutlined />} icon={<FileTextOutlined />}
description="HELP INFO" description="HELP INFO"
shape="square" shape="square"
style={{ right: 24 }} style={{ insetInlineEnd: 24 }}
/> />
<FloatButton description="HELP INFO" shape="square" style={{ right: 94 }} /> <FloatButton description="HELP INFO" shape="square" style={{ insetInlineEnd: 94 }} />
<FloatButton <FloatButton
icon={<FileTextOutlined />} icon={<FileTextOutlined />}
description="HELP" description="HELP"
shape="square" shape="square"
style={{ right: 164 }} style={{ insetInlineEnd: 164 }}
/> />
</> </>
); );

View File

@ -7,7 +7,7 @@ const App: React.FC = () => (
<FloatButton.Group <FloatButton.Group
trigger="click" trigger="click"
type="primary" type="primary"
style={{ right: 24 }} style={{ insetInlineEnd: 24 }}
icon={<CustomerServiceOutlined />} icon={<CustomerServiceOutlined />}
> >
<FloatButton /> <FloatButton />
@ -16,7 +16,7 @@ const App: React.FC = () => (
<FloatButton.Group <FloatButton.Group
trigger="hover" trigger="hover"
type="primary" type="primary"
style={{ right: 94 }} style={{ insetInlineEnd: 94 }}
icon={<CustomerServiceOutlined />} icon={<CustomerServiceOutlined />}
> >
<FloatButton /> <FloatButton />

View File

@ -4,12 +4,12 @@ import { FloatButton } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<FloatButton.Group shape="circle" style={{ right: 24 }}> <FloatButton.Group shape="circle" style={{ insetInlineEnd: 24 }}>
<FloatButton icon={<QuestionCircleOutlined />} /> <FloatButton icon={<QuestionCircleOutlined />} />
<FloatButton /> <FloatButton />
<FloatButton.BackTop visibilityHeight={0} /> <FloatButton.BackTop visibilityHeight={0} />
</FloatButton.Group> </FloatButton.Group>
<FloatButton.Group shape="square" style={{ right: 94 }}> <FloatButton.Group shape="square" style={{ insetInlineEnd: 94 }}>
<FloatButton icon={<QuestionCircleOutlined />} /> <FloatButton icon={<QuestionCircleOutlined />} />
<FloatButton /> <FloatButton />
<FloatButton icon={<SyncOutlined />} /> <FloatButton icon={<SyncOutlined />} />

View File

@ -7,13 +7,13 @@ const App: React.FC = () => (
<FloatButton <FloatButton
shape="circle" shape="circle"
type="primary" type="primary"
style={{ right: 94 }} style={{ insetInlineEnd: 94 }}
icon={<CustomerServiceOutlined />} icon={<CustomerServiceOutlined />}
/> />
<FloatButton <FloatButton
shape="square" shape="square"
type="primary" type="primary"
style={{ right: 24 }} style={{ insetInlineEnd: 24 }}
icon={<CustomerServiceOutlined />} icon={<CustomerServiceOutlined />}
/> />
</> </>

View File

@ -4,8 +4,8 @@ import { FloatButton } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<FloatButton icon={<QuestionCircleOutlined />} type="primary" style={{ right: 24 }} /> <FloatButton icon={<QuestionCircleOutlined />} type="primary" style={{ insetInlineEnd: 24 }} />
<FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ right: 94 }} /> <FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ insetInlineEnd: 94 }} />
</> </>
); );

View File

@ -10,6 +10,6 @@ async.
.antd-demo-dynamic-option img { .antd-demo-dynamic-option img {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 8px; margin-inline-end: 8px;
} }
</style> </style>

View File

@ -43,10 +43,7 @@ const App: React.FC = () => {
<Modal <Modal
title={ title={
<div <div
style={{ style={{ width: '100%', cursor: 'move' }}
width: '100%',
cursor: 'move',
}}
onMouseOver={() => { onMouseOver={() => {
if (disabled) { if (disabled) {
setDisabled(false); setDisabled(false);

View File

@ -1153,7 +1153,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
<div> <div>
<div <div
class="ant-segmented ant-segmented-lg" class="ant-segmented ant-segmented-lg"
style="margin-right: 6px;" style="margin-inline-end: 6px;"
> >
<div <div
class="ant-segmented-group" class="ant-segmented-group"
@ -1215,7 +1215,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
<div> <div>
<div <div
class="ant-segmented" class="ant-segmented"
style="margin-right: 6px;" style="margin-inline-end: 6px;"
> >
<div <div
class="ant-segmented-group" class="ant-segmented-group"
@ -1276,7 +1276,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
<div> <div>
<div <div
class="ant-segmented ant-segmented-sm" class="ant-segmented ant-segmented-sm"
style="margin-right: 6px;" style="margin-inline-end: 6px;"
> >
<div <div
class="ant-segmented-group" class="ant-segmented-group"

View File

@ -1133,7 +1133,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
<div> <div>
<div <div
class="ant-segmented ant-segmented-lg" class="ant-segmented ant-segmented-lg"
style="margin-right:6px" style="margin-inline-end:6px"
> >
<div <div
class="ant-segmented-group" class="ant-segmented-group"
@ -1195,7 +1195,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
<div> <div>
<div <div
class="ant-segmented" class="ant-segmented"
style="margin-right:6px" style="margin-inline-end:6px"
> >
<div <div
class="ant-segmented-group" class="ant-segmented-group"
@ -1256,7 +1256,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
<div> <div>
<div <div
class="ant-segmented ant-segmented-sm" class="ant-segmented ant-segmented-sm"
style="margin-right:6px" style="margin-inline-end:6px"
> >
<div <div
class="ant-segmented-group" class="ant-segmented-group"

View File

@ -4,17 +4,29 @@ import { Button, Flex, Input, Segmented, Select } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="small" vertical> <Flex gap="small" vertical>
<div> <div>
<Segmented style={{ marginRight: 6 }} size="large" options={['Daily', 'Weekly', 'Monthly']} /> <Segmented
size="large"
style={{ marginInlineEnd: 6 }}
options={['Daily', 'Weekly', 'Monthly']}
/>
<Button type="primary" size="large"> <Button type="primary" size="large">
Button Button
</Button> </Button>
</div> </div>
<div> <div>
<Segmented style={{ marginRight: 6 }} options={['Daily', 'Weekly', 'Monthly']} /> <Segmented
size="middle"
style={{ marginInlineEnd: 6 }}
options={['Daily', 'Weekly', 'Monthly']}
/>
<Input placeholder="default size" style={{ width: 150 }} /> <Input placeholder="default size" style={{ width: 150 }} />
</div> </div>
<div> <div>
<Segmented style={{ marginRight: 6 }} size="small" options={['Daily', 'Weekly', 'Monthly']} /> <Segmented
size="small"
style={{ marginInlineEnd: 6 }}
options={['Daily', 'Weekly', 'Monthly']}
/>
<Select size="small" defaultValue="lucy" style={{ width: 150 }}> <Select size="small" defaultValue="lucy" style={{ width: 150 }}>
<Select.Option value="lucy">Lucy</Select.Option> <Select.Option value="lucy">Lucy</Select.Option>
</Select> </Select>

View File

@ -20,7 +20,7 @@ const listData = Array.from({ length: 3 }).map((_, i) => ({
const IconText: React.FC<IconTextProps> = ({ icon, text }) => ( const IconText: React.FC<IconTextProps> = ({ icon, text }) => (
<> <>
{React.createElement(icon, { style: { marginRight: 8 } })} {React.createElement(icon, { style: { marginInlineEnd: 8 } })}
{text} {text}
</> </>
); );

View File

@ -7583,7 +7583,7 @@ exports[`renders components/table/demo/edit-cell.tsx extend context correctly 1`
> >
<div <div
class="editable-cell-value-wrap" class="editable-cell-value-wrap"
style="padding-right: 24px;" style="padding-inline-end: 24px;"
> >
Edward King 0 Edward King 0
</div> </div>
@ -7697,7 +7697,7 @@ exports[`renders components/table/demo/edit-cell.tsx extend context correctly 1`
> >
<div <div
class="editable-cell-value-wrap" class="editable-cell-value-wrap"
style="padding-right: 24px;" style="padding-inline-end: 24px;"
> >
Edward King 1 Edward King 1
</div> </div>

View File

@ -6864,7 +6864,7 @@ exports[`renders components/table/demo/edit-cell.tsx correctly 1`] = `
> >
<div <div
class="editable-cell-value-wrap" class="editable-cell-value-wrap"
style="padding-right:24px" style="padding-inline-end:24px"
> >
Edward King 0 Edward King 0
</div> </div>
@ -6896,7 +6896,7 @@ exports[`renders components/table/demo/edit-cell.tsx correctly 1`] = `
> >
<div <div
class="editable-cell-value-wrap" class="editable-cell-value-wrap"
style="padding-right:24px" style="padding-inline-end:24px"
> >
Edward King 1 Edward King 1
</div> </div>

View File

@ -8,7 +8,7 @@ Select different settings to see the result.
<style> <style>
.table-demo-control-bar .ant-form-item { .table-demo-control-bar .ant-form-item {
margin-right: 16px !important; margin-inline-end: 16px !important;
margin-bottom: 8px !important; margin-bottom: 8px !important;
} }
</style> </style>

View File

@ -78,17 +78,16 @@ const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
<Form.Item <Form.Item
style={{ margin: 0 }} style={{ margin: 0 }}
name={dataIndex} name={dataIndex}
rules={[ rules={[{ required: true, message: `${title} is required.` }]}
{
required: true,
message: `${title} is required.`,
},
]}
> >
<Input ref={inputRef} onPressEnter={save} onBlur={save} /> <Input ref={inputRef} onPressEnter={save} onBlur={save} />
</Form.Item> </Form.Item>
) : ( ) : (
<div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}> <div
className="editable-cell-value-wrap"
style={{ paddingInlineEnd: 24 }}
onClick={toggleEdit}
>
{children} {children}
</div> </div>
); );

View File

@ -127,7 +127,7 @@ const App: React.FC = () => {
const editable = isEditing(record); const editable = isEditing(record);
return editable ? ( return editable ? (
<span> <span>
<Typography.Link onClick={() => save(record.key)} style={{ marginRight: 8 }}> <Typography.Link onClick={() => save(record.key)} style={{ marginInlineEnd: 8 }}>
Save Save
</Typography.Link> </Typography.Link>
<Popconfirm title="Sure to cancel?" onConfirm={cancel}> <Popconfirm title="Sure to cancel?" onConfirm={cancel}>

View File

@ -14,7 +14,7 @@ Implement resizable column by integrate with [react-resizable](https://github.co
#table-demo-resizable-column .react-resizable-handle { #table-demo-resizable-column .react-resizable-handle {
position: absolute; position: absolute;
right: -5px; inset-inline-end: -5px;
bottom: 0; bottom: 0;
z-index: 1; z-index: 1;
width: 10px; width: 10px;

View File

@ -65,7 +65,7 @@ There are some products to recommend for developer/designer/product manager.
font-weight: 500; font-weight: 500;
} }
.markdown table td > a:not(:last-child) { .markdown table td > a:not(:last-child) {
margin-right: 18px; margin-inline-end: 18px;
} }
.markdown table td > a:not(:last-child)::after { .markdown table td > a:not(:last-child)::after {
position: absolute; position: absolute;

View File

@ -66,7 +66,7 @@ title: 社区精选组件
font-weight: 500; font-weight: 500;
} }
.markdown table td > a:not(:last-child) { .markdown table td > a:not(:last-child) {
margin-right: 18px; margin-inline-end: 18px;
} }
.markdown table td > a:not(:last-child)::after { .markdown table td > a:not(:last-child)::after {
position: absolute; position: absolute;