/**
 * title: "折叠面板"
 * description: "Collapse 接受子组件 Panel 展示信息。Panel 可设置： title（标题）、disable（是否可操作）其中 title 可为字符串或 Component 组件。"
 */
import React from 'react';
import { Collapse } from '@alicloud/console-components';

const { Panel } = Collapse;

const titleStyle = {
  margin: '40px 0 4px',
  color: '#1D1D1F',
  height: 20,
};

export default function App() {
  return (
    <div className="App">
      <Collapse defaultExpandedKeys={['2']}>
        <div style={{ ...titleStyle, marginTop: 0 }}>默认</div>
        <Panel title="项目标题" key="1">
          帮助您基于阿里云构建出一个隔离的网络环境，并可以自定义IP
          地址范围、网段、路由表和网关等；此外，也可以通过专线/VPN/GRE等连接方式实现云上VPC与传统IDC的互联，构建混合云业务。
        </Panel>
        <div style={titleStyle}>展开</div>
        <Panel title="项目标题" key="2">
          帮助您基于阿里云构建出一个隔离的网络环境，并可以自定义IP
          地址范围、网段、路由表和网关等；此外，也可以通过专线/VPN/GRE等连接方式实现云上VPC与传统IDC的互联，构建混合云业务。
        </Panel>
        <div style={titleStyle}>禁用</div>
        <Panel title="项目标题" disabled key="3">
          帮助您基于阿里云构建出一个隔离的网络环境，并可以自定义IP
          地址范围、网段、路由表和网关等；此外，也可以通过专线/VPN/GRE等连接方式实现云上VPC与传统IDC的互联，构建混合云业务。
        </Panel>
        <Panel title="项目标题" key="4">
          帮助您基于阿里云构建出一个隔离的网络环境，并可以自定义IP
          地址范围、网段、路由表和网关等；此外，也可以通过专线/VPN/GRE等连接方式实现云上VPC与传统IDC的互联，构建混合云业务。
        </Panel>
      </Collapse>
    </div>
  );
}