web-dev-qa-db-ja.com

狭いビューポートのページの上部に$ mdToastを配置することは可能ですか？

ページの上部にサイトメッセージ（最後のアクションでの成功またはエラー通知など）を表示して乾杯したいのですが。

Angular material docs say トーストを上部に配置できます：

position- {string =}：トーストを配置する場所。使用可能：「下」、「左」、「上」、「右」の任意の組み合わせ。デフォルト：「左下」。

上部の位置は、幅が960px以上のデスクトップブラウザでは正常に機能しますが、幅が狭くなると無視されます（トーストは常に下部になります）-それはなぜですか？また、モバイルデバイスでは、常に下部にあります。

angularjsmaterial-designangular-material
10
Artem Vasiliev

明らかに、これはAngular Material（v1.1.0.rc1による）で、画面の幅が960px未満の場合）ではサポートされていませんが、次のような回避策があります。

<body ng-app="myApp">
  <div layout-fill>
    <md-toolbar ng-cloak>
      <div class="md-toolbar-tools">
        <md-button>My app</md-button>
      </div>
    </md-toolbar>
    <div id="toaster"></div>
    <md-content id="content" ng-cloak>
      ...
    </md-content>
  </div>
</body>

CSS：

#toaster {
  position: fixed;
  top: 56px;
  height: 48px;
  left: 0;
  width: 100%;
  z-index: 10000;
}

JS：

$mdToast.show($mdToast.simple()
  .textContent('hello!')
  .parent(document.querySelectorAll('#toaster'))
  .position('top left')
  .hideDelay(false)
  .action('x'));

結果： http://screencast.com/t/B1U8aXaFcd

これにより、ページがスクロールされたときにトーストがその位置に保持されます。しかし、このソリューションでは、アニメーション化された非表示がメッセージを上ではなく下に移動し続けます。私の実際のプロジェクトでは、MDと格闘せず、下部にトーストを配置することになりましたが、このアプローチを使用して、ページをスクロールするときにその位置を維持します。

9
Artem Vasiliev

Google Material Design docs（私のハイライト）によると：

スナックバーは、画面の下部に短いメッセージを表示することにより、操作に関する軽量のフィードバックを提供します。スナックバーにはアクションを含めることができます。

angular-material.cssを確認する場合（v.1.0.5による）：

@media (max-width: 959px) {
  md-toast {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 0;
    bottom: 0; 
  }
  ...
}

bottom: 0のチームは、この可能性を定義していない仕様を実装しただけなので、箱から出して960px未満の幅の画面にトーストを配置することはできません（angular-materialマージンのため）。 。

それを達成するためにcssを拡張/上書きしてみてください。

3
iulian

CSSソリューションは次のとおりです。

@media (max-width:959px) {
  md-toast {
    bottom: unset !important;
  }
}

お役に立てれば。

3
Edmond Woychowsky

これを試して：

HTML：

<body layout="column">
<!-- body ---> 
</body>

CSS：

body {
   overflow-y: hidden !important;
}
0
Marcelo C.