LigerUI 是一個基于 React 的 UI 組件庫,提供了豐富的組件以支持快速開發。以下是一些 LigerUI 框架的代碼示例:
import React from 'react';
import { Button } from 'ligerui';
const App = () => {
return (
<div>
<Button type="primary">Primary Button</Button>
<Button type="secondary">Secondary Button</Button>
</div>
);
};
export default App;
import React from 'react';
import { Form, Input, Select } from 'ligerui';
const App = () => {
return (
<Form>
<Form.Item label="Username">
<Input />
</Form.Item>
<Form.Item label="Password">
<Input.Password />
</Form.Item>
<Form.Item label="Gender">
<Select>
<Option value="male">Male</Option>
<Option value="female">Female</Option>
</Select>
</Form.Item>
<Form.Item>
<Button type="primary">Submit</Button>
</Form.Item>
</Form>
);
};
export default App;
import React from 'react';
import { Table } from 'ligerui';
const App = () => {
const columns = [
{ title: 'Name', dataIndex: 'name' },
{ title: 'Age', dataIndex: 'age' },
{ title: 'Address', dataIndex: 'address' },
];
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
return (
<Table columns={columns} dataSource={dataSource} />
);
};
export default App;
import React, { useState } from 'react';
import { Modal, Button } from 'ligerui';
const App = () => {
const [visible, setVisible] = useState(false);
const showModal = () => {
setVisible(true);
};
const handleCancel = () => {
setVisible(false);
};
return (
<div>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal visible={visible} onCancel={handleCancel}>
<h2>Modal Title</h2>
<p>Modal content</p>
</Modal>
</div>
);
};
export default App;
以上示例展示了如何使用 LigerUI 框架中的按鈕、表單、表格和彈窗組件。更多組件和用法,請參考 LigerUI 的官方文檔和示例。