github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'v3' into next

refactor-list
tangjinzhou 2021-06-19 21:58:52 +08:00
parent 700d04badc 9ce43befc4
commit 8996db2adf
8 changed files with 247 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/descriptions/Cell.tsx
View File

@ -1,4 +1,4 @@
import { VNodeTypes, HTMLAttributes, FunctionalComponent } from 'vue'; import { VNodeTypes, HTMLAttributes, FunctionalComponent, CSSProperties } from 'vue';
function notEmpty(val: any) { function notEmpty(val: any) {
return val !== undefined && val !== null; return val !== undefined && val !== null;
@ -8,6 +8,8 @@ interface CellProps extends HTMLAttributes {
itemPrefixCls: string; itemPrefixCls: string;
span: number; span: number;
component: string; component: string;
labelStyle?: CSSProperties;
contentStyle?: CSSProperties;
bordered?: boolean; bordered?: boolean;
label?: VNodeTypes; label?: VNodeTypes;
content?: VNodeTypes; content?: VNodeTypes;
@ -15,7 +17,17 @@ interface CellProps extends HTMLAttributes {
} }
const Cell: FunctionalComponent<CellProps> = props => { const Cell: FunctionalComponent<CellProps> = props => {
const { itemPrefixCls, component, span, bordered, label, content, colon } = props; const {
itemPrefixCls,
component,
span,
labelStyle,
contentStyle,
bordered,
label,
content,
colon,
} = props;
const Component = component as any; const Component = component as any;
if (bordered) { if (bordered) {
return ( return (
@ -28,26 +40,34 @@ const Cell: FunctionalComponent<CellProps> = props => {
]} ]}
colSpan={span} colSpan={span}
> >
{notEmpty(label) ? label : content} {notEmpty(label) && <span style={labelStyle}>{label}</span>}
{notEmpty(content) && <span style={contentStyle}>{content}</span>}
</Component> </Component>
); );
} }
return ( return (
<Component class={[`${itemPrefixCls}-item`]} colSpan={span}> <Component class={[`${itemPrefixCls}-item`]} colSpan={span}>
{label && ( <div class={`${itemPrefixCls}-item-container`}>
<span {label && (
class={[ <span
`${itemPrefixCls}-item-label`, class={[
{ `${itemPrefixCls}-item-label`,
[`${itemPrefixCls}-item-no-colon`]: !colon, {
}, [`${itemPrefixCls}-item-no-colon`]: !colon,
]} },
> ]}
{label} style={labelStyle}
</span> >
)} {label}
{content && <span class={`${itemPrefixCls}-item-content`}>{content}</span>} </span>
)}
{content && (
<span class={`${itemPrefixCls}-item-content`} style={contentStyle}>
{content}
</span>
)}
</div>
</Component> </Component>
); );
}; };

46
components/descriptions/Row.tsx
View File

