Question

我想使用带有angularjs的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>

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 标记中的样式b / c内联编辑器如何加载其资源。通常，您只需在链接标记中加载自己的自定义css（确保最后加载）。

＆＃13;

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

＆＃13;

我就是这样想的。使用chrome dev工具，我右键单击文本并选择inspect。这显示了元素和与之关联的样式。默认样式是应用 display：none; 。当您将浏览器的大小调整为640px以上时，您将看到正在应用的媒体查询现在说明显示：内联; 元素。

使命令栏无响应

1 个答案: