-
Notifications
You must be signed in to change notification settings - Fork 0
/
a-styles.txt
135 lines (113 loc) · 4.26 KB
/
a-styles.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=common-alert-messages
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: rgb(3, 0, 0);
}
.mat-tree-node:hover {
background-color: rgba(255, 0, 191, 0.1) !important;
}
.example-tree-invisible {
display: none;
}
.example-tree ul,
.example-tree li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
background-color: rgba(187, 255, 0, 0.1) !important;
}
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
{{node.name}}
</li>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
<li >
<div class="mat-tree-node" >
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<span> {{node.name}}</span>
</div>
<ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
*****************
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding [style.background-color]="node.index==0?'orange':null">
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
<span >{{node.name}}</span>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding [style.background-color]="node.index==0?'yellow':null">
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<span>{{node.name}}</span>
</mat-tree-node>
</mat-tree>
******************
.txtColor:hover{
color: red;
cursor: pointer;
}
.background-highlight{
background: green;
}
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!-- Leaf node -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding
(click)="activeNode = node" [ngClass]="{ 'background-highlight': activeNode === node }">
<button mat-icon-button></button> <span class="txtColor">{{node.item}}</span>
</mat-tree-node>
<!-- expandable node -->
<mat-tree-node *matTreeNodeDef="let node; when: hasChild;let i =index" matTreeNodePadding>
<button id="node-{{node.item}}" mat-icon-button [attr.aria-label]="'toggle ' + node.filename" (click)="loadChildren(node)"
matTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button> {{node.item}}
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node; when: isLoadMore">
<button mat-button (click)="loadMore(node.loadMoreParentItem)">
Load more...
</button>
</mat-tree-node>
</mat-tree>
*****************
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>