@ -1,6 +1,7 @@
import Cell from './Cell'; import Cell from './Cell';
import { getOptionProps, getSlot, getClass, getStyle, getComponent } from '../_util/props-util'; import { getSlot, getClass, getStyle } from '../_util/props-util';
import { FunctionalComponent, VNode } from 'vue'; import { FunctionalComponent, VNode, inject, ref } from 'vue';
import { descriptionsContext, DescriptionsContextProp } from './index';
interface CellConfig { interface CellConfig {
component: string | [string, string]; component: string | [string, string];
@ -22,12 +23,23 @@ const Row: FunctionalComponent<RowProps> = props => {
const renderCells = ( const renderCells = (
items: VNode[], items: VNode[],
{ colon, prefixCls, bordered }, { colon, prefixCls, bordered },
{ component, type, showLabel, showContent }: CellConfig, {
component,
type,
showLabel,
showContent,
labelStyle: rootLabelStyle,
contentStyle: rootContentStyle,
}: CellConfig & DescriptionsContextProp,
) => { ) => {
return items.map((item, index) => { return items.map((item, index) => {
const { prefixCls: itemPrefixCls = prefixCls, span = 1 } = getOptionProps(item); const {
const label = getComponent(item, 'label'); prefixCls: itemPrefixCls = prefixCls,
span = 1,
labelStyle,
contentStyle,
label = (item.children as any)?.label?.(),
} = item.props || {};
const children = getSlot(item); const children = getSlot(item);
const className = getClass(item); const className = getClass(item);
const style = getStyle(item); const style = getStyle(item);
@ -39,6 +51,8 @@ const Row: FunctionalComponent<RowProps> = props => {
key={`${type}-${key || index}`} key={`${type}-${key || index}`}
class={className} class={className}
style={style} style={style}
labelStyle={{ ...rootLabelStyle.value, ...labelStyle }}
contentStyle={{ ...rootContentStyle.value, ...contentStyle }}
span={span} span={span}
colon={colon} colon={colon}
component={component} component={component}
@ -54,7 +68,7 @@ const Row: FunctionalComponent<RowProps> = props => {
<Cell <Cell
key={`label-${key || index}`} key={`label-${key || index}`}
class={className} class={className}
style={style} style={{ ...rootLabelStyle.value, ...style, ...labelStyle }}
span={1} span={1}
colon={colon} colon={colon}
component={component[0]} component={component[0]}
@ -65,7 +79,7 @@ const Row: FunctionalComponent<RowProps> = props => {
<Cell <Cell
key={`content-${key || index}`} key={`content-${key || index}`}
class={className} class={className}
style={style} style={{ ...rootContentStyle.value, ...style, ...contentStyle }}
span={span * 2 - 1} span={span * 2 - 1}
component={component[1]} component={component[1]}
itemPrefixCls={itemPrefixCls} itemPrefixCls={itemPrefixCls}
@ -77,17 +91,29 @@ const Row: FunctionalComponent<RowProps> = props => {
}; };
const { prefixCls, vertical, row, index, bordered } = props; const { prefixCls, vertical, row, index, bordered } = props;
const { labelStyle, contentStyle } = inject(descriptionsContext, {
labelStyle: ref({}),
contentStyle: ref({}),
});
if (vertical) { if (vertical) {
return ( return (
<> <>
<tr key={`label-${index}`} class={`${prefixCls}-row`}> <tr key={`label-${index}`} class={`${prefixCls}-row`}>
{renderCells(row, props, { component: 'th', type: 'label', showLabel: true })} {renderCells(row, props, {
component: 'th',
type: 'label',
showLabel: true,
labelStyle,
contentStyle,
})}
</tr> </tr>
<tr key={`content-${index}`} class={`${prefixCls}-row`}> <tr key={`content-${index}`} class={`${prefixCls}-row`}>
{renderCells(row, props, { {renderCells(row, props, {
component: 'td', component: 'td',
type: 'content', type: 'content',
showContent: true, showContent: true,
labelStyle,
contentStyle,
})} })}
</tr> </tr>
</> </>
@ -101,6 +127,8 @@ const Row: FunctionalComponent<RowProps> = props => {
type: 'item', type: 'item',
showLabel: true, showLabel: true,
showContent: true, showContent: true,
labelStyle,
contentStyle,
})} })}
</tr> </tr>
); );

84
components/descriptions/__tests__/__snapshots__/index.test.js.snap
View File

@ -7,7 +7,9 @@ exports[`Descriptions Descriptions support colon 1`] = `
<table> <table>
<tbody> <tbody>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label ant-descriptions-item-no-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td> <td class="ant-descriptions-item" colspan="3">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label ant-descriptions-item-no-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -23,7 +25,9 @@ exports[`Descriptions Descriptions support style 1`] = `
<tbody> <tbody>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"> <td class="ant-descriptions-item" colspan="3">
<!----><span class="ant-descriptions-item-content">Cloud Database</span> <div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -39,7 +43,9 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
<table> <table>
<tbody> <tbody>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item my-class" colspan="3"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td> <td class="ant-descriptions-item my-class" colspan="3">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -54,12 +60,20 @@ exports[`Descriptions column is number 1`] = `
<table> <table>
<tbody> <tbody>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td> <td class="ant-descriptions-item" colspan="1">
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></td> </td>
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></div>
</td>
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></div>
</td>
</tr> </tr>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td> <td class="ant-descriptions-item" colspan="3">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -74,35 +88,51 @@ exports[`Descriptions vertical layout 1`] = `
<table> <table>
<tbody> <tbody>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Product</span> <th class="ant-descriptions-item" colspan="1">
<!----> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span>
<!---->
</div>
</th> </th>
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span> <th class="ant-descriptions-item" colspan="1">
<!----> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span>
<!---->
</div>
</th> </th>
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">time</span> <th class="ant-descriptions-item" colspan="1">
<!----> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span>
<!---->
</div>
</th> </th>
</tr> </tr>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="1"> <td class="ant-descriptions-item" colspan="1">
<!----><span class="ant-descriptions-item-content">Cloud Database</span> <div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
</div>
</td> </td>
<td class="ant-descriptions-item" colspan="1"> <td class="ant-descriptions-item" colspan="1">
<!----><span class="ant-descriptions-item-content">Prepaid</span> <div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">Prepaid</span>
</div>
</td> </td>
<td class="ant-descriptions-item" colspan="1"> <td class="ant-descriptions-item" colspan="1">
<!----><span class="ant-descriptions-item-content">18:00:00</span> <div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">18:00:00</span>
</div>
</td> </td>
</tr> </tr>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<th class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label">Amount</span> <th class="ant-descriptions-item" colspan="3">
<!----> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span>
<!---->
</div>
</th> </th>
</tr> </tr>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"> <td class="ant-descriptions-item" colspan="3">
<!----><span class="ant-descriptions-item-content">$80.00</span> <div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">$80.00</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -118,12 +148,20 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
<table> <table>
<tbody> <tbody>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td> <td class="ant-descriptions-item" colspan="1">
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></td> </td>
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></div>
</td>
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></div>
</td>
</tr> </tr>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td> <td class="ant-descriptions-item" colspan="3">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

23
components/descriptions/__tests__/index.test.js
View File

@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { h } from 'vue';
import MockDate from 'mockdate'; import MockDate from 'mockdate';
import Descriptions from '..'; import Descriptions from '..';
import { resetWarned } from '../../_util/warning'; import { resetWarned } from '../../_util/warning';
@ -263,21 +264,27 @@ describe('Descriptions', () => {
}); });
it('Descriptions support extra', async () => { it('Descriptions support extra', async () => {
const wrapper = mount({ const wrapper = mount(Descriptions, {
render() { props: {
return ( extra: 'Edit',
<Descriptions extra="Edit"> },
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item> slots: {
</Descriptions> default: h(
); Descriptions.Item,
{
label: 'UserName',
},
'Zhou Maomao',
),
}, },
}); });
await asyncExpect(() => { await asyncExpect(() => {
expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(true); expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(true);
wrapper.setProps({ extra: undefined });
}); });
wrapper.setProps({ extra: undefined });
await asyncExpect(() => { await asyncExpect(() => {
expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(false); expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(false);
}); });

78
components/descriptions/index.tsx
View File

@ -1,6 +1,6 @@
import { import {
inject,
ref, ref,
Ref,
App, App,
defineComponent, defineComponent,
PropType, PropType,
@ -10,6 +10,11 @@ import {
onMounted, onMounted,
onBeforeUnmount, onBeforeUnmount,
Plugin, Plugin,
CSSProperties,
provide,
toRef,
InjectionKey,
computed,
} from 'vue'; } from 'vue';
import warning from '../_util/warning'; import warning from '../_util/warning';
import ResponsiveObserve, { import ResponsiveObserve, {
@ -17,12 +22,12 @@ import ResponsiveObserve, {
responsiveArray, responsiveArray,
ScreenMap, ScreenMap,
} from '../_util/responsiveObserve'; } from '../_util/responsiveObserve';
import { defaultConfigProvider } from '../config-provider';
import Row from './Row'; import Row from './Row';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import { filterEmpty } from '../_util/props-util'; import { flattenChildren } from '../_util/props-util';
import useConfigInject from '../_util/hooks/useConfigInject';
export const DescriptionsItemProps = { export const DescriptionsItemProps = {
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
@ -30,15 +35,22 @@ export const DescriptionsItemProps = {
span: PropTypes.number, span: PropTypes.number,
}; };
const descriptionsItemProp = {
prefixCls: PropTypes.string,
label: PropTypes.VNodeChild,
labelStyle: PropTypes.style,
contentStyle: PropTypes.style,
span: PropTypes.number.def(1),
};
export type DescriptionsItemProp = Partial<ExtractPropTypes<typeof descriptionsItemProp>>;
export const DescriptionsItem = defineComponent({ export const DescriptionsItem = defineComponent({
name: 'ADescriptionsItem', name: 'ADescriptionsItem',
props: { props: descriptionsItemProp,
prefixCls: PropTypes.string, slots: ['label'],
label: PropTypes.VNodeChild, setup(_, { slots }) {
span: PropTypes.number.def(1), return () => slots.default?.();
},
render() {
return null;
}, },
}); });
@ -87,7 +99,7 @@ function getFilledItem(node: VNode, span: number | undefined, rowRestCol: number
} }
function getRows(children: VNode[], column: number) { function getRows(children: VNode[], column: number) {
const childNodes = filterEmpty(children); const childNodes = flattenChildren(children);
const rows: VNode[][] = []; const rows: VNode[][] = [];
let tmpRow: VNode[] = []; let tmpRow: VNode[] = [];
@ -130,17 +142,29 @@ const descriptionsProps = {
}, },
layout: PropTypes.oneOf(tuple('horizontal', 'vertical')), layout: PropTypes.oneOf(tuple('horizontal', 'vertical')),
colon: PropTypes.looseBool, colon: PropTypes.looseBool,
labelStyle: PropTypes.style,
contentStyle: PropTypes.style,
}; };
export type DescriptionsProps = HTMLAttributes & export type DescriptionsProps = HTMLAttributes &
Partial<ExtractPropTypes<typeof descriptionsProps>>; Partial<ExtractPropTypes<typeof descriptionsProps>>;
export interface DescriptionsContextProp {
labelStyle?: Ref<CSSProperties>;
contentStyle?: Ref<CSSProperties>;
}
export const descriptionsContext: InjectionKey<DescriptionsContextProp> = Symbol(
'descriptionsContext',
);
const Descriptions = defineComponent({ const Descriptions = defineComponent({
name: 'ADescriptions', name: 'ADescriptions',
props: descriptionsProps, props: descriptionsProps,
slots: ['title', 'extra'],
Item: DescriptionsItem, Item: DescriptionsItem,
setup(props, { slots }) { setup(props, { slots }) {
const { getPrefixCls } = inject('configProvider', defaultConfigProvider); const { prefixCls, direction } = useConfigInject('descriptions', props);
let token: number; let token: number;
@ -160,10 +184,15 @@ const Descriptions = defineComponent({
ResponsiveObserve.unsubscribe(token); ResponsiveObserve.unsubscribe(token);
}); });
provide(descriptionsContext, {
labelStyle: toRef(props, 'labelStyle'),
contentStyle: toRef(props, 'contentStyle'),
});
const mergeColumn = computed(() => getColumn(props.column, screens.value));
return () => { return () => {
const { const {
prefixCls: customizePrefixCls,
column,
size, size,
bordered = false, bordered = false,
layout = 'horizontal', layout = 'horizontal',
@ -172,28 +201,27 @@ const Descriptions = defineComponent({
extra = slots.extra?.(), extra = slots.extra?.(),
} = props; } = props;
const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
const mergeColumn = getColumn(column, screens.value);
const children = slots.default?.(); const children = slots.default?.();
const rows = getRows(children, mergeColumn); const rows = getRows(children, mergeColumn.value);
return ( return (
<div <div
class={[ class={[
prefixCls, prefixCls.value,
{ {
[`${prefixCls}-${size}`]: size !== 'default', [`${prefixCls.value}-${size}`]: size !== 'default',
[`${prefixCls}-bordered`]: !!bordered, [`${prefixCls.value}-bordered`]: !!bordered,
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
}, },
]} ]}
> >
{(title || extra) && ( {(title || extra) && (
<div class={`${prefixCls}-header`}> <div class={`${prefixCls.value}-header`}>
<div class={`${prefixCls}-title`}>{title}</div> {title && <div class={`${prefixCls.value}-title`}>{title}</div>}
<div class={`${prefixCls}-extra`}>{extra}</div> {extra && <div class={`${prefixCls.value}-extra`}>{extra}</div>}
</div> </div>
)} )}
<div class={`${prefixCls}-view`}> <div class={`${prefixCls.value}-view`}>
<table> <table>
<tbody> <tbody>
{rows.map((row, index) => ( {rows.map((row, index) => (
@ -201,7 +229,7 @@ const Descriptions = defineComponent({
key={index} key={index}
index={index} index={index}
colon={colon} colon={colon}
prefixCls={prefixCls} prefixCls={prefixCls.value}
vertical={layout === 'vertical'} vertical={layout === 'vertical'}
bordered={bordered} bordered={bordered}
row={row} row={row}

17
components/descriptions/style/index.less
View File

@ -1,4 +1,4 @@
@import '../../style/themes/default'; @import '../../style/themes/index';
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions'; @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
@ -86,19 +86,22 @@
color: @text-color; color: @text-color;
font-size: @font-size-base; font-size: @font-size-base;
line-height: @line-height-base; line-height: @line-height-base;
word-break: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
&-item { &-item {
padding-bottom: 0; padding-bottom: 0;
vertical-align: top; vertical-align: top;
> span {
display: inline-flex;
align-items: baseline;
}
&-container { &-container {
display: flex; display: flex;
.@{descriptions-prefix-cls}-item-label,
.@{descriptions-prefix-cls}-item-content {
display: inline-flex;
align-items: baseline;
}
} }
} }
@ -106,7 +109,7 @@
.@{descriptions-prefix-cls}-row { .@{descriptions-prefix-cls}-row {
> th, > th,
> td { > td {
padding-bottom: 12px; padding-bottom: @padding-sm;
} }
} }
} }
@ -167,3 +170,5 @@
} }
} }
} }
@import './rtl';

33
components/descriptions/style/rtl.less Normal file
View File

@ -0,0 +1,33 @@
@import '../../style/themes/default';
@import '../../style/mixins/index';
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
.@{descriptions-prefix-cls} {
&-rtl {
direction: rtl;
}
&-item-label {
&::after {
.@{descriptions-prefix-cls}-rtl & {
margin: 0 @descriptions-item-label-colon-margin-left 0
@descriptions-item-label-colon-margin-right;
}
}
}
&-bordered {
.@{descriptions-prefix-cls}-item-label,
.@{descriptions-prefix-cls}-item-content {
.@{descriptions-prefix-cls}-rtl& {
border-right: none;
border-left: 1px solid @border-color-split;
&:last-child {
border-left: none;
}
}
}
}
}

2
v2-doc

@ -1 +1 @@
Subproject commit 082898c0188de1c83f27696487bd6d4db7f29749 Subproject commit 4c298275518d5790a58d26f2ed9b83ee5ba1dba4