0

我正在尝试构建一个带有嵌入式 X 按钮的搜索栏。我使用清晰度和角度。Clarity 没有提供直接符合我需求的组件。

但是我遇到了 2 个组件，即 clr-password-container 和 clr-date-container，它们看起来与我想要的相似。

https://github.com/vmware/clarity/blob/master/packages/angular/projects/clr-angular/src/forms/datepicker/date-container.ts

但它不会以呈现 clr-date-container 或 clr-password-container 的方式呈现我的搜索框。这是我得到的：

https://stackblitz.com/edit/clarity-form-reset-wrmqn4 我哪里出错了？

4

1 回答 1

0

您可以使用内置网格来布局表单控件。

这是表单标记：

    <form class="clr-form">
        <div class="clr-control-container">
            <div class="clr-input-wrapper clr-row">
                <input clrInput placeholder="Filter your list here..." name="filter" [(ngModel)]="filter" class="clr-col-10"/>
                <button class="clr-input-group-icon-action" type="button">
          <clr-icon shape="times" title="filter" class="searchbar-input"></clr-icon>
      </button>
            </div>
        </div>
    </form>

请记住，如果您使用的是 Angular 表单clrForm，那么某些类 ( .clr-form) 将自动添加。这里要注意的重要一点是，我添加.clr-row了输入包装器，然后将相应的类添加到了输入和按钮。

这是一个有效的堆栈闪电战： https ://stackblitz.com/edit/clarity-form-reset-9aguhf

于 2020-05-04T20:13:17.223 回答