标签: vmware-clarity

我无法将复选框列添加到VMware Clarity数据网格中,或者通常会使多个行选择起作用.

我可以让单一选择工作得很好.

我在VMware Clarity文档中看到了这个示例:https: //vmware.github.io/clarity/documentation/datagrid/batch-action

我觉得我正在按照指示正确操作,但没有显示复选框列(如果我将其更改为单选,单选按钮列会显示).

我的加价:

<clr-datagrid [(clrDgSelected)]="selected" [clDgRowSelection]="true">

<clr-dg-action-bar>
    <div class="btn-group">
        <button type="button" class="btn btn-sm btn-secondary" (click)="onAdd()"><clr-icon shape="plus"></clr-icon> Register</button>
        <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()" ><clr-icon shape="close"></clr-icon> Delete</button>
        <button type="button" class="btn btn-sm btn-secondary" (click)="onEdit()" *ngIf="selected?.length == 1"><clr-icon shape="pencil"></clr-icon> Edit</button>
    </div>
</clr-dg-action-bar>

<clr-dg-column>Name</clr-dg-column>
<clr-dg-column>Serial #</clr-dg-column>

<clr-dg-row *clrDgItems="let networkSystem of networkSystems"  [clrDgItem]="networkSystem">
    <clr-dg-cell>{{networkSystem.name}}</clr-dg-cell>
    <clr-dg-cell>{{networkSystem.serial_number}}</clr-dg-cell>
</clr-dg-row>

</clr-datagrid>

我试过挖掘Clarity仓库中的例子,但我无法在任何地方找到这个批量选择.(如果官方文档以某种方式包括角度组件和标记的完整源,那将是很好的).

谢谢你的帮助!

我想就如何最好地推动我的公司使用 VMWare 的 Clarity 系统或非常类似的系统提供建议。我们应该将其用作模板吗？分叉吗？随着时间的推移整合它的部分？

到 2018 年第四季度，我们希望：

• 有一个体面的设计系统
• 在 Angular 2 中开发
• 使用引导程序 4

目前我们在这里：

• 无设计系统
• 引导程序 3.3.7
• AngularJS

任何建议都会有所帮助！

在我的应用程序中，我想ClarityIcons.add()用来添加自定义图标。但是我收到以下错误：

index.js:402 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at Object../src/clr-icons/index.ts (http://localhost:4200/vendor.js:84958:20)
    at __webpack_require__ (http://localhost:4200/vendor.js:84586:30)
    at ./src/clr-icons/clr-icons-api.ts.Object.defineProperty.value (http://localhost:4200/vendor.js:84635:18)
    at http://localhost:4200/vendor.js:84638:10
    at webpackUniversalModuleDefinition (http://localhost:4200/vendor.js:84564:20)
    at Object../node_modules/@clr/icons/index.js (http://localhost:4200/vendor.js:84566:3)
    at __webpack_require__ (http://localhost:4200/runtime.js:84:30)
    at Module../src/app/core/components/core/core.component.ts (http://localhost:4200/main.js:1528:68)
    at __webpack_require__ (http://localhost:4200/runtime.js:84:30)
    at Module../src/app/app.module.ts (http://localhost:4200/main.js:618:94)

我尝试在 stackblitz 中复制它，但它运行良好。在其他问题中，我阅读了有关删除package-lock.json然后重新安装节点模块的内容。我试过这个，但我仍然有相同的结果。知道错误可能在哪里吗？

clrDate是不带exportAs语句的自定义第三方指令。

源代码

@Directive({
  selector: '[clrDate]',
  host: {
    '[class.clr-input]': 'true',
  },
  providers: [DatepickerFocusService],
})
export class ClrDateInput extends WrappedFormControl<ClrDateContainer> implements OnInit, AfterViewInit, OnDestroy {
  @Input() placeholder: string;
  @Output('clrDateChange') dateChange: EventEmitter<Date> = new EventEmitter<Date>(false);
  @Input('clrDate')
...
}

我希望能够从我的控制器以及customDirective内部获得对它的引用。我怎样才能做到这一点？

<clr-date-container customDirective>
    <label for="dateControl">Requirement Date</label>
    <input id="dateControl" type="date" [placeholder]="'TT.MM.YYYY'" [(clrDate)]="item.requirementDate" (clrDateChange)="onChange($event)" [ngModel]="null" name="requirementDate"/>
    <clr-control-error>{{ 'FORMS.VALIDATION.DATE_INVALID' | translate }}</clr-control-error>
</clr-date-container>

以前我使用TabLink清晰角度的组件来创建选项卡。现在，升级到@clr/angular我后无法使用，TabLink因此无法在选项卡内创建选项卡。我该如何进行？