时间戳

首页 > 解决方案 > 如何根据拨动开关设置使元素消失

html - 如何根据拨动开关设置使元素消失

问题描述

我有一个看起来像这样的滑出式菜单控件

在此处输入图像描述

顶部有一个切换开关，当前已关闭（即基本模式），我希望在切换处于基本模式时元素不可见，除了定义标签和它旁边的下拉菜单。当开关打开（即高级模式）时，菜单应如下所示（图像）。切换开关的 html 是

<label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
      </label>

UI 控件没有正确对齐，因为我正在学习在旅途中编写 HTML/CSS。

当拨动开关处于基本模式时，这是屏幕上不应显示的控件之一

<div class="dropdowns-container">
      <label kmdFormLabel>Rounding Mode</label>
      <kmd-dropdown
      [(ngModel)]="roundMode"
      [options]="allRoundModes"
      [disable]="!editable"
      size="medium"
      [externalLabel]="true"
      inlineLabel="Select Rounding Mode"
      (onChange)="roundModeChange($event)">
      </kmd-dropdown>
    </div>

如何做到这一点，我可以使用任何特定的控件或 Angular 设置吗？

标签： htmlcssangular

解决方案

它只是创建一个变量，例如“advancedShow”，并用“if”将所有输入包含在一个 ng-container 中

<input type="checkbox" [(ngModel)]="advancedShow">
    <span class="slider round"></span>
</label> 
    ...here your inputs always visible..
<ng-container *ngIf="advancedShow">
    ...here yours inputs only sisible if slider is true...
</ng-container>

推荐阅读