Расширяемый поиск на панели приложения с помощью Material Components Web

Question

Я перехожу с Material Design Lite на Material Design Components (Web) , я уже включил пакеты js и css на мою страницу с unpkg

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<header id="appBar" class="mdc-top-app-bar mdc-top-app-bar--fixed">
    <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <div class="mdc-text-field mdc-text-field--fullwidth">
                <input class="mdc-text-field__input" type="text" placeholder="Full-Width Text Field" aria-label="Full-Width Text Field">
            </div>
            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page" alt="Bookmark this page">close</a>
        </section>
    </div>
</header>

С тех пор я пытался включить опцию поиска на панели приложений, что-то, что должно выглядеть как строка поиска на material.io , но, к сожалению, я даже не мог создать что-то похожее это

Answer 1

Даже я столкнулся с этой проблемой. Я не нашел ни одного компонента или метода, предоставленного mdc, как такового. Итак, кастом создал эффект. Ниже приводится ссылка на решение jsfiddle.

JSFiddle Link

Справочные ссылки:

1. Текстовое поле MDC со значком
2. Переходы VueJS

Миграция:

Код в VueJS. Привязки модели и onclick должны быть легко перенесены в любую другую платформу, но есть анимация перехода, которая может отличаться в других платформах.

HTML

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div id="app">

  <!-- vue based transitions for enter and exit -->
  <transition name="fade">
    <header class="mdc-top-app-bar" v-if="!searchVisible">
      <div class="mdc-top-app-bar__row">

        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title">Title</span>
        </section>

         <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
          <i class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download" v-on:click="searchVisible = true">search</i>
        </section>

      </div>
    </header>
  </transition>

  <!-- vue based transitions for enter and exit -->  
  <transition name="fade">

    <!-- to handle enter click on input. This can be handled by handling key event as well. -->
    <form v-on:submit.prevent="postSearch">

      <!-- Even div would work. Made header, as it is replacing the header -->
      <header class="mdc-text-field mdc-text-field--fullwidth mdc-text-field--with-trailing-icon" v-if="searchVisible">
        <input type="text" v-model="searchTerm" id="my-input" class="mdc-text-field__input" placeholder="Search for something" style="padding-left: 16px;">

        <!-- Added a search icon just in case. text-field with trailing icon allows only one, so style  element. (I could be wrong here). Also, applying as class and external css is being overridden by other styles. -->
        <i class="material-icons mdc-text-field__icon" tabindex="0" role="button" v-on:click="postSearch" style="position: absolute; right: 56px;">search</i>

        <i class="material-icons mdc-text-field__icon" tabindex="1" role="button" v-on:click="searchVisible = false">close</i>

        <div class="mdc-line-ripple"></div>
      </header>

    </form>
  </transition>

</div>

VueJS

const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
const textField = mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));


new Vue({
  el: "#app",
  data: {
    searchVisible: false,
    searchTerm: ""
  },
  methods: {
    postSearch: function () {
      alert(this.searchTerm);   
    }
  }
});