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 '../BaseElement'; 17import { LitRadioBox } from './LitRadioBox'; 18 19@element('lit-radio-group') 20export class LitRadioGroup extends BaseElement { 21 static get observedAttributes(): string[] { 22 return ['direction']; 23 } 24 25 set layout(vale: string) { 26 this.setAttribute('layout', vale); 27 } 28 29 get direction(): string | null { 30 return this.getAttribute('direction'); 31 } 32 33 get value(): Array<string> { 34 const radio = this.querySelector('lit-radio[checked]') as LitRadioBox; 35 return radio ? [radio.value] : []; 36 } 37 38 initElements(): void {} 39 40 //方向 41 initHtml(): string { 42 return ` 43 <style> 44 :host([direction]) { 45 flex-direction: ${this.direction}; 46 } 47 :host { 48 display: -webkit-flex; 49 display: flex; 50 flex-direction: column; 51 } 52 :host([layout="compact"]) { 53 gap:5px; 54 } 55 :host([layout="dispersion"]) { 56 gap:10px; 57 } 58 :host(:not([direction])) { 59 flex-direction: column; 60 } 61 </style> 62 <slot class="radio-group"></slot>`; 63 } 64} 65