@rdkmaster/jigsaw-labs
Version:
Jigsaw, the next generation component set for RDK
34 lines (31 loc) • 5.45 kB
HTML
<div class="jigsaw-fish-bone-framework">
<div class="jigsaw-fish-bone-range">
<div class="jigsaw-fish-bone-main">
<div class="jigsaw-fish-bone-head">
<svg *ngIf="theme == 'white'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="图层_1" x="0px" y="0px" width="108.472px" height="119.724px" viewBox="-27.112 -36.947 108.472 119.724" enable-background="new -27.112 -36.947 108.472 119.724" xml:space="preserve" style=" color-interpolation: blue; ">
<path xmlns="http://www.w3.org/2000/svg" d="M80.423,17.174c-6.248-11.317-36.646-48.986-93.181-54.11c-2.016-0.183-2.243,2.114-2.243,2.114l-0.107,3.539 c0,0-30.166,39.038,5.145,79.495c0,0-32.648-47.556,7.809-77.19c0,0,37.653,0.576,74.843,44.233 c0.566,0.666,2.287,2.809,2.594,3.728c0.438,1.317,0.252,2.02-0.775,3.693c-0.978,1.593-28.08,40.632-92.893,53.954 c-0.942,0.193-2.841,0.555-3.432,2.5c-0.571,1.878,1.251,3.867,2.497,3.627C9.381,77.236,49.367,62.332,77.303,27.34 c0.668-0.836,2.715-3.393,3.197-4.227c0.604-1.047,1.114-2.465,0.721-4.039C81.055,18.411,80.774,17.81,80.423,17.174z" fill="#BABABA"/>
</svg>
<svg *ngIf="theme == 'dark'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="图层_1" x="0px" y="0px" width="108.472px" height="119.724px" viewBox="-27.112 -36.947 108.472 119.724" enable-background="new -27.112 -36.947 108.472 119.724" xml:space="preserve" style=" color-interpolation: blue; ">
<path xmlns="http://www.w3.org/2000/svg" d="M80.423,17.174c-6.248-11.317-36.646-48.986-93.181-54.11c-2.016-0.183-2.243,2.114-2.243,2.114l-0.107,3.539 c0,0-30.166,39.038,5.145,79.495c0,0-32.648-47.556,7.809-77.19c0,0,37.653,0.576,74.843,44.233 c0.566,0.666,2.287,2.809,2.594,3.728c0.438,1.317,0.252,2.02-0.775,3.693c-0.978,1.593-28.08,40.632-92.893,53.954 c-0.942,0.193-2.841,0.555-3.432,2.5c-0.571,1.878,1.251,3.867,2.497,3.627C9.381,77.236,49.367,62.332,77.303,27.34 c0.668-0.836,2.715-3.393,3.197-4.227c0.604-1.047,1.114-2.465,0.721-4.039C81.055,18.411,80.774,17.81,80.423,17.174z" fill="#6B6B6B"/>
</svg>
<p [trustedHtml]="data.label" [trustedHtmlContext]="data.innerHtmlContext"></p>
</div>
<div class="jigsaw-fish-bone-foot">
<svg *ngIf="theme == 'white'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="图层_1" x="0px" y="0px" width="48.131px" height="96.787px" viewBox="-15.546 -32.081 48.131 96.787" enable-background="new -15.546 -32.081 48.131 96.787" xml:space="preserve">
<path d="M30.939,12.26C24.085,2.477,4.109-24.511-12.51-31.895c-0.275-0.124-0.568-0.186-0.871-0.186 c-0.427,0-0.843,0.126-1.198,0.362c-0.618,0.408-0.978,1.097-0.967,1.838c0.017,0.776,0.562,19.38,14.719,45.509l0.371,0.686 L-0.827,17C-14.984,43.13-15.529,61.733-15.546,62.515c-0.011,0.736,0.349,1.426,0.967,1.836c0.607,0.399,1.406,0.469,2.069,0.174 c17.289-7.682,38.208-36.577,44.212-45.25c0,0,0.883-1.43,0.883-2.735c0-1.709-0.883-3.185-0.883-3.185 C31.47,13.019,31.214,12.653,30.939,12.26z M26.337,19.394l-1.122,1.545C18.142,30.683,4.407,48.333-8.141,57.05l-2.833,1.969 l0.596-3.399c1.4-7.98,4.813-20.739,13.139-36.21l0.405-0.756c0,0,0.59-1.464,0.59-2.341s-0.59-2.336-0.59-2.336L2.76,13.22 C-5.567-2.25-8.979-15.009-10.379-22.99l-0.596-3.398l2.833,1.968C4.407-15.704,18.142,1.947,25.215,11.69l1.138,1.569 c0.194,0.2,1.061,1.706,1.061,3.058C27.413,17.709,26.538,19.188,26.337,19.394z" fill="#BABABA"/>
</svg>
<svg *ngIf="theme == 'dark'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="图层_1" x="0px" y="0px" width="48.131px" height="96.787px" viewBox="-15.546 -32.081 48.131 96.787" enable-background="new -15.546 -32.081 48.131 96.787" xml:space="preserve">
<path d="M30.939,12.26C24.085,2.477,4.109-24.511-12.51-31.895c-0.275-0.124-0.568-0.186-0.871-0.186 c-0.427,0-0.843,0.126-1.198,0.362c-0.618,0.408-0.978,1.097-0.967,1.838c0.017,0.776,0.562,19.38,14.719,45.509l0.371,0.686 L-0.827,17C-14.984,43.13-15.529,61.733-15.546,62.515c-0.011,0.736,0.349,1.426,0.967,1.836c0.607,0.399,1.406,0.469,2.069,0.174 c17.289-7.682,38.208-36.577,44.212-45.25c0,0,0.883-1.43,0.883-2.735c0-1.709-0.883-3.185-0.883-3.185 C31.47,13.019,31.214,12.653,30.939,12.26z M26.337,19.394l-1.122,1.545C18.142,30.683,4.407,48.333-8.141,57.05l-2.833,1.969 l0.596-3.399c1.4-7.98,4.813-20.739,13.139-36.21l0.405-0.756c0,0,0.59-1.464,0.59-2.341s-0.59-2.336-0.59-2.336L2.76,13.22 C-5.567-2.25-8.979-15.009-10.379-22.99l-0.596-3.398l2.833,1.968C4.407-15.704,18.142,1.947,25.215,11.69l1.138,1.569 c0.194,0.2,1.061,1.706,1.061,3.058C27.413,17.709,26.538,19.188,26.337,19.394z" fill="#6B6B6B"/>
</svg>
</div>
<j-fish-bone-item
*ngFor="let itemData of data.nodes; even as isEven; odd as isOdd; index as i"
class="jigsaw-fish-bone-item-rotate-{{isEven ? 'up' : 'down'}} jigsaw-fish-bone-{{isEven ? 'up' : 'down'}} jigsaw-fish-bone-level-0"
[childRotate]="isEven ? 'down' : 'up'"
[firstLevelRotate]="isEven ? 'up' : 'down'"
[data]="itemData"
[level]="0">
</j-fish-bone-item>
</div>
</div>
</div>