использование разных тем для каждого типа пользователя в одном приложении angularJs - PullRequest
Новая
       31

использование разных тем для каждого типа пользователя в одном приложении angularJs

0 голосов
/ 23 мая 2018

Я занимаюсь разработкой одностраничного приложения angularJs.В настоящее время мое приложение имеет четыре вида пользователей (гость, студент, инструктор, администратор).Я хочу показать разные панели для каждой роли пользователя, я хочу показать разные темы для каждого пользователя.Как я могу сделать это в одностраничном приложении.Я видел эту « AngularJS switch css theme при выборе пользователя », но я не смог понять идею.

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Самый простой способ - разработать один файл CSS, который будет отвечать за макет и основные стили, например: 

.component1 {
  display: inline-block;
  width: 10%;
  border-radius: 5px;
}

Затем в отдельных файлах CSS разработайте стили для конкретного пользователя, например: 

.theme1 .component1 {
  color: red;
  background: gray;
}

Еще одна тема, подобная этой: 

.theme2 .component2 {
  color: green;
  background: blue;
}

И последний шаг - добавить тег ng-class = "{'theme1': userType == 'instructor', 'theme2': userType == 'admin' ...} ".

Это в основном то, что объясняет вопрос, который вы упомянули.

0 голосов
/ 23 мая 2018

Вы можете создать один файл CSS, имеющий 4 родительских класса

.guest, .student, .instructor и .admin

Теперь в вашем приложении используйте ng-class в родительском div см. синтаксис ниже 

<div ng-class="{class1 : expression1, class2 : expression2}">
Hello World!
</div>

Допустим, userType содержит значение типа пользователя, вошедшего в систему, затем 

<body ng-class="{guest : userType===guest, student : userType===student, instructor : userType===instructor, admin : userType===admin}">
Hello World!
</body>

ИЛИ вы можете использовать ifеще условия как 

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">
...