标签: vmware-clarity

我正在使用带有角度4代码的清晰度模块.使用他们的警告框示例时,我收到上述错误

示例代码

<div class="alert alert-info">
    <div class="alert-items">
        <div class="alert-item">
            <div class="alert-icon-wrapper">
                <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
            </div>
            <span class="alert-text">...</span>
            <div class="alert-actions">
                <a href="..." class="alert-action">Acknowledge</a>
                <a href="..." class="alert-action">Reset to green</a>
            </div>
        </div>
    </div>
    <button type="button" class="close" aria-label="Close">
        <clr-icon aria-hidden="true" shape="close"></clr-icon>
    </button>
</div>

错误堆栈详细信息

错误错误:未捕获(在承诺中):错误:没有AlertIconAndTypesService的提供程序!错误:没有AlertIconAndTypesService的提供者!at injectError(core.es5.js:1169)atNisProviderError(core.es5.js:1207)at ReflectiveInjector_.webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull(core.es5.js:2649)在ReflectiveInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault(core.es5.js:2688)在ReflectiveInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey(core.es5.js:2620)at RefinInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.get(core.es5.js:2489)at resolveNgModuleDep( core.es5.js:9475)at NdModuleRef_.webpackJsonp .../../../core/@angular/core.es5.js.NgModuleRef_.get(core.es5.js:10557)at resolveDep(core. es5.js:11060)在injectClass(core.es5.js:10913)的injectError(core.es5.js:1169),在noProviderError(core.es5.js:1207),在ReflectiveInjector_.webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull(core.es5.js:2649)在ReflectiveInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault(core.es5.js:2688)在ReflectiveInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey(core.es5.js:2620)at RefinInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.get(core.es5.js:2489)at resolveNgModuleDep( core.es5.js:9475)at NdModuleRef_.webpackJsonp .../../../core/@angular/core.es5.js.NgModuleRef_.get(core.es5.js:10557)at resolveDep(core. es5.js:11060)在resolveClass(core.es5.js:10913)at resolvePromise(polyfills.bundle.js:3328)at …

即使表中没有行,我也试图占用所有垂直空间.clr-datagrid是否可以自定义？似乎我必须手动覆盖flexbox属性.datagrid-host并.datagrid-overlay-wrapper使其沿列方向增长.

我甚至尝试过,但数据网格似乎没有垂直增长.

我讨厌使用 ng-deep 但没有更好的选择。

我在项目中使用 VMware Clarity https://v1.clarity.design/modals ，在某些情况下，我需要覆盖 modal-body 类。因此，我在我的 component.scss 文件中使用它来覆盖它：

::ng-deep .modal-body {
  overflow-y: visible;
  overflow-x: visible;
}

这符合我的目的。但其他模式就会出现问题。打开上述模式后，如果我打开任何其他模式，上述样式也会影响这些模式。我只想要一种模式的上述样式。那么我怎样才能做到这一点。

我想知道当组件被破坏时是否有一个选项可以重置上述样式或 Angular 建议什么。

视口大小较小时,表单字段会重叠.当空间不足时,有没有办法在下一行捕捉表单字段？

代码片段:

<form class="compact">
          <div class="row">
            <div class="col-xs-6">
              <section class="form-block">
                <div class="form-group">
                  <label for="aForm_1">This is a form field</label>
                  <input type="text" id="aForm_1" placeholder="Enter value here" size="45">
                </div>
              </section>
            </div>
            <div class="col-xs-6">
              <section class="form-block">
                <div class="form-group">
                  <label for="aForm_2">Overlapping Text</label>
                  <input type="text" id="aForm_2" placeholder="Enter value here" size="45">
                </div>
              </section>
            </div>
          </div>
        </form>

这是plunker:https://embed.plnkr.co/ynfi39fIMk1bc8bSBHAp/

重叠的文字

我有一个基本的清晰度角度模板,在sidenav中搜索.当我在移动设备上的sidenav中单击"查找"按钮时,sidenav不会消失.我如何使用角度关闭sidenav？

在Clarity Icon文档中,他们表明您可以使用shape属性来设置图标形状,如下所示:

<clr-icon shape="info-circle" size="16"></clr-icon>

在我的角度模板中,我使用了像这样的clr-icon元素:

<clr-icon [shape]="myShape"></clr-icon>

并使用我的组件设置绑定到的形状的字符串值myShape:

export class MyComponent {
    public myShape = 'volume-up';

    changeShape() {
        if(this.myShape === 'volume-up') {
            this.myShape = 'volume-mute';
            return;
        }
        this.myShape = 'volume-up;
    }
}

使用按钮(模板中未显示)我想运行changeShape()动态更改图标的形状但没有发生任何事情,我缺少什么？

近年来我已经大多采用Bootstrap3处理CSS和响应,但几个星期前,我无意中发现了明晰化项目.我无法理解的一件事与文档中常见的Angular Components有关.可以在这里找到示例.后来的链接提到HTML式的标签,如<clr-dropdown>...</clr-dropdown>或<clr-icon>...</clr-icon>.我是否理解正确,使用Angular时这些标签的使用才有意义,否则会被忽略？

我没有使用Angular的经验,我也不打算学习它,但是以Angular这样的方式使用这些Clarity组件会非常棒.有人试过吗？这样做甚至有意义吗？我没有在文档中找到答案,所以我很感激这里的答案.

提前致谢.

我正在使用VMWare Clarity Datagrid组件.

描述:

我有两个数据网格,当扩展左数据网格(红色)的一行时,我设法扩展了右边的数据库(蓝色).

我的目标:

1. 隐藏右侧数据网格上的插入符号列,仍然可以展开其行.当我在浏览器display: none;中的.datagrid .datagrid-expandable-caret类中添加规则时,它可以正常工作,但在.scss文件中却没有.
2. 隐藏左数据网格的滚动(红色),仍然可以滚动.
3. 同步两个数据网格的滚动(可能使用第三方代码).

在这里,我用angular2 +中的例子做了一个plunker.

.right-div {
   float: left;
   height:315px;
   width: 500px;
   border: 4px solid cornflowerblue;

   .datagrid .datagrid-expandable-caret {
       padding: 2px 4px 3px;
       text-align: center;
       display: none;
   }
}

谢谢你的每一个建议.

当我关闭一个模态时,我需要调用一个函数(假或使用表单控件重置模态中的内容)但是我没有在点击后找到任何事件的处理程序,我怎么能这样做？

 <clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="true">
        ...
 </clr-modal>

谢谢.

我的数据模型是一个包含多行的矩阵，其中一些行具有我想使用 Clarity Datagrid Expandable Rows 显示的详细信息。这是我正在尝试构建的简单版本：

<clr-datagrid>
  <clr-dg-column>Artifact</clr-dg-column>
  <clr-dg-column>Category</clr-dg-column>
  <clr-dg-row>
    <clr-dg-cell>AAA</clr-dg-cell>
    <clr-dg-cell>111</clr-dg-cell>
    <ng-container *ngIf="true">
      <clr-dg-row-detail *clrIfExpanded>
        <clr-dg-cell>BBB</clr-dg-cell>
        <clr-dg-cell>222</clr-dg-cell>
      </clr-dg-row-detail>
    </ng-container>
  </clr-dg-row>
  <clr-dg-row>
    <clr-dg-cell>CCC</clr-dg-cell>
    <clr-dg-cell>333</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

我期待看到如下内容：

不幸的是，这是我得到的结果：

当我用任何元素（例如div、ng-container等）包装clr-dg-row-detail时会发生此问题。我需要一个 wrap 元素来放置条件表达式，因为并非每一行都有详细信息。