Material Design 规范下的控件组合使用解析及示例演示

Material Design 是一种由 Google 推出的设计语言，旨在为用户提供清晰、直观、有意义的用户体验。在 Material Design 中，控件的组合使用是非常重要的，它们的组合可以使用户界面更加美观、易于使用和易于理解。本文将介绍 Material Design 规范下常见控件的组合使用，并提供示例代码和演示。

1. 卡片与列表的组合使用

在 Material Design 中，卡片是一种常见的控件，它可以用来展示一个实体的信息，例如一篇文章、一张图片、一个产品等等。而列表则是一种常见的控件，可以用来展示多个实体的信息，例如一个新闻列表、一个联系人列表等等。卡片和列表的组合使用可以让用户更加方便地快速浏览多个实体的信息。

示例代码：

// www.javascriptcn.com code example
<div class="card-list">
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Placeholder image">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Placeholder image">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Placeholder image">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
</div>

示例演示：

2. 折叠面板与列表的组合使用

折叠面板是一种常见的控件，可以用来展示一些需要用户进行选择或者展开的信息，例如一个 FAQ 列表、一个设置页面等等。而列表则是一种常见的控件，可以用来展示多个实体的信息，例如一个新闻列表、一个联系人列表等等。折叠面板和列表的组合使用可以让用户更加方便地快速浏览多个实体的信息，并且可以让用户更加方便地进行选择或者展开。

示例代码：

// www.javascriptcn.com code example
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
</div>

示例演示：

3. 底部导航栏与标签页的组合使用

底部导航栏是一种常见的控件，可以用来展示应用程序的主要功能，例如一个社交媒体应用程序的主要功能可能包括主页、通知、消息、个人资料等等。而标签页则是一种常见的控件，可以用来展示多个相关的页面或者功能，例如一个新闻应用程序可能包括新闻、体育、科技、娱乐等等。底部导航栏和标签页的组合使用可以让用户更加方便地快速切换应用程序的主要功能和相关页面或者功能。

示例代码：

// www.javascriptcn.com code example
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
          Home
        </div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
          Profile
        </div>
        <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
          Messages
        </div>
        <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
          Settings
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <nav class="navbar fixed-bottom navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

示例演示：

4. 结语

本文介绍了 Material Design 规范下常见控件的组合使用，并提供了示例代码和演示。在实际开发中，我们可以根据自己的需求和实际情况，灵活地使用这些控件的组合，以提供更好的用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0ea07a941bf71341f3f88