Нужна поисковая коробка, использующая ясность angular с контейнером ввода - PullRequest
Новая
       104

Нужна поисковая коробка, использующая ясность angular с контейнером ввода

0 голосов
/ 02 мая 2020

Я пытаюсь построить панель поиска со встроенной кнопкой X. Я использую ясность с angular. Ясность не обеспечивает компонент, непосредственно соответствующий моим потребностям.

Однако я наткнулся на 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 Где я ошибаюсь?

1 Ответ

0 голосов
/ 04 мая 2020

Вы можете использовать встроенную сетку для размещения элементов управления формы.

Вот разметка формы: 

    <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

...