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