1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { BaseElement, element } from '../../../../../base-ui/BaseElement'; 17import { LitTable } from '../../../../../base-ui/table/lit-table'; 18 19@element('tab-pane-userplugin') 20export class TabPaneUserPlugin extends BaseElement { 21 static isStateTabHover: boolean = false; 22 private currentSelectionTbl: LitTable | null | undefined; 23 24 // tab页入口函数 25 set data(selectionData: any) { 26 let list = new Array(); 27 for (let key in selectionData) { 28 list.push({ 29 name: key, 30 value: selectionData[key] 31 }) 32 } 33 this.currentSelectionTbl!.dataSource = list; 34 } 35 36 initElements(): void { 37 this.currentSelectionTbl = this.shadowRoot?.querySelector<LitTable>('#selectionTbl'); 38 } 39 // 页面结构 40 41 initHtml(): string { 42 return ` 43 <style> 44 .table-title{ 45 top: 0; 46 background: var(--dark-background,#ffffff); 47 position: sticky; 48 width: 100%; 49 display: flex; 50 } 51 .table-title > h2{ 52 font-size: 16px; 53 font-weight: 400; 54 visibility: visible; 55 width: 50%; 56 padding: 0 10px; 57 } 58 .scroll-area{ 59 display: flex; 60 flex-direction: row; 61 flex: 1; 62 } 63 #selectionTbl{ 64 height:100%; 65 margin-left:20px; 66 } 67 </style> 68 <div id="scroll_view" style="display: flex;flex-direction: column;width: 100%;height: 100%;overflow: auto"> 69 <div style="width: 100%;height: auto;position: relative"> 70 <div class="table-title"> 71 <h2 id="leftTitle">Data Flow</h2> 72 </div> 73 </div> 74 <div class="scroll-area"> 75 <lit-table id="selectionTbl" class="table-left" no-head hideDownload noRecycle> 76 <lit-table-column title="name" data-index="name" key="name" align="flex-start" width="180px"> 77 <template><div>{{name}}</div></template> 78 </lit-table-column> 79 <lit-table-column title="value" data-index="value" key="value" align="flex-start" > 80 <template><div style="display: flex;">{{value}}</div></template> 81 </lit-table-column> 82 </lit-table> 83 </div> 84 </div>` 85 } 86}