使命令栏无响应

Question

我想将 office-ui-fabric 与 angularjs 一起使用，所以我正在尝试使用 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>

Answer 1

默认情况下，文本设置为不在 css 中显示。即：

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

然后他们使用媒体查询仅在宽度超过 640px 时显示这些元素即：

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

您可以通过提供您自己的不使用媒体查询的样式来覆盖它们的样式，并且只需确保您的 css 在它们的 css 之后加载（因此它优先）。即：

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

这是一个演示此操作的示例应用程序。请注意，我必须在 head 标签内联添加样式到 style 标签 b/c 内联编辑器如何加载其资产.通常，您只需在 link 标签中加载您自己的自定义 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 开发工具，我用鼠标右键单击文本并选择检查。这显示了元素和与之关联的样式。默认样式是应用 display: none;。当您将浏览器调整到超过 640 像素宽时，您会看到正在应用的媒体查询现在显示为 display: inline; 元素。

使命令栏无响应

Make the command bar unresponsive

javascript

css

ms-office

office-js

office-ui-fabric