2016/02/15

[CSS][Material Design Lite]CARDS

material design liteのCARDSを読みながら試しに作ってみた。

<body>
<div class="mdl-layout mdl-js-layout">
  <main class="mdl-layout__content">
    <div class="mdl-grid">
      <div class="mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title">
          <h2 class="mdl-card__title-text">Welcome</h2>
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
            Get Started
          </a>
        </div>
      </div>
    </div>
  </main>
</div>
</body>
確かにこれで表示されたのですが、右によっちゃって、なんだか不恰好。

そこで、下のようにclass="mdl-cell--12-col"を追加してもまだ右側に余白が表示されてしまった。
<body>
<div class="mdl-layout mdl-js-layout">
  <main class="mdl-layout__content">
    <div class="mdl-grid">
      <div class="mdl-card mdl-shadow--2dp mdl-cell--12-col">
        <div class="mdl-card__title">
          <h2 class="mdl-card__title-text">Welcome</h2>
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
            Get Started
          </a>
        </div>
      </div>
    </div>
  </main>
</div>
</body>
最後に、mdl-grid--no-spacingを追加したら、width=100%で表示されましたー。
<body>
<div class="mdl-layout mdl-js-layout">
  <main class="mdl-layout__content">
    <div class="mdl-grid mdl-grid--no-spacing">
      <div class="mdl-card mdl-shadow--2dp mdl-cell--12-col">
        <div class="mdl-card__title">
          <h2 class="mdl-card__title-text">Welcome</h2>
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
            Get Started
          </a>
        </div>
      </div>
    </div>
  </main>
</div>
</body>
ただ、100%なので、ちょっと余白が欲しい場合は、paddingを追加すればおk
<body>
<div class="mdl-layout mdl-js-layout">
  <main class="mdl-layout__content">
    <div class="mdl-grid mdl-grid--no-spacing" style="padding:10px 10px;">
      <div class="mdl-card mdl-shadow--2dp mdl-cell--12-col">
        <div class="mdl-card__title">
          <h2 class="mdl-card__title-text">Welcome</h2>
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
            Get Started
          </a>
        </div>
      </div>
    </div>
  </main>
</div>
</body>

0 コメント:

コメントを投稿