web-dev-qa-db-ja.com

mdボタンのサイズ（角形素材）

私はアンギュラーマテリアルを初めて使い、いくつかのmd-buttonディレクティブを使用しています。 Bootstrap worldから来ているので、md-buttonsのサイズが異なる方法を探しています。btn-xsやbtn-smクラスのようなものブートストラップで。

クラスmd-button-xsを作成し、このクラスを使用してボタンのサイズを設定しようとしましたが、成功しませんでした。 Google Chromeの開発者オプションを使用してボタンのサイズを変更しようとしましたが、それでもうまくいきませんでした。

md-buttonとその他のAngularマテリアルコンポーネントに異なるサイズを設定するにはどうすればよいですか？

angularjsmaterial-designangular-material
9
Najafsen

Angularマテリアル。これは私の答えに対する免責事項として機能します。

Twitterブートストラップにあまり時間を費やしたことはありませんが、サイズの指定はAngular Material。の領域ではおそらくそれほど重要ではないことを伝えることができます。

  • Angular Materialは Flexbox を利用します。特定のサイズを指定することは、Angular Material、私は個人的に見つけました。 デモ：レイアウト>グリッドシステム
  • NgMaterialのグリッドで多くのことを達成できますが（例： grid list および child alignment ）、単純な layout属性 が機能するかどうかを確認することをお勧めしますFlexboxの一般的な使用に付随する「箱から出してすぐに」あなたのために。

ボタンデモページのボタンをいじってみませんか？それとも、あなたが助けを必要としている、あなたが探しているより具体的な何かがありますか？ https://material.angularjs.org/latest/#/demo/material.components.button

私はあなたのために少しそれを台無しにした！あなたが始めたらかなり簡単なもの。 http://codepen.io/qvazzler/pen/jPgbQO

<md-button flex="15">{{title1}} (Not much)</md-button>
<md-button flex="15" md-no-ink="" class="md-primary">Primary (Not much either)</md-button>
<md-button flex="33" ng-disabled="true" class="md-primary">Disabled (More space for me!)</md-button>
<md-button flex class="md-warn">{{title4}} (I'll have what's left)</md-button>

幸運を！

Angular Materialバージョン0.10.1 を参照して書かれた投稿。新しいバージョンを使用していて、なじみのある結果が得られない場合は、リンクを参照してからサイトを使用してバージョンを変更し、問題点を見つけてください。そして、常に changelog 。があります

15
William S

これは私にとってややこしいことでした。問題は、最小幅がAngular Material to 88pxに設定されていることです。私は私のものを非常に小さくしたかったです。 -width。最小幅は、ボタンのようなグローバルで一般的なものに対して非常に高く設定されています...したがって、最小幅を設定しないと、小さくしたい場合にサイズ変更の問題が発生します。

2
vbullinger

必要に応じて単純に自分で行うことができます、たとえば、私はそれをしました：

    .material-cust-large-button {
    width: 300px;
    height: 70px;
    padding-top: 13px;
}
.material-cust-medium-button {
    width: 150px;
    height: 70px;
    padding-top: 13px;
}

そしてhtmlで：

<md-button class="md-raised md-primary material-cust-large-button">text</md-button>
<md-button ui-sref="..." class="md-raised md-primary material-cust-medium-button">text</md-button>

そして、それは私が期待どおりに動作します：

enter image description here

2
Marzouk

Styles.cssファイルのデフォルトのサイズを！importantタグで上書きするようにサイズを設定すると、それらは変更されます。これが設定できる唯一の方法です。これはAngularであり、AngularJSではなく

    .mat-radio-outer-circle {
  width: 15px !important;
  height: 15px !important;
}

.mat-radio-inner-circle {
  width: 15px !important;
  height: 15px !important;
}
0
JAM