NativeScript CSS 中的单边边框

开源项目的一大优点是可以轻松获得社区的反馈。关于这一点，大约一年前我创建了一个关于 NativeScript 应用中 CSS 单边边框的功能请求。并且，嗯，让我们说一下，这个问题出乎意料地受欢迎。

所以，对于 lscown、PeterStaev、tsvetan-ganev、kishmiryan-karlen、kvelikov、tenorok、stevetayloruk、sitefinitysteve、karlix、firescript、tiagordc、maykefreitas、vbresults、lelong37、dragGH102、nripendra、Premitium、gadonski、treio、PanayotCankov、erkanarslan、paveldk、runningBuffalo、vdende、mariocosme、k3yb0ardn1nja、TheOriginalJosh、yezarela、Daxito、leocaseiro、luigi7up、kenhowardpdx、jmak、kwong93、jorendemaeyer1996、carakan、ahmedelgendy、mragwa，天啊，还有更多，okmttdhr、bradmartin、myninka、keithmattix、impyour、triniwiz、inferno001、leocaseiro、toddanglin、sean-perkins 和 spstratis 表示歉意，单边 CSS 边框已合并到 NativeScript 模块的 master 分支中 🎉

天啊，我该如何使用它们？

单边边框已在 master 分支中，但要到今年 11 月发布的 2.4 版本才会正式发布。但不用担心。由于我们在 2.3 版本中推出的新的“next”构建，您可以轻松地在项目中运行来自 GitHub 的最新最好的 NativeScript 代码。

我们的文档对“next”构建的工作原理进行了完整解释，但要快速测试我们的单边边框，您只需使用以下命令更新您的“tns-core-modules” npm 依赖项即可

npm install tns-core-modules@next --save

然后，您需要做的就是在 UI 组件上应用相应的边框相关的 CSS 属性。例如，假设您想为这个相对无聊的 <StackLayout> 添加一些颜色。

<StackLayout class="boring">
  <Label text="我一点也不有趣"></Label>
</StackLayout>

您需要做的就是选择 CSS 中的该元素，并应用 border-color 和 border-width。

.boring {
  border-color: red green blue orange;
  border-width: 5 10 15 20;
}

然后您的 UI 组件突然变得有趣多了！它看起来会像这样

语法是如何工作的？

如果您没有 Web 开发背景，这里使用的语法可能看起来有点奇怪。border-color 和 border-width 属性实际上是几个更具体的属性的简写，NativeScript 也支持这些属性。例如，您可以使用这段 CSS 代码

.boring {
  border-color: red green blue orange;
  border-width: 5 10 15 20;
}

并将其重写如下，而不会改变显示效果

.boring {
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: orange;

  border-top-width: 5;
  border-right-width: 10;
  border-bottom-width: 15;
  border-left-width: 20;
}

顶部、右侧、底部、左侧的顺序只是 CSS 中的一个约定——margin、padding 和一些其他 CSS 简写也是这样工作的。在 NativeScript 中，我们尽量与 Web 的 CSS 实现保持一致，因此我们支持指定这些属性的简写和详细语法选项。

接下来我该做什么？

现在单边边框已在 master 分支中，现在是您尝试一下并告诉我们您的想法的好时机。如果您发现任何问题，请在 GitHub 上告诉我们——请注意，有一些未解决的问题我们仍在努力解决。

并继续提供反馈！您的意见帮助我们确定路线图上的内容。我们的想法门户 是您告诉我们哪些功能对您很重要的绝佳场所。