离子奇怪的间距 [英] Ionic weird spacing

问题描述

当我使用以下代码显示标题时，标题会得到一个奇怪的左/右样式。

用它？谢谢！

 < ion-header-bar& 
< h1 class =title> BLE演示< / h1> 
< button class =button button-positive> 
 {{connectStatus == false？ Connect：断开连接}} 
< / button> 
< / ion-header-bar> 
  

如果我更改 {{connectStatus == false？ 连接：断开连接}} 到 {{connectStatus}} ，然后样式消失。

更新：查看@Microsmsm制作的示例代码：

解决方案

我通过遵循一个标准的空白模板解决了这个问题。使用离子导航栏，而不是自己指定h1元素。

显然，离子尝试通过向元素添加左/右样式来使标题居中，具体取决于其他元素（此示例中的按钮）到左边的宽度/对。但是计算方法非常怪异，不取决于实际显示的内容多少，而是模板脚本有多长。

所以在这种情况下 {{connectStatus == false？ Connect：Disconnect}} 比 {{connectStatus}} 长得多，ion给左边和右边333px前，后124px。即使正在显示的文本量没有太大的不同。

不知道是否有办法解决这个问题。我暂时坚持使用离子导航栏。

When I use the following code to display a header, the title gets a weird left/right styling.

Anybody knows what's wrong with it? Thanks!

<ion-header-bar>
    <h1 class="title">BLE Demo</h1>
    <button class="button button-positive">
        {{connectStatus == false ? "Connect" : "Disconnect" }}
    </button>
</ion-header-bar>

If I change the line {{connectStatus == false ? "Connect" : "Disconnect" }} to {{connectStatus}}, then the styling disappears.

Update: Check this example code made by @Microsmsm: http://codepen.io/Microsmsm/pen/ZQZyVp

解决方案

I solved the problem by following a standard blank template. Using ion-nav-bar, and not specifying the h1 element myself.

Apparently ionic tries to center the title by adding a left/right styling to the element depending on how wide are the other elements(the button in this example) to the left/right. But the way of calculation is pretty weird, not depending on how much content is actually being displayed, but how long the template script is.

So in this case {{connectStatus == false ? "Connect" : "Disconnect" }} is much longer than {{connectStatus}}, and ionic gives 333px to the left and right for the former, and 124px to the later. Even if the amount of text being displayed are not much different.

Not sure if there's a way to fix this problem as it is. I'll stick with ion-nav-bar for the time being.

这篇关于离子奇怪的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！