mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
fix: editable Typography.Title should match font size while editing (#34169)
* feat: editable Typography.Title should match font size while editing * feat: update style * feat: update style * feat: update style * feat: style lint * feat: update style * Update components/typography/style/index.less * Update components/typography/Editable.tsx * feat: reorganize css * feat: style lint * feat: update snap Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
黑雨
GitHub
parent
9bcd45fac2
commit
c7fe1c8e26
@ -338,6 +338,7 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
|
|||||||
className={className}
|
className={className}
|
||||||
style={style}
|
style={style}
|
||||||
direction={direction}
|
direction={direction}
|
||||||
|
component={component}
|
||||||
maxLength={editConfig.maxLength}
|
maxLength={editConfig.maxLength}
|
||||||
autoSize={editConfig.autoSize}
|
autoSize={editConfig.autoSize}
|
||||||
enterIcon={editConfig.enterIcon}
|
enterIcon={editConfig.enterIcon}
|
||||||
|
|||||||
@ -20,6 +20,7 @@ interface EditableProps {
|
|||||||
maxLength?: number;
|
maxLength?: number;
|
||||||
autoSize?: boolean | AutoSizeType;
|
autoSize?: boolean | AutoSizeType;
|
||||||
enterIcon?: React.ReactNode;
|
enterIcon?: React.ReactNode;
|
||||||
|
component?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Editable: React.FC<EditableProps> = ({
|
const Editable: React.FC<EditableProps> = ({
|
||||||
@ -34,6 +35,7 @@ const Editable: React.FC<EditableProps> = ({
|
|||||||
onSave,
|
onSave,
|
||||||
onCancel,
|
onCancel,
|
||||||
onEnd,
|
onEnd,
|
||||||
|
component,
|
||||||
enterIcon = <EnterOutlined />,
|
enterIcon = <EnterOutlined />,
|
||||||
}) => {
|
}) => {
|
||||||
const ref = React.useRef<any>();
|
const ref = React.useRef<any>();
|
||||||
@ -108,6 +110,8 @@ const Editable: React.FC<EditableProps> = ({
|
|||||||
confirmChange();
|
confirmChange();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const textClassName = component ? `${prefixCls}-${component}` : '';
|
||||||
|
|
||||||
const textAreaClassName = classNames(
|
const textAreaClassName = classNames(
|
||||||
prefixCls,
|
prefixCls,
|
||||||
`${prefixCls}-edit-content`,
|
`${prefixCls}-edit-content`,
|
||||||
@ -115,6 +119,7 @@ const Editable: React.FC<EditableProps> = ({
|
|||||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||||
},
|
},
|
||||||
className,
|
className,
|
||||||
|
textClassName,
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -650,6 +650,286 @@ exports[`renders ./components/typography/demo/ellipsis-middle.md extend context
|
|||||||
|
|
||||||
exports[`renders ./components/typography/demo/interactive.md extend context correctly 1`] = `
|
exports[`renders ./components/typography/demo/interactive.md extend context correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
|
<h1
|
||||||
|
class="ant-typography"
|
||||||
|
>
|
||||||
|
h1. Ant Design
|
||||||
|
<div
|
||||||
|
aria-label="Edit"
|
||||||
|
class="ant-typography-edit"
|
||||||
|
role="button"
|
||||||
|
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="edit"
|
||||||
|
class="anticon anticon-edit"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="edit"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip"
|
||||||
|
style="opacity:0;pointer-events:none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</h1>,
|
||||||
|
<h2
|
||||||
|
class="ant-typography"
|
||||||
|
>
|
||||||
|
h2. Ant Design
|
||||||
|
<div
|
||||||
|
aria-label="Edit"
|
||||||
|
class="ant-typography-edit"
|
||||||
|
role="button"
|
||||||
|
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="edit"
|
||||||
|
class="anticon anticon-edit"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="edit"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip"
|
||||||
|
style="opacity:0;pointer-events:none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</h2>,
|
||||||
|
<h3
|
||||||
|
class="ant-typography"
|
||||||
|
>
|
||||||
|
h3. Ant Design
|
||||||
|
<div
|
||||||
|
aria-label="Edit"
|
||||||
|
class="ant-typography-edit"
|
||||||
|
role="button"
|
||||||
|
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="edit"
|
||||||
|
class="anticon anticon-edit"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="edit"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip"
|
||||||
|
style="opacity:0;pointer-events:none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</h3>,
|
||||||
|
<h4
|
||||||
|
class="ant-typography"
|
||||||
|
>
|
||||||
|
h4. Ant Design
|
||||||
|
<div
|
||||||
|
aria-label="Edit"
|
||||||
|
class="ant-typography-edit"
|
||||||
|
role="button"
|
||||||
|
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="edit"
|
||||||
|
class="anticon anticon-edit"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="edit"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip"
|
||||||
|
style="opacity:0;pointer-events:none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</h4>,
|
||||||
|
<h5
|
||||||
|
class="ant-typography"
|
||||||
|
>
|
||||||
|
h5. Ant Design
|
||||||
|
<div
|
||||||
|
aria-label="Edit"
|
||||||
|
class="ant-typography-edit"
|
||||||
|
role="button"
|
||||||
|
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="edit"
|
||||||
|
class="anticon anticon-edit"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="edit"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip"
|
||||||
|
style="opacity:0;pointer-events:none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</h5>,
|
||||||
<div
|
<div
|
||||||
class="ant-typography"
|
class="ant-typography"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -554,6 +554,166 @@ exports[`renders ./components/typography/demo/ellipsis-middle.md correctly 1`] =
|
|||||||
|
|
||||||
exports[`renders ./components/typography/demo/interactive.md correctly 1`] = `
|
exports[`renders ./components/typography/demo/interactive.md correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
|
<h1
|
||||||
|
class="ant-typography"
|
||||||
|
>
|
||||||
|
h1. Ant Design
|
||||||
|
<div
|
||||||
|
aria-label="Edit"
|
||||||
|
class="ant-typography-edit"
|
||||||
|
role="button"
|
||||||
|
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="edit"
|
||||||
|
class="anticon anticon-edit"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="edit"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</h1>,
|
||||||
|
<h2
|
||||||
|
class="ant-typography"
|
||||||
|
>
|
||||||
|
h2. Ant Design
|
||||||
|
<div
|
||||||
|
aria-label="Edit"
|
||||||
|
class="ant-typography-edit"
|
||||||
|
role="button"
|
||||||
|
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="edit"
|
||||||
|
class="anticon anticon-edit"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="edit"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</h2>,
|
||||||
|
<h3
|
||||||
|
class="ant-typography"
|
||||||
|
>
|
||||||
|
h3. Ant Design
|
||||||
|
<div
|
||||||
|
aria-label="Edit"
|
||||||
|
class="ant-typography-edit"
|
||||||
|
role="button"
|
||||||
|
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="edit"
|
||||||
|
class="anticon anticon-edit"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="edit"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</h3>,
|
||||||
|
<h4
|
||||||
|
class="ant-typography"
|
||||||
|
>
|
||||||
|
h4. Ant Design
|
||||||
|
<div
|
||||||
|
aria-label="Edit"
|
||||||
|
class="ant-typography-edit"
|
||||||
|
role="button"
|
||||||
|
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="edit"
|
||||||
|
class="anticon anticon-edit"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="edit"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</h4>,
|
||||||
|
<h5
|
||||||
|
class="ant-typography"
|
||||||
|
>
|
||||||
|
h5. Ant Design
|
||||||
|
<div
|
||||||
|
aria-label="Edit"
|
||||||
|
class="ant-typography-edit"
|
||||||
|
role="button"
|
||||||
|
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="edit"
|
||||||
|
class="anticon anticon-edit"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="edit"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</h5>,
|
||||||
<div
|
<div
|
||||||
class="ant-typography"
|
class="ant-typography"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -59,6 +59,11 @@ const Demo = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<Typography.Title editable level={1}>h1. Ant Design</Typography.Title>
|
||||||
|
<Typography.Title editable level={2}>h2. Ant Design</Typography.Title>
|
||||||
|
<Typography.Title editable level={3}>h3. Ant Design</Typography.Title>
|
||||||
|
<Typography.Title editable level={4}>h4. Ant Design</Typography.Title>
|
||||||
|
<Typography.Title editable level={5}>h5. Ant Design</Typography.Title>
|
||||||
<Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
|
<Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
|
||||||
<Paragraph
|
<Paragraph
|
||||||
editable={{
|
editable={{
|
||||||
|
|||||||
@ -43,40 +43,56 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1&,
|
h1&,
|
||||||
|
div&-h1,
|
||||||
|
div&-h1 > textarea,
|
||||||
h1 {
|
h1 {
|
||||||
.typography-title-1();
|
.typography-title-1();
|
||||||
}
|
}
|
||||||
|
|
||||||
h2&,
|
h2&,
|
||||||
|
div&-h2,
|
||||||
|
div&-h2 > textarea,
|
||||||
h2 {
|
h2 {
|
||||||
.typography-title-2();
|
.typography-title-2();
|
||||||
}
|
}
|
||||||
|
|
||||||
h3&,
|
h3&,
|
||||||
|
div&-h3,
|
||||||
|
div&-h3 > textarea,
|
||||||
h3 {
|
h3 {
|
||||||
.typography-title-3();
|
.typography-title-3();
|
||||||
}
|
}
|
||||||
|
|
||||||
h4&,
|
h4&,
|
||||||
|
div&-h4,
|
||||||
|
div&-h4 > textarea,
|
||||||
h4 {
|
h4 {
|
||||||
.typography-title-4();
|
.typography-title-4();
|
||||||
}
|
}
|
||||||
|
|
||||||
h5&,
|
h5&,
|
||||||
|
div&-h5,
|
||||||
|
div&-h5 > textarea,
|
||||||
h5 {
|
h5 {
|
||||||
.typography-title-5();
|
.typography-title-5();
|
||||||
}
|
}
|
||||||
|
|
||||||
h1&,
|
div&-h1,
|
||||||
h2&,
|
div&-h2,
|
||||||
h3&,
|
div&-h3,
|
||||||
h4&,
|
div&-h4,
|
||||||
h5& {
|
div&-h5 {
|
||||||
.@{typography-prefix-cls} + & {
|
& > textarea {
|
||||||
margin-top: @typography-title-margin-top;
|
margin-bottom: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div&-h5 > textarea {
|
||||||
|
padding-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
div,
|
div,
|
||||||
ul,
|
ul,
|
||||||
li,
|
li,
|
||||||
@ -198,6 +214,10 @@
|
|||||||
right: 10px;
|
right: 10px;
|
||||||
bottom: 8px;
|
bottom: 8px;
|
||||||
color: @text-color-secondary;
|
color: @text-color-secondary;
|
||||||
|
// default style
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
font-style: normal;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -206,6 +226,26 @@
|
|||||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||||
-moz-transition: none;
|
-moz-transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.@{typography-prefix-cls}& {
|
||||||
|
&.@{typography-prefix-cls}-h1,
|
||||||
|
&.@{typography-prefix-cls}-h2,
|
||||||
|
&.@{typography-prefix-cls}-h3 {
|
||||||
|
margin-top: -1px;
|
||||||
|
margin-bottom: calc(@typography-title-margin-bottom - 1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{typography-prefix-cls}-h4 {
|
||||||
|
margin-top: -2px;
|
||||||
|
margin-bottom: calc(@typography-title-margin-bottom - 2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{typography-prefix-cls}-h5 {
|
||||||
|
margin-top: -4px;
|
||||||
|
margin-bottom: calc(@typography-title-margin-bottom - 4px);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// list
|
// list
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user