使用 Angular 设置相关 CSS 样式答案

【问题标题】：Using Angular to style related CSS使用 Angular 设置相关 CSS 样式
【发布时间】：2015-02-14 00:33:56
【问题描述】：

我正在使用 Angular 让用户更改引导导航栏的颜色。实际的背景颜色更改本身很简单，但我还想更改一些相关的元素，例如边框颜色和一些阴影。

我有什么：

<nav class="navbar navbar-default" ng-style="{ 'background-color': user.topBarBackgroundColor }">

我将如何使用user.topBarBackgroundColor 为导航栏的边框定义一些阴影（例如较暗的阴影），突出显示lis 等？

请注意，文本颜色可以独立更改，因此任何方法也应并行应用。

编辑

我只需要它在现代浏览器中工作，所以任何采用的 CSS3、HTML5 等都是公平的游戏

【问题讨论】：

简而言之，您需要计算该颜色的较暗版本。我做过类似的事情，并使用 javascript 在颜色空间之间进行转换并计算较深/较浅的颜色。
@Ted 您是否相对确定没有任何 CSS3 技巧可以做到？例如。 JS 方法是一种可行的方法，还是 only 可行的方法？
这取决于您希望实现的目标——您可以使用透明的黑色/白色值的轮廓/边框/框阴影等...但很难说这是否有效没有现场样品
这是一个fiddle，带有边框、轮廓和框阴影来说明我的意思。
您希望以哪种方式查看带有 ng-style 的 css-change、某些事件或其他内容？

标签： css angularjs twitter-bootstrap ng-style

【解决方案1】：

我通过创建一个.navbar-rgba-colors 类并将其添加到.navbar 元素来解决这个问题。下面的 CSS (LESS) 会覆盖相关的引导程序默认值：

 .navbar-rgba-colors {
   border-color: rgba(0,0,0,0.2);
   .navbar-nav > li > a,
   a.navbar-brand {
     opacity: 0.7;
   }
   .navbar-nav > li:hover > a,
   .navbar-nav > li > a:focus,
   .navbar-nav > li.active > a,
   .navbar-nav > li.active > a:hover,
   .navbar-nav > li.active > a:focus,
   .navbar-nav > li.open > a,
   .navbar-nav > li.open > a:hover,
   .navbar-nav > li.open > a:focus
   a.navbar-brand:hover,
   .navbar-header:hover > a,
   a.navbar-brand:focus {
     opacity: 1;
     background: rgba(255, 255, 255, 0.1) !important;
   }
 }

opacity 的更改使悬停时的文本看起来更亮，而background 使焦点/活动的a 元素也显得更亮。

然后我像这样在 HTML 中实现：

<nav class="navbar navbar-default navbar-rgba-colors" ng-style="{ 'background-color': user.topBarBackgroundColor }">

对于导航栏中的任何 a 元素：

<a ... ng-style="{ color: user.topBarColor }">Home</a>

现在更改 topBarBackgroundColor 和 topBarColor 的十六进制值会分别更改导航栏的背景颜色和文本颜色。我为此使用angular-bootstrap-colorpicker，它似乎运行良好。

【讨论】：