npm install antdyarnを使用する場合:
yarn add antd
const [form] = Form.useForm(); // フォームインスタンスを作成
// フォーム送信時に呼ばれる関数
const onFinish = (values) => {
console.log('Received values of form:', values);
};
// 初期値の設定
const params = {
username: 'JohnDoe',
age: 30,
};
return (
<Form
form={form}
layout="vertical"
onFinish={onFinish}
initialValues={params}
>
{/* フォームフィールドの定義 */}
</Form>
);
function MyGridComponent() {
return (
<Row gutter={16}>
<Col span={12}>
<div>左側のコンテンツ</div>
</Col>
<Col span={12}>
<div>右側のコンテンツ</div>
</Col>
</Row>
);
}
import { Row, Col } from 'antd';
<Row>
<Col span={12}>Column</Col>
<Col span={12}>Column</Col>
</Row>
<Row>
<Col xs={24} sm={12} md={8} lg={6} xl={4}>
Column
</Col>
</Row>
<Form.Item label="テンプレート名" name="title">
<Input style={{width: '200px'}} />
</Form.Item>
Form.Itemはlabel,nameの他にどのようなプロパティ（属性）がありますか？
Form.Item コンポーネントは、フォームのレイアウトやバリデーションメッセージの表示など、フォームフィールドに関する多くの機能を担っています。 以下に、Form.Item でよく使用される主なプロパティ（属性）をリストアップします。 name: フォームフィールドの名前を指定します。 この名前をもとに、onFinish ハンドラーでデータを取得したり、setFieldsValue でフィールドの値を設定したりできます。 label: フォームフィールドのラベルを指定します。 これは、フィールドの上部または横に表示されるテキストです。 rules: フィールドに適用するバリデーションルールの配列です。 required, min, max, pattern などの標準ルールや、カスタムバリデーション関数を定義できます。 help: フィールドに関連するヘルプテキストを指定します。バリデーションエラー時にこのテキストが表示されます。 validateStatus: フォームフィールドのバリデーションステータスを指定します。通常は 'success', 'warning', 'error', 'validating' などの値があります。 hasFeedback: フィールドにバリデーションフィードバックアイコンを表示するかどうかを指定します。 required: このフィールドが必須かどうかを指定します。これを設定すると、ラベルの隣に必須マーク（アスタリスク）が表示されます。 initialValue: フィールドの初期値を指定します。 normalize: フォームコントロールから取得する値を変換するための関数を指定します。 shouldUpdate: 他のフィールドの変更によってこの Form.Item を再レンダリングするかどうかを制御するための関数またはブール値を指定します。 dependencies: このフィールドが依存する他のフィールドの名前を指定します。依存するフィールドの値が変わると、このフィールドが再検証されます。 hidden: フォームアイテムを非表示にするかどうかを指定します。 noStyle: スタイリングなしで Form.Item をレンダリングするかどうかを指定します。これを使用すると、バリデーションのみを行い、レイアウトは親要素が制御します。 これらはほんの一例であり、実際にはもっと多くのプロパティが Form.Item には存在します。
import {Select} from 'antd';
const { Option, OptGroup } = Select; // インポートする際、Optionまたは、OptGroupの宣言も忘れずに。忘れるとなぞの警告エラーが出まくる。
～略～
<Select
value={row.termTag}
style={{ width: '100%' }}
onChange={(value) => updateTerm(and_index, or_index, 'termTag', value)}
>
{Object.entries(termTagList).map(([key, value]) => (
<Option key={key} value={key}>{value}</Option>
))}
</Select>
{
"eq": "次に等しい( = )",
"like": "含む",
"over": "次の値より大きい( > )",
"under": "次の値より小さい( < )",
"or_over": "以上( >= )",
"or_under": "以下( <= )"
}
import { Select } from 'antd';
const { Option, OptGroup } = Select;
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
<OptGroup label="Manager">
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
</OptGroup>
<OptGroup label="Engineer">
<Option value="Yiminghe">yiminghe</Option>
</OptGroup>
</Select>,
document.getElementById('container')
);
Selectコンポーネントのプロパティ（属性）について
Ant Designの Select コンポーネントは、多くのプロパティ（属性）を持っており、これによりコンポーネントの挙動をカスタマイズできます。以下は、よく使用されるプロパティの一部です： value / defaultValue: コントロールの現在の値、またはコンポーネントの初期値。 options: 選択肢のリストを定義するオブジェクトの配列。各オブジェクトは少なくとも label（ユーザーに表示される）と value（選択時にコンポーネントが使用する）のプロパティを持つ必要があります。
<Select
style={{width: '160px'}}
allowClear
options={animalTypes}
/>
const Neko = ({p_nekoName, p_nekoEnt, cbUpdateNekoEnt}) => {
const [nekoEnt, setNekoEnt] = useState<any>({});
useEffect(() => {
setNekoEnt(p_nekoEnt);
}, [p_nekoEnt]);
const updateNekoEnt = (key, value) => {
p_nekoEnt[key] = value;
const newEnt = {...nekoEnt, [key]: value};
setNekoEnt(newEnt);
p_nekoEnt[key] = value;
//cbUpdateNekoEnt(key, value); // コールバックを実行
};
～略～
<Input
placeholder="Neko name"
value={nekoEnt.name}
onChange={(e) => updateNekoEnt('name', e.target.value)}
/>
～略～
import { Input } from 'antd';
// 省略
<Form.Item label="猫名" name="cat_name">
<Input style={{width: '200px'}} />
</Form.Item>
Input コンポーネントの主なプロパティ
value: インプットフィールドの現在の値。 defaultValue: コンポーネントの初期値。 onChange: テキストが変更されたときに呼び出される関数。 イベントオブジェクトを引数として受け取ります。 placeholder: インプットフィールドが空のときに表示されるプレースホルダーテキスト。 disabled: 入力不可にするかどうかのブール値。 size: インプットフィールドのサイズ（large, default, small）。 prefix: インプットフィールドの前に表示される接頭語のコンポーネント。 suffix: インプットフィールドの後に表示される接尾語のコンポーネント。 type: HTML5の type 属性と同様に、インプットタイプ（例えば text, password）。 allowClear: 入力クリア機能を追加Input コンポーネントにはいくつかの内蔵されたタイプがあります：
Input.TextArea: 複数行のテキスト入力が可能なテキストエリア。 Input.Search: 検索機能を持ったインプットフィールド。enterButton プロパティで検索ボタンを追加することができます。 Input.Password: パスワード入力用のフィールド。目アイコンでパスワードの表示/非表示を切り替えることができます。 Input.Group: 複数のインプットフィールドをグループ化するためのコンテナ。 例えば、接頭語や接尾語を持つインプットフィールドを一緒に表示するときなどに使用します。見本2 jsx
import { Input } from 'antd';
// ...
// テキストエリア
<Input.TextArea rows={4} placeholder="Type your message here" />
// 検索インプット
<Input.Search placeholder="Search something" onSearch={value => console.log(value)} enterButton />
// パスワードインプット
<Input.Password placeholder="Input password" />
// インプットグループ
<Input.Group compact>
<Input style={{ width: '50%' }} defaultValue="0571" />
<Input style={{ width: '50%' }} defaultValue="26888888" />
</Input.Group>
import React from 'react';
import { Button } from 'antd';
const App = () => {
return (
<div>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
<Button type="text">Text Button</Button>
<Button type="link">Link Button</Button>
</div>
);
};
export default App;
主なプロパティ（属性）は以下の通りです：
type: ボタンのスタイルタイプを指定します。例えば 'primary', 'ghost', 'dashed', 'link', 'text', 'default' などがあります。 onClick: ボタンがクリックされたときに呼ばれるコールバック関数を指定します。 disabled: ボタンを無効にするかどうかを指定します。 loading: ボタンにローディング状態を表示するかどうかを指定します。 icon: ボタン内に表示するアイコンを指定します。 shape: ボタンの形状を指定します。例えば 'circle' や 'round' などがあります。 size: ボタンのサイズを指定します。'large', 'middle', 'small' の中から選べます。
import React from 'react';
import { Divider } from 'antd';
const App = () => {
return (
<div>
<p>テキスト1</p>
<Divider />
<p>テキスト2</p>
</div>
);
};
export default App;
import React from 'react';
import { Tag } from 'antd';
const App = () => {
return (
<div>
<Tag color="magenta">magenta</Tag>
<Tag color="red">red</Tag>
<Tag color="volcano">volcano</Tag>
<Tag color="orange">orange</Tag>
<Tag color="gold">gold</Tag>
<Tag color="lime">lime</Tag>
// 他にも色々な色が用意されています。
</div>
);
};
export default App;
Tag コンポーネントには以下のような主なプロパティがあります：
color: タグの色を指定します。Ant Designはプリセットの色を提供していますが、カスタムカラーを使用することも可能です。 closable: これを true にすると、タグの横に閉じるボタンが表示され、ユーザーがタグを削除できるようになります。 visible: タグの表示/非表示を制御します。 onClose: タグの閉じるボタンがクリックされた時に実行されるコールバック関数を指定します。 また、Tag コンポーネントは CheckableTag というバリエーションも提供しており、これによって選択可能なタグを作成することができます。 CheckableTag はチェックボックスのような振る舞いをし、ユーザーがタグを選択したり選択解除したりできるようになります。 jsx
import React, { useState } from 'react';
import { Tag } from 'antd';
const { CheckableTag } = Tag;
const App = () => {
const [selectedTags, setSelectedTags] = useState(['Tag1']);
const handleChange = (tag, checked) => {
const nextSelectedTags = checked
? [...selectedTags, tag]
: selectedTags.filter(t => t !== tag);
setSelectedTags(nextSelectedTags);
};
return (
<div>
<CheckableTag
key="Tag1"
checked={selectedTags.indexOf('Tag1') > -1}
onChange={checked => handleChange('Tag1', checked)}
>
Tag1
</CheckableTag>
// 他のタグも同様に追加できます。
</div>
);
};
export default App;
import React from 'react';
import { Menu, Dropdown, Button } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const menu = (
<Menu>
<Menu.Item key="0">
<a href="http://www.alipay.com/">1st menu item</a>
</Menu.Item>
<Menu.Item key="1">
<a href="http://www.taobao.com/">2nd menu item</a>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="3" disabled>
3rd menu item（disabled）
</Menu.Item>
</Menu>
);
const App = () => (
<Dropdown overlay={menu}>
<Button>
Button <DownOutlined />
</Button>
</Dropdown>
);
export default App;
import React from 'react';
import { Space, Button } from 'antd';
const App = () => (
<Space>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</Space>
);
export default App;
Space コンポーネントの主なプロパティは以下の通りです：
size: 子要素間のスペースの大きさを指定します。 数値またはスペースの大きさを表す文字列（small, middle, large など）を指定できます。 direction: 要素の並び方向を指定します。 vertical か horizontal を指定でき、デフォルトは horizontal です。 align: 垂直方向のアラインメント(一列に整列)を指定します。 start, end, center, baseline のいずれかを指定できます。 wrap: 要素が折り返すかどうかを指定します。 true に設定すると、親要素の幅に合わせて子要素が折り返します。 Space コンポーネントはフォーム、カード、ページレイアウトなど、さまざまな場面で利用されます。