使用 Material Components Web 在应用栏上进行可扩展搜索

Question

我正在从Material Design Lite 迁移到Material Design Components (Web)，我已经在我的页面上包含了来自unpkg 的js 和css 包

<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 TextField With Icon
2. VueJS Transitions

迁移：

代码在 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);   
    }
  }
});