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:
katherinehhh 2023-06-14 20:14:57 +08:00 committed by GitHub
parent 8b9c0fa979
commit c4816c6963
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 10 deletions

View File

@ -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;

View File

@ -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} />

View File

@ -44,6 +44,9 @@ const InternalGridCardBlockProvider = (props) => {
background: #fff;
}
}
.ant-formily-item-feedback-layout-loose {
margin-bottom: 12px;
}
`}
>
{props.children}

View File

@ -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`

View File

@ -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;

View File

@ -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>
);

View File

@ -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;
`;