zent/src/form/demos/7.layout.md

一套前端设计语言和基于React的实现

---
order: 7
zh-CN:
	title: 布局
	name: 用户名
	submit: 获取表单值
en-US:
	title: Layout
	name: name
	submit: submit
---

```jsx
import { useState, useCallback } from 'react';
import { Form, Radio, Notify, FormStrategy, FormContext } from 'zent';

const CONTROL_STYLE = { minWidth: 270 };

function App() {
	const form = Form.useForm(FormStrategy.View);
	const [layout, setLayout] = useState('vertical');
	const onLayoutChange = useCallback(e => setLayout(e.target.value), []);
	const [direction, setDirection] = useState('column');
	const onDirectionChange = useCallback(e => setDirection(e.target.value), []);
	return (
		<div className="form-layout">
			<div className="form-layout-option">
				<span className="form-layout-option-name">Layout:</span>
				<Radio.Group value={layout} onChange={onLayoutChange}>
					<Radio value="vertical">vertical</Radio>
					<Radio value="horizontal">horizontal</Radio>
				</Radio.Group>
			</div>
			<div className="form-layout-option">
				<span className="form-layout-option-name">Direction:</span>
				<Radio.Group value={direction} onChange={onDirectionChange}>
					<Radio value="column">column</Radio>
					<Radio value="row">row</Radio>
				</Radio.Group>
			</div>
			<hr />
			<Form layout={layout} direction={direction} form={form}>
				<FormContext.Provider value={{ controlStyle: CONTROL_STYLE }}>
					<FormInputField name="name" label="{i18n.name}：" value="" />
					<FormInputField name="name2" label="{i18n.name}2：" value="" />
					<FormInputField name="name3" label="{i18n.name}3：" value="" />
				</FormContext.Provider>
			</Form>
			<div className="zent-form-demo__form-actions">
				<Button type="primary" htmlType="submit">
					{i18n.submit}
				</Button>
			</div>
		</div>
	);
}

ReactDOM.render(<App />, mountNode);
```

<style>
.form-layout {
	width: 800px;
}

.form-layout-option {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
}

.form-layout-option-name {
	width: 100px;
}

</style>