refactor: List block and GridCard block style improve (#1988)
* refactor: list block and gridCard style improve * style: style improve * style: gridCard style improve * style: list style improve * style: style improve * style: style improve * style: style improve * style: style improve
This commit is contained in:
parent
8b9c0fa979
commit
c4816c6963
@ -26,7 +26,7 @@ export const InternalNester = () => {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.ant-card-body {
|
.ant-card-body {
|
||||||
padding: 15px 20px;
|
padding: 15px 20px 5px;
|
||||||
}
|
}
|
||||||
.ant-divider-horizontal {
|
.ant-divider-horizontal {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
|
@ -4,6 +4,7 @@ import { FieldContext, FormContext, RecursionField, observer, useField, useField
|
|||||||
import { uid } from '@formily/shared';
|
import { uid } from '@formily/shared';
|
||||||
import { ConfigProvider, Spin } from 'antd';
|
import { ConfigProvider, Spin } from 'antd';
|
||||||
import React, { useEffect, useMemo } from 'react';
|
import React, { useEffect, useMemo } from 'react';
|
||||||
|
import { css } from '@emotion/css';
|
||||||
import { useActionContext } from '..';
|
import { useActionContext } from '..';
|
||||||
import { useAttach, useComponent } from '../..';
|
import { useAttach, useComponent } from '../..';
|
||||||
import { useProps } from '../../hooks/useProps';
|
import { useProps } from '../../hooks/useProps';
|
||||||
@ -177,7 +178,13 @@ export const Form: React.FC<FormProps> & {
|
|||||||
const formDisabled = disabled || field.disabled;
|
const formDisabled = disabled || field.disabled;
|
||||||
return (
|
return (
|
||||||
<ConfigProvider componentDisabled={formDisabled}>
|
<ConfigProvider componentDisabled={formDisabled}>
|
||||||
<form>
|
<form
|
||||||
|
className={css`
|
||||||
|
.ant-formily-item-feedback-layout-loose {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
<Spin spinning={field.loading || false}>
|
<Spin spinning={field.loading || false}>
|
||||||
{form ? (
|
{form ? (
|
||||||
<WithForm form={form} {...others} disabled={formDisabled} />
|
<WithForm form={form} {...others} disabled={formDisabled} />
|
||||||
|
@ -44,6 +44,9 @@ const InternalGridCardBlockProvider = (props) => {
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.ant-formily-item-feedback-layout-loose {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
{props.children}
|
{props.children}
|
||||||
|
@ -13,9 +13,9 @@ import { ArrayField } from '@formily/core';
|
|||||||
import { defaultColumnCount, pageSizeOptions } from './options';
|
import { defaultColumnCount, pageSizeOptions } from './options';
|
||||||
|
|
||||||
const rowGutter = {
|
const rowGutter = {
|
||||||
md: 16,
|
md: 12,
|
||||||
sm: 8,
|
sm: 5,
|
||||||
xs: 8,
|
xs: 5,
|
||||||
};
|
};
|
||||||
|
|
||||||
const designerCss = css`
|
const designerCss = css`
|
||||||
|
@ -23,8 +23,8 @@
|
|||||||
.theme-compact {
|
.theme-compact {
|
||||||
--nb-spacing: 12px;
|
--nb-spacing: 12px;
|
||||||
--nb-designer-offset: -6px;
|
--nb-designer-offset: -6px;
|
||||||
.ant-formily-item {
|
.ant-formily-item-feedback-layout-loose {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 8px !important;
|
||||||
}
|
}
|
||||||
.ant-card {
|
.ant-card {
|
||||||
margin-bottom: 12px !important;
|
margin-bottom: 12px !important;
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { createForm } from '@formily/core';
|
import { createForm } from '@formily/core';
|
||||||
import { FormContext, useField } from '@formily/react';
|
import { FormContext, useField } from '@formily/react';
|
||||||
|
import { css, cx } from '@emotion/css';
|
||||||
import React, { createContext, useContext, useEffect, useMemo } from 'react';
|
import React, { createContext, useContext, useEffect, useMemo } from 'react';
|
||||||
import { FormLayout } from '@formily/antd';
|
import { FormLayout } from '@formily/antd';
|
||||||
import { BlockProvider, useBlockRequestContext } from '../../../block-provider';
|
import { BlockProvider, useBlockRequestContext } from '../../../block-provider';
|
||||||
@ -30,7 +31,22 @@ const InternalListBlockProvider = (props) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<FormContext.Provider value={form}>
|
<FormContext.Provider value={form}>
|
||||||
<FormLayout layout={'vertical'}>{props.children}</FormLayout>
|
<FormLayout layout={'vertical'}>
|
||||||
|
<div
|
||||||
|
className={cx(
|
||||||
|
css`
|
||||||
|
.ant-description-input {
|
||||||
|
line-height: 34px;
|
||||||
|
}
|
||||||
|
.ant-formily-item-feedback-layout-loose {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</div>
|
||||||
|
</FormLayout>
|
||||||
</FormContext.Provider>
|
</FormContext.Provider>
|
||||||
</ListBlockContext.Provider>
|
</ListBlockContext.Provider>
|
||||||
);
|
);
|
||||||
|
@ -8,8 +8,8 @@ const itemCss = css`
|
|||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
// gap: 8px;
|
||||||
padding: 12px 0;
|
padding: 5px 0;
|
||||||
border-bottom: 1px solid #f0f0f0;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user