Как изменить ширину или другие CSS-стили div в угловых 5, нажав кнопку? - PullRequest
Новая
       18

Как изменить ширину или другие CSS-стили div в угловых 5, нажав кнопку?

0 голосов
/ 25 сентября 2018

Я пытаюсь загрузить панель навигации полной ширины, щелкнув значок меню.И я использую Angular 5. Я пробовал гуглить о манипуляциях с DOM в Angular 5+ версиях, но это действительно запутанно и сложно.Мой вопрос о том, как я могу изменить или манипулировать этими элементами HTML, используя angular (машинопись), как мы привыкли делать с обычным javascript и JQuery.Мой вопрос касается изменения ширины div, но я хочу знать, как я могу работать с другими стилями CSS и техниками манипулирования DOM.

Вот мой код

home.component.html 

 <section id="top">
  <div id="menu">
    <a id="toggle" (click)="openMenu()" >
      <i class="fa fa-bars menu-bar" aria-hidden="true"></i>
    </a>
  </div>
  <div id="sidenav" class="overlay" ref="#sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="overlay-content">
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>
  </div>
  <div id="heading">
    <div id="logo">Koa</div>
    <div id="tagline">next generation web framework for node.js</div>
  </div>
</section>

home.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

styles.scss 

/* You can add global styles to this file, and also import other style files */
@import "~bootswatch/dist/lux/_variables.scss";
@import "~bootstrap/scss/bootstrap.scss";
@import "~bootswatch/dist/lux/_bootswatch.scss";

body {
    background-color: #F5F5F5;
}

//navbar
#menu {
    position: fixed;
    top: 35px;
    right: 42px;
    z-index: 50;
}
#menu a#toggle {
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    background:transparent;
    border-radius: 2px;
    border: 1px solid transparent;
    z-index: 5;
    font-size: 1.3rem;
    color: black;
}
//sidenav 
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
//heading or showcase
#heading {
    position: absolute;
    top: 50%;
    margin-top: -150px;
    text-align: center;
    width: 100%;
}
#logo {
    font: 150px 'Italiana', sans-serif;
    text-transform: lowercase;
}
#tagline {
    font-size: 16px;
}

1 Ответ

0 голосов
/ 25 сентября 2018

Вы можете использовать [ngClass]="{'scssClassName': condition}" для добавления класса к классу следующим образом:

<div class="existingClassWithNormalWidth" [ngClass]="{'scssClassNameWithFullWidth': condition}">{{childTags}}</div>.

Вы также можете задать разные классы для разных условий в одних и тех же тегах, например: [ngClass]="{'scssClassName': condition, 'scssClassName2': condition2, 'scssClassName3': anyBooleanVariable,}"

Вы можете установить условие (или логическое значение) равным true, нажав кнопку.Angular автоматически добавит класс к самому div.

Вы также можете использовать [ngStyle] только для полной ширины, но если вы хотите придать дополнительный стиль, вам лучше создать класс для SCSS и использовать [ngClass].

Найти официальный документ для класса https://angular.io/api/common/NgClass (если вы хотите добавить класс)

Найти официальный документ только для стиля https://angular.io/api/common/NgStyle (Если только вы хотите сделатьполная ширина с ngStyle)

...