Как я могу скрыть кнопку на мобильном медиа-запросе и показать их на клике? - PullRequest
Новая
       36

Как я могу скрыть кнопку на мобильном медиа-запросе и показать их на клике?

2 голосов
/ 31 октября 2019

У меня есть dropdown button, который я хочу скрыть при mobile layout. На мобильном макете должно быть 1 main button, а при нажатии этой кнопки trigger должно отображаться выпадающее меню. На данный момент на мобильном наложении основная кнопка перекрывается кнопкой выпадающего меню. Как я могу достичь этой функциональности?

Вот мой код scss 

@media (min-width: 700px) {
  .bot {
    display: none;
  }
}

@if (max-width: 700px) {
  .tools {
    display: block;
  }
} @else {
  .tools {
    display: none;
  }
}

  .toolss {

    background-color: $-white;
    height: 100%;
    left: 0;
    overflow-y: auto;
    padding-bottom: 65px;


    .tools {
      background: white;
      border: 0;
      border-bottom: 1px dark-gray-shade-light;
      border-radius: none;
      border-top: 1px dark-gray-shade-light;
      height: auto;

    }
    }

  .tools {
    background-color: white;
    display: block;


    @media (max-width: 700px) {
      display: block;
    }
}}

Вот мой код HTML 

<ng-container>
    <button class="bot" (click)="fill()">Data 
    </button>
    <div class="toolss">
      <div class="tools">
        <dropdown-overlay [labelDrop]="i18nService
          ></dropdown-overlay>
      </div>
    </div>

1 Ответ

0 голосов
/ 01 ноября 2019

DEMO

SASS 

.hide-dropdown{
   display: block;
}

@media(max-width: 700px) {
    .hide-dropdown{
        display: none;
    }
}

.hide-button {
    display: none
}

@media(max-width: 700px) {
    .hide-button {
        display: block;
    }
}

HTML 

<ng-container>
    <button class="bot hide-button" (click)="fill()">Data 
    </button>
    <div class="toolss" [ngClass]="{'hide-dropdown': !isClicked}">
      <div class="tools">
        <dropdown-overlay [labelDrop]="i18nService
          ></dropdown-overlay>
      </div>
    </div>
</ng-container>

TS 

isClicked: boolean = false;

fill() {
    this.isClicked = true;
}
...