Рубрики
Без рубрики

Простой способ создания вкладок, использующих Ngswitch в угловом углу 2+

Это учебник, который создает систему Easy Tab, используя ngswitch и ngswitchcases.

Автор оригинала: Temidayo Ajisebutu.

Привет, ребята, поэтому в основном я работал над проектом, и мне нужно было исправить вкладку, и я искал легкий выход, основанный на том факте, что я очень ленивый. Тогда кажется, что что-то слушало мне и вуаля !! Мой друг ударил меня, что у него была проблема, которую я должен поставить его, как хороший друг, я сказал ему прийти, глядя на его код, я видел что-то очень приятно.

Он создал вкладку, просто используя NGSwitch, и это была Hella Simple. Я просто должен был поделиться этим, потому что так же, как я испытывал боль, пытаясь понять простой способ пойти, я знаю, что многие люди, вероятно, имеют одинаковую проблему.

Не похоже на использование * NGIF было не очень хорошо, но я думаю, что это было аккуратно и прямо к точке, как то, что я собираюсь показать вам.

Итак, давайте начнем

Мы начнем с создания нового проекта на угловой 2+

ng new app ngSwitchTab

С NgswitchTab в качестве имени проекта мы используем для создания учебного пособия NGSwitch.

После выполнения выше, мы ждем некоторое время для Node_Modules для установки, основанные на скорости вашего Интернета время, необходимое для этого процесса, варьируется. Далее, после настройки проекта, мы хотим начать с правильного кода. Вместо того, чтобы создать новый компонент, который будет нести ответственность за приложение, мы собираемся использовать файлы app.component.

App.component.html.




  Here's an easy way to use ngSwitch to create tabs. :)






  
  Toggle Tabs
  
  


  

    

      
    
        
  • Tab 1
    • 
        
  • Tab 2
    • 
      

    

    

      

        
First Tab

        
Toggle switch style tab navigation. Currently only works with two tabs.

        
Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla
          vitae elit libero, a pharetra augue.

      

      

        
Second Tab

        
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo
          quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Как вы можете видеть из кода выше, у нас есть переменная под названием ViewModewhich, отвечает за корпус данных, которые будут переключаться, а директивы NGSwitchcase, которые будут соответствующими значениями.

Давайте украсим HTML-код. Использование каскадного листа в стиле мы будем украсить вкладку, которую мы пытаемся создавать.

Мы будем использовать файл styles.css по умолчанию в каталоге приложения.

Styles.css

body {
  background: rgba(52, 95, 144, 0.07);
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.66667;
}
.container {
  width: 75%;
  margin: 3rem auto;
}
h2 {
  color: #345F90;
  font-size: 24px;
  line-height: 1.25;
  font-family: "Roboto Slab", serif;
  margin-top: 20px;
  margin-bottom: 20px;
}
.tab-slider--nav {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
.tab-slider--tabs {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  border-radius: 35px;
  overflow: hidden;
  background: #fff;
  height: 35px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tab-slider--tabs:after {
  content: "";
  width: 50%;
  background: #345F90;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  border-radius: 35px;
}
.tab-slider--tabs.slide:after {
  left: 50%;
}
.tab-slider--trigger {
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  color: #345F90;
  text-transform: uppercase;
  text-align: center;
  padding: 11px 20px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  display: inline-block;
  -webkit-transition: color 250ms ease-in-out;
  transition: color 250ms ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tab-slider--trigger.active {
  color: #fff;
}
.tab-slider--body {
  margin-bottom: 20px;
}

Теперь давайте сделаем эту работу с помощью ThereScript Code.

App.component.ts.

Этот файл будет отвечать за функциональность TypeScript приложения.

import {
  Component
} from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = '!!!';![tutorial image.PNG](https://cdn.filestackcontent.com/cNXErARcS2w9evXI8BbP)
  viewMode = 'tab1';
}

В этом компонентном файле мы объявляем наш ViewMode, чтобы быть по умолчанию Tab1, означающего Tab1, должен отображаться первым. Вы можете увидеть весь код код на Slackblitz Отказ

Спасибо.

Читайте ещё по теме: