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 '../../../../base-ui/BaseElement'; 18import '../../../../base-ui/icon/LitIcon'; 19 20@element('collapse-button') 21export default class CollapseButton extends BaseElement { 22 static get observedAttributes(): string[] { 23 return [ 24 'expand', //展开 25 ]; 26 } 27 28 set expand(value: boolean) { 29 if (value) { 30 this.setAttribute('expand', ''); 31 } else { 32 this.removeAttribute('expand'); 33 } 34 } 35 36 get expand(): boolean { 37 return this.hasAttribute('expand'); 38 } 39 40 initElements(): void { 41 this.onclick = (): void => { 42 this.expand = !this.expand; 43 window.publish(window.SmartEvent.UI.CollapseAllLane, this.expand); 44 }; 45 } 46 47 initHtml(): string { 48 return ` 49<style> 50:host{ 51 position: absolute; 52 left: 0; 53 bottom: 0; 54} 55:host div{ 56 display: flex; 57 padding: 0 6px; 58 /*background-color: #00a3f5;*/ 59} 60:host(:not([expand])) div{ 61 flex-direction: column; 62} 63:host([expand]) div{ 64 flex-direction: column-reverse; 65} 66div:hover{ 67 cursor: pointer; 68} 69</style> 70<div> 71 <lit-icon name="up" size="12"></lit-icon> 72 <lit-icon name="down" size="12"></lit-icon> 73</div>`; 74 } 75} 76