<script>
import Basic from './basic';
import Checkable from './checkable';
import Multiple from './multiple';
import TreeData from './treeData';
import Suffix from './suffix';
import Async from './async';

import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';

const md = {
  cn: `# TreeSelect 树型选择控件
  ## 何时使用

类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。

        ## 代码演示`,
  us: `# TreeSelect
  ## When To Use

\`TreeSelect\` is similar to \`Select\`, but the values are provided in a tree like structure.
Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.
## Examples
  `,
};
export default {
  category: 'Components',
  subtitle: '树选择',
  type: 'Data Entry',
  title: 'TreeSelect',
  render() {
    return (
      <div>
        <md cn={md.cn} us={md.us} />
        <demo-sort>
          <Basic />
          <Checkable />
          <Multiple />
          <TreeData />
          <Suffix />
          <Async />
        </demo-sort>
        <api>
          <template slot="cn">
            <CN />
          </template>
          <US />
        </api>
      </div>
    );
  },
};
</script>