/**
 * title:"默认",
 * description:"分支节点形态。"
 */
import React from 'react';
import { Tree } from '@alicloud/console-components';

const TreeNode = Tree.Node;

const contentStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(2, 1fr)',
  gap: 36,
};

export default () => {
  return (
    <div style={contentStyle}>
      <Tree defaultSelectedKeys={['14']} defaultExpandedKeys={['7', '11']}>
        <TreeNode label="默认项" key="0">
          <TreeNode label="默认项" key="1" />
        </TreeNode>
      </Tree>
      <Tree defaultSelectedKeys={['14']} defaultExpandedKeys={['0']}>
        <TreeNode label="默认项" key="0">
          <TreeNode label="默认项" key="1" />
        </TreeNode>
      </Tree>
      <Tree defaultSelectedKeys={['0']}>
        <TreeNode label="聚焦项" key="0">
          <TreeNode label="默认项" key="1" />
        </TreeNode>
      </Tree>
      <Tree defaultSelectedKeys={['0']} defaultExpandedKeys={['0']}>
        <TreeNode label="聚焦项" key="0">
          <TreeNode label="默认项" key="1" />
        </TreeNode>
      </Tree>
      <Tree defaultSelectedKeys={['14']}>
        <TreeNode label="禁用项" key="0" disabled>
          <TreeNode label="默认项" key="1" />
        </TreeNode>
      </Tree>
      <Tree defaultSelectedKeys={['14']} defaultExpandedKeys={['0']}>
        <TreeNode label="禁用项" key="0" disabled>
          <TreeNode label="默认项" key="1" />
        </TreeNode>
      </Tree>
    </div>
  );
};