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

const { Panel } = Collapse;

const titleStyle = {
  color: '#1D1D1F',
  height: 20,
  marginBottom: 4,
};

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