ligerui框架有哪些代碼示例

小樊
81
2024-10-22 11:43:11

LigerUI 是一個(gè)基于 React 的 UI 組件庫(kù)，提供了豐富的組件以支持快速開(kāi)發(fā)。以下是一些 LigerUI 框架的代碼示例：

  1. 按鈕組件：
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;
  1. 表單組件：
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;
  1. 表格組件：
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;
  1. 彈窗組件：
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 框架中的按鈕、表單、表格和彈窗組件。更多組件和用法，請(qǐng)參考 LigerUI 的官方文檔和示例。

0 踩