请用ionic3写一个树形步骤条（注：依靠ionic而并非纯css）。

在Ionic 3中创建一个树形步骤条，我们需要结合Ionic的组件和Angular的递归组件技术。以下是一个简单的示例，说明如何创建这样一个组件：

1. 设置Ionic项目：

如果你还没有Ionic项目，你可以使用Ionic CLI创建一个新项目：

ionic start ionic-stepper-app blank --type=ionic-angular
cd ionic-stepper-app

2. 创建树形步骤条组件：

在src/components目录下创建一个新的Angular组件，例如tree-stepper.component.ts和tree-stepper.component.html。
3. tree-stepper.component.ts：

import { Component, Input, ContentChild, TemplateRef, forwardRef } from '@angular/core';

@Component({
  selector: 'tree-stepper',
  templateUrl: 'tree-stepper.component.html'
})
export class TreeStepperComponent {
  @Input() steps: any[];
  @ContentChild(TemplateRef, { static: true }) template: TemplateRef<any>;
}

4. tree-stepper.component.html：

<div *ngFor="let step of steps; let i = index">
  <div class="step">
    <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: step }"></ng-template>
    <tree-stepper *ngIf="step.children && step.children.length > 0" [steps]="step.children"></tree-stepper>
  </div>
</div>

5. 在父组件中使用：

首先，你需要在父组件的模块中声明和导入TreeStepperComponent。然后，在父组件的模板中使用它：

<tree-stepper [steps]="steps">
  <ng-template let-step="step">
    <div class="step-content">
      <h4>{{ step.name }}</h4>
      <p>{{ step.description }}</p>
    </div>
  </ng-template>
</tree-stepper>

在父组件的TS文件中：

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  steps = [
    {
      name: 'Step 1',
      description: 'This is the first step',
      children: [
        { name: 'Sub-step 1.1', description: 'This is a sub-step of Step 1' },
        { name: 'Sub-step 1.2', description: 'Another sub-step of Step 1' }
      ]
    },
    { name: 'Step 2', description: 'This is the second step' },
    // ... more steps ...
  ];
}

6. 样式：

你可以根据需要为步骤条添加样式。例如，为.step和.step-content添加适当的CSS样式。
7. 注意事项：
* 确保在模块中正确导入了TreeStepperComponent并添加到了declarations数组中。
* 上述示例是一个简化的版本，你可能需要根据实际需求进行调整。
* 递归组件在某些情况下可能会导致性能问题，特别是当树形结构非常深或宽时。确保在实际应用中对其进行适当的优化。