Question

我使用angular2创建了一个树视图。它有以下基本布局：

这背后的HTML代码如下：

 <div class = "allTopics">
    <ul  *ngFor = "let topic of directories">
        <li>
            <div class = "subtopics"><span class = "iconButton" (click) = "topic.toggle()"> {{topic.getIcon()}}</span>
            <span>{{topic.mainTopic}}</span></div>
            <div *ngIf = "topic.expanded">
                <ul>
            <span *ngFor="let subtopic of topic.subTopics"><a class = "title"  href="">{{subtopic}}</a></span>
          </ul>
                <li><tree-view  [directories] = "topic.directories"></tree-view></li>
            </div>
        </li>
    </ul>
</div>

相应的CSS代码如下：

ul {
    list-style-type: none;
    color: #000;
   }

.horizontal-line{
    margin-bottom: 20px;
    border-bottom: 1px solid black;

}

.iconButton{
    font-size: 20px;
    margin-right: 5px;
    cursor:pointer;
}

.allTopics {
    border-style: none;
    border-left: 1px solid black;
    margin-left: 10;
}
.subtopics{
    border-style: solid;
    border-width: 2px;
    border-radius: 6px;
    width: 110;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 5px;
}
a {
    border-style: solid;
    border-width: 2px;
    border-radius: 6px;
    border-color: #000;
    width: 200px;
    margin-top: 48px;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 10px;
}

但是，在这个带有垂直线的树视图中，我需要每个子元素的水平线。所以所需的布局将如下所示：

Desired layout for tree-view

我能够绘制水平线，但我无法改变它的位置。有人可以帮助我。

以下是我正在获取数据的angular2代码：

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

import { TopicDirectory } from './topic-directory.component';
import { TreeView } from './all-topics.component';

@Component({
    selector: 'allTopicsList',
    templateUrl: './app/topics/all-topics/all-topics-list.component.html',
    directives: [TreeView]
})

export class AllTopicsComponent{
    directories: Array<TopicDirectory>;

    constructor(){
        this.loadTopics();
    }

    loadTopics(){
        let title1 = new TopicDirectory('Title 1',[],['This is the first title name'])
        let title2 = new TopicDirectory('Title 2',[],['This is the second title name'])
        let title3 = new TopicDirectory('Title 3',[],['This is the third title name'])
        let subtopic1 = new TopicDirectory('Sub Topic 1',[title1,title2, title3],[]);
        let title4 = new TopicDirectory('Title 1',[],['This is the first title name'])
        let title5 = new TopicDirectory('Title 2',[],['This is the second title name'])
        let title6 = new TopicDirectory('Title 3',[],['This is the third title name'])
        let subtopic2 = new TopicDirectory('Sub Topic 2',[title4,title5, title6],[]);
        let topic1 = new TopicDirectory('Topic 1',[subtopic1],[])
        let topic2 = new TopicDirectory('Topic 2',[subtopic2],[])

        this.directories = [topic1, topic2];

    }

}

如何使用HTML列表元素CSS树视图？

0 个答案: