web-dev-qa-db-ja.com

angularマテリアルにはグリッドシステムがありますか？

angularマテリアルでプロジェクトを開始しています。bootstrapのように、レスポンシブグリッドに要素を配置するためのネイティブシステムはありますか？

それ以外の場合、グリッドシステムのマテリアルデザインをbootstrapと組み合わせて実行しても問題ありませんか？

多分私は問題に間違ったアプローチを取っています。

csstwitter-bootstrapmaterial-designangular-material2
16
Lev

Material2を使用している場合、応答性のために Angular Flex Layout を使用できます。 Angular2によく適合し、軽量です。

基本的に、Material2 + Flex-layoutはBootsrapライブラリと同等です。

以下は、Angular/Material2でグリッドシステム/応答性にflex-layoutを使用する方法の 例 です。

Flex-layout APIの使用を示すサンプルコード：

<div fxShow.xs="true" fxShow="false" >Screen size <h1>XS</h1></div>
    <div fxShow.sm="true" fxShow="false" >Screen size <h1>SM</h1></div>
    <div fxShow.md="true" fxShow="false" >Screen size <h1>MD</h1></div>
    <div fxShow.lg="true" fxShow="false" >Screen size <h1>LG</h1></div>
    <div fxShow.xl="true" fxShow="false" >Screen size <h1>XL</h1></div>

    <div fxLayout="row" 
         fxLayout.xs="column"
         fxLayoutGap="10px"
         fxLayoutAlign.xs="center center"
         fxLayoutWrap>
      <div class="sample-div" fxFlexOrder.lt-md="7">Div 1</div>
      <div class="sample-div" fxFlexOrder.lt-md="6">Div 2</div>
      <div class="sample-div" fxFlexOrder.lt-md="5">Div 3</div>
      <div class="sample-div" fxFlexOrder.lt-md="4">Div 4</div>
      <div class="sample-div" fxFlexOrder.lt-md="3">Div 5</div>
      <div class="sample-div" fxFlexOrder.lt-md="2">Div 6</div>
      <div class="sample-div" fxFlexOrder.lt-md="1">Div 7</div>
      <div class="sample-div" fxFlexOrder.lt-md="0">Div 8</div>
    </div>
12
Nehal

Angular Material（7.0.3）にはまだブートストラップのような固体グリッドシステムがありません。それ以外の場合は 公式ドキュメント）に含まれているはずです

さらに、UI/UXが豊富なため、Anuglarマテリアルを使用する必要があります。

解決策は、ブートストラップからグリッド部分のみを取得することです。

stylesheetbootstrap-grid.cssは bootstrapのドキュメント または対応する cdn に記載されているように使用でき、bootstrap提供されるグリッド機能を利用できます。

5
user7154703

このサイトでは、bootstrap grid to a Angular Material project： https://www.amadousall.com/the-good -parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects /

記事に記載されている手順の概要：

プロジェクトにbootstrapを追加します。

npm install bootstrap --save

src/styles.scss：

@import '~@angular/material/prebuilt-themes/Indigo-pink.css';

@import 'variables';

// Imports functions, variables, and mixins that are needed by other Bootstrap files
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
// Import Reboot
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/grid'; // add the grid
@import '~bootstrap/scss/utilities'; // add css utilities

@import 'reset';

src/_variables.scss：

_variables.scss Sassパーシャルを使用すると、Bootstrap-より正確に、Bootstrap

$link-color: #3f51b5;
$link-hover-color: currentColor;
$link-hover-decoration: none;

$grid-breakpoints: (
  xs: 0, // handset portrait (small, medium, large) | handset landscape (small)
  sm: 600px, // handset landscape (medium, large) | tablet portrait(small, large)
  md: 960px, //  tablet landscape (small, large)
  lg: 1280px, // laptops and desktops
  xl: 1600px // large desktops
);

$container-max-widths: (
  sm: 600px,
  md: 960px,
  lg: 1280px,
  xl: 1600px
);

src/_reset.scss：

_reset.scss Sassパーシャルにより、Bootstrap不要なスタイルの一部を上書きできます

* {
  &:active,
  :focus {
    outline: none !important;  // 1
  }
}

label {
  margin-bottom: 0; // 2
}


a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
  color: #3f51b5; // 3
}
2
ToastedSoul