ligerui框架有哪些代码示例

LigerUI

小樊

2024-10-22 11:43:11

栏目: 编程语言

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 的官方文档和示例。

ligerui框架有哪些代码示例

最新问答

相关标签