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

参考链接：

迁移：

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

通过Material Components Web在应用栏上展开搜索

1 个答案: