Nano Hash - криптовалюты, майнинг, программирование

Как создать простой текст ввода для поиска в дизайне материалов AngularJS?

Я ищу какой-нибудь простой способ иметь что-то похожее на то, что доступно в angular-mdl для расширяемого текстового поля поиска, как показано ниже. Это добавит кнопку поиска при нажатии, и она расширится до текстового поля.

<!-- Expandable Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
    <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
      <i class="material-icons">search</i>
    </label>
    <div class="mdl-textfield__expandable-holder">
      <input class="mdl-textfield__input" type="text" id="sample6">
      <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
    </div>
  </div>
</form>

Мое требование состоит в том, чтобы такая кнопка поиска в заголовке карты была привязана вправо, когда пользователь щелкает, она должна расширяться, чтобы вводить данные ... и мне нужно сделать это в Angular-Material.

Любые входы или помощь ..! Спасибо.

javascript html css angularjs angular-material
16.01.2016

Ответы:


1

Я тоже искал пример расширяемого поиска в Angular с материалом и нашел этот код в Codepen, но не уверен, что это именно то, что вы ищете, он открывает ввод полной длины с помощью кнопки «Назад»...

http://codepen.io/kyleledbetter/pen/gbQOaV

HTML-код панели инструментов выглядит примерно так:

<md-toolbar ng-show="!showSearch">
  <div class="md-toolbar-tools">
    <md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu">
      <ng-md-icon icon="menu"></ng-md-icon>
    </md-button>
    <h3>
        Dashboard
      </h3>
    <span flex></span>
    <md-button aria-label="Search" ng-click="showSearch = !showSearch">
      <ng-md-icon icon="search"></ng-md-icon>
    </md-button>
    <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
      <ng-md-icon icon="more_vert"></ng-md-icon>
    </md-button>
  </div>
</md-toolbar>
<md-toolbar class="md-hue-1" ng-show="showSearch">
  <div class="md-toolbar-tools">
    <md-button ng-click="showSearch = !showSearch" aria-label="Back">
      <ng-md-icon icon="arrow_back"></ng-md-icon>
    </md-button>
    <h3 flex="10">
        Back
      </h3>
    <md-input-container md-theme="input" flex>
      <label>&nbsp;</label>
      <input ng-model="search.who" placeholder="enter search">
    </md-input-container>
    <md-button aria-label="Search" ng-click="showSearch = !showSearch">
      <ng-md-icon icon="search"></ng-md-icon>
    </md-button>
    <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
      <ng-md-icon icon="more_vert"></ng-md-icon>
    </md-button>
  </div>

</md-toolbar>
25.01.2016

2

Похоже, для этого нет чистого «родного» углового материала, поэтому я использовал один из параметры текстового поля из библиотеки 'material design lite' - расширяемая кнопка поиска gif-demo< /а>

08.06.2017
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..