Back to Nocobase

DialogFormLayout

docs/docs/en/shared-components/form/dialog-form-layout.md

2.1.331.1 KB
Original Source

DialogFormLayout

DialogFormLayout is used to put a standard form in a dialog.

Basic Usage

tsx
import { DialogFormLayout } from '@nocobase/client-v2';

ctx.viewer.dialog({
  closable: true,
  content: () => (
    <DialogFormLayout title={t('Bind verifier')} onSubmit={handleSubmit}>
      <Form form={form} layout="vertical">
        <Form.Item name="code" label={t('Code')}>
          <Input />
        </Form.Item>
      </Form>
    </DialogFormLayout>
  ),
});

API

PropTypeDescription
titleReact.ReactNodeTitle content
childrenReact.ReactNodeContent rendered inside the component
onCancel`() => voidPromise<void>`
onSubmit`() => voidPromise<void>`
submittingbooleanLoading state of the submit button
submitTextReact.ReactNodeSubmit button text
cancelTextReact.ReactNodeCancel button text
footerReact.ReactNodeReplace the default footer