コマンドバーが応答しないようにする

anglejsでoffice-ui-fabricを使用したいので、ng-office-ui-fabricを使用しようとしています。次exampleでコマンドバーが応答しないようにする

画面の広いが限られている場合、我々はspan（例えば、3rd、14）が隠されていることを観察することができます。これは私が望むものではありません。画面の幅に関係なく常に表示されるようにします。

誰もがcommand barを反応しないようにする方法を知っていますか？

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" /> 
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script> 
</head> 
<body ng-app="YourApp"> 
    <div ng-controller="YourController"> 
     <uif-command-bar> 
     <uif-command-bar-main> 
      <uif-command-bar-item> 
      <uif-icon uif-type="save"></uif-icon> 
      <span>3rd</span> 
      </uif-command-bar-item> 
      <uif-command-bar-item> 
      <span>14</span> 
      <uif-icon uif-type="chevronDown"></uif-icon> 
      </uif-command-bar-item> 
     </uif-command-bar-main> 
     </uif-command-bar> 
    </div> 
    <script type="text/javascript"> 
    angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components']) 
    .controller('YourController', function() {}) 
    </script> 
</body> 
</html>

出典

2017-07-16 SoftTimur

デフォルトでは、テキストはCSSでは表示されないように設定されています。すなわち：

@media only screen and (min-width: 640px) 
fabric.components.min.css:6 
.ms-CommandBarItem .ms-CommandBarItem-chevronDown, .ms-CommandBarItem .ms-CommandBarItem-commandText { 
    display: inline; 
}

あなたはメディアを使用しない独自のものを供給することにより、自分のスタイルをオーバーライドすることができます：幅はすなわち 640ピクセル幅の上にあるときに

CommandBarItem .ms-CommandBarItem-commandText { 
    display: none; 
}

その後だけにメディアクエリを使用して、彼らはそれらの要素を示し、あなたのcssがcssの後にロードされることを確認してください（それが優先されます）。すなわち：

CommandBarItem .ms-CommandBarItem-commandText { 
     display: inline; 
    }

これを示すサンプルアプリケーションがあります。のタグのインラインスタイルをのスタイルのインラインエディタの読み込み方法のタグb/cに追加する必要があることに注意してください。通常は、リンクタグで独自のカスタムCSSをロードします（最後にロードされていることを確認してください）。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" /> 
 
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script> 
 

 
    <style> 
 
    .ms-CommandBarItem .ms-CommandBarItem-chevronDown, 
 
    .ms-CommandBarItem .ms-CommandBarItem-commandText { 
 
     display: inline; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body ng-app="YourApp"> 
 
    <div ng-controller="YourController"> 
 
    <uif-command-bar> 
 
     <uif-command-bar-main> 
 
     <uif-command-bar-item> 
 
      <uif-icon uif-type="save"></uif-icon> 
 
      <span>3rd</span> 
 
     </uif-command-bar-item> 
 
     <uif-command-bar-item> 
 
      <span>14</span> 
 
      <uif-icon uif-type="chevronDown"></uif-icon> 
 
     </uif-command-bar-item> 
 
     </uif-command-bar-main> 
 
    </uif-command-bar> 
 
    </div> 
 
    <script type="text/javascript"> 
 
    angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components']) 
 
     .controller('YourController', function() {}) 
 
    </script> 
 
</body> 
 

 
</html>

これは、私はこれを考え出した方法です。 chrome開発ツールを使用して、テキストを右クリックしてinspectを選択します。これは要素とその要素に関連付けられたスタイルを表示します。デフォルトのスタイルはdisplay：none;が適用されます。ブラウザのサイズを640ピクセル以上に変更すると、適用されているメディアクエリが表示され、と表示されます。要素。私はJSBinでそれを試してみました

出典

2017-07-18 18:51:23 flyer

、それは動作しませんでした... – SoftTimur

はインラインデモと私の答えを更新しました。ブラウザ全体のサイズを変更すると、これらのラベルは消えなくなりました。 – flyer

クール、それは今動作します...あなたはそれが '.ms-CommandBarItem'とその部分を制御する' .ms-CommandBarItem-commandText'であることをどのように知っていましたか？ – SoftTimur

コマンドバーが応答しないようにする

答えて

関連する問題