标签: vmware-clarity
错误模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）：
我正在运行以下命令：
ng build --prod --aot --base-href ./
并接收；
ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js):
$clr-popover-box-shadow-color: rgba(clr-getColor(dark), 0.25);
^
Argument `$color` of `rgba($color, $alpha)` must be a color
in /Users/allan/git/dcfrontend/node_modules/@clr/ui/src/utils/_variables.global.scss (line 84, column 32)
我使用的是 Angular 7 和 Clarity 1.04。
摘自我的angular.json：
"styles": [
"node_modules/@clr/icons/clr-icons.min.css",
"node_modules/@clr/ui/clr-ui.min.css",
"node_modules/prismjs/themes/prism-solarizedlight.css",
"src/styles.css",
"node_modules/lato-font/css/lato-font.min.css"
],
"scripts": [
"node_modules/core-js/client/shim.min.js",
"node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
"node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"node_modules/web-animations-js/web-animations.min.js",
"node_modules/prismjs/prism.js",
"node_modules/prismjs/components/prism-typescript.min.js",
"node_modules/@clr/icons/clr-icons.min.js"
]
推荐指数
解决办法
查看次数
使用 Angular 组件 clrForm 时，如何使表单中输入字段的宽度为 100% 清晰
例子
<form clrForm>
<clr-input-container>
<label>Field 1 label</label>
<input clrInput type="text" [(ngModel)]="model" name="example" style="width:100%" />
</clr-input-container>
<clr-input-container>
<label>Field 2 label</label>
<input clrInput type="text" [(ngModel)]="model" name="example" style="width:100%" />
</clr-input-container>
</form>
上面是来自清晰表单的代码示例，我在表单中使用角度分量，问题是当我使用没有角度分量的表单时，当我给出 style="100%" 时，输入宽度为 100%，但如果我使用同样的东西使用角度分量，尽管我给了 style="100%"，但输入字段没有达到 100%。请让我知道在使用角度分量作为清晰度形式时如何将宽度设置为 100% 的原因。
推荐指数
解决办法
查看次数
打开Clarity Signpost不会发出其状态
我正在使用Clarity Signposts并且需要它的状态(无论是打开还是关闭).我正在使用*clrIfOpen结构指令并为其分配了isOpen变量.isOpen最初为false,但在Signpost打开时应更新为true.
<clr-signpost>
<clr-signpost-content *clrIfOpen="isOpen">
<p>Signpost Content!</p>
<span>Signpost State: {{isOpen}}</span>
</clr-signpost-content>
</clr-signpost>
我也尝试了clrIfOpenChange输出,clrIfOpen但是当路标打开时也没有触发.
清晰度版本:0.10.0-rc.1
Plnkr:https://plnkr.co/edit/OQupObBd9OkJZSpOhpfq ？p = preview
推荐指数
解决办法
查看次数
如何正确使用vmware clear sidenav？
我正在努力让VMware Clarity UI sidenav正常工作,并且会喜欢一个可靠的例子.我正在使用clear-seed项目和app.component.html里面我有他们提供的默认子项目:
<nav class="sub-nav" [clr-nav-level]="1">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#" [routerLink]="['/home']"
[class.active]="router.url==='/home' || router.url==='/'">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" [routerLink]="['/about']" [class.active]="router.url==='/about'">About</a>
</li>
</ul>
</nav>
我用以下内容替换了他们的主页:
<nav class="sidenav">
<section class="sidenav-content">
<a class="nav-link" href="/test">Test</a>
</section>
</nav>
sidenav正确显示,但单击Test链接会导致整个应用程序刷新,我的测试页面的内容显示在主页下,但是subnav消失了.如何将测试页面的内容显示在子窗口的右侧？您可以在此处查看代码的GIST:https://gist.github.com/MichaelRegert/6c5d9d3c8b52aa99d1dc66a314239f0e
推荐指数
解决办法
查看次数
使用Clarity设计系统构建Angular 2应用程序
将Clarity Design System从他们的官方教程添加到角度为2 5min的快速入门后,我收到了这个错误.浏览器控制台中的错误没有太大帮助,请问有什么建议吗？
zone.js:1382 GET http://localhost:3000/clarity-angular 404 (Not Found)
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/clarity-angular(…)
app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {ClarityModule} from 'clarity-angular';
import {AppComponent} from './app.component';
@NgModule({
imports: [BrowserModule,
ClarityModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
的index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="node_modules/clarity-icons/clarity-icons.min.css">
<script src="node_modules/mutationobserver-shim/dist/mutationobserver.min.js"></script>
<script src="node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
<script src="node_modules/clarity-icons/clarity-icons.min.js"></script>
<link rel="stylesheet" …推荐指数
解决办法
查看次数
使用全局样式表覆盖clarity-ui.min.css
我是angualr2的新手,我正在努力建立一个清晰的网页.
我想主要的容器的高度设置clr-main-container,以min-height: 100vh;中style.css,我放置在文件~/src/style.css这是我设置全局样式.
在默认的清晰度css文件中,样式设置为
.main-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh;
background: #fafafa;
overflow: hidden;
-webkit-transform: translateZ(0);
正如我所提到的,我正在尝试更改height: 100vh;为min-height: 100vh;在我尝试设置的style.css文件中
.main-container {
min-height: 100vh !important;
}
覆盖默认的清晰度css文件,但这不适合我.
我确实在angilar-cli.json文件中包含了style.css.
"styles": [
"styles.css",
"../node_modules/clarity-icons/clarity-icons.min.css",
"../node_modules/clarity-ui/clarity-ui.min.css",
"../node_modules/handsontable/dist/handsontable.full.css",
"../node_modules/nouislider/distribute/nouislider.min.css",
"../node_modules/intro.js/introjs.css"
],
但我仍然有这个问题.我错过了什么？
推荐指数
解决办法
查看次数
如何禁用属于Clarity数据网格的复选框？
我使用Clarity数据网格,我需要在某些条件下禁用复选框选择.我找不到API这样做.请帮助和谢谢.
推荐指数
解决办法
查看次数
如何设置clr-icon的形状属性
我在用<clr-icon shape=""/>.我想让它shape充满活力.如果我指定<clr-icon [shape]="shapeValue"/>它抛出错误形状不是已知的属性clr-icon
推荐指数
解决办法
查看次数
如何通过vmware清晰度动态切换主题
Vmware Clarity 0.10.16刚刚发布了新的深色主题。这很棒！
他们描述了如何添加新主题，但是没有讨论在页面内动态更改主题的可能性。是因为它不可行吗？
如果是的话，我该如何使用Angular 4+？任何可以帮助我解释如何实现这一目标的网站？
提前致谢！
推荐指数
解决办法
查看次数
如何更改VMware Clarity Design System品牌图标大小
我正在使用VMware Clarity Design System UI(https://vmware.github.io/clarity/)并正在运行他们的种子应用程序.我正在尝试用我自己的品牌替换他们的品牌图标,但它的尺寸不同.我注意到该图标似乎是硬编码为36px x 36px.如果我尝试在CSS中设置新的大小,它仍然呈现为36px x 36px.这是硬编码的吗？
推荐指数
解决办法
查看次数
标签 统计
vmware-clarity ×10
clarity ×6
angular ×5
vmware ×2
css ×1
javascript ×1
sass-loader ×1
systemjs ×1