3

我想将 office-ui-fabric 与 angularjs 一起使用，所以我尝试使用ng-office-ui-fabric。

在下面的例子中，当屏幕的宽度有限时，我们可以观察到span（例如3rd，，14）是隐藏的。这不是我想要的；无论屏幕宽度如何，我都希望它们始终显示。

有谁知道如何使命令栏无响应？

<!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>
4

1 回答 1

2

By default the text is set to not display in the css. Ie:

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

Then they using media queries to only show those elements when the width is over 640px ie: 

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

You could override their styles by supplying your own that don't use media queries and just be sure that your css loads after their css (so it takes precedence). ie:

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

Here is a sample app demonstrating this. Note that I had to add the styles in the head tag inline in a style tag b/c of how the inline editor loads its assets. Normally you would just load your own custom css in a link tag (make sure its loaded last).

<!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>

This is how I figured this out. Using chrome dev tools, I right mouse clicked on the text and choose inspect. This shows the element and the styles associated with it. The default style was to have display: none; applied. When you resize the browser more than 640px wide, you'll see the media query being applied that now says to display: inline; the element.

enter image description here

于 2017-07-18T18:51:23.240 回答