返回博客首页
← 所有帖子

介绍 NativeScript 键盘工具栏插件

2019 年 1 月 22 日 — 作者 Eddy Verbruggen

 

“我喜欢用我的手机键盘打字”
- 从未有人说过



如果您能用一些小工具,如提示和按钮来帮助您的用户,让他们使用手机键盘变得不那么糟糕,那会怎么样?






现在,请使用 NativeScript 键盘工具栏插件

键盘什么?

一个工具栏。类似于 Apple 的 输入附件视图,因此您可以假设此插件在 iOS 上添加了附件视图,但我们在 Android 上该怎么办呢?如果我们想做一些该原生小部件不支持的事情呢?插件用户如何才能轻松地声明附件视图的 UI?

所以我称它为工具栏,现在这个插件可用于 iOS 和 Android!

该插件的设计🥅 目标🥅 是..

⌨ 支持声明任何 NativeScript 布局并将其放在软键盘顶部。
🏒 使工具栏粘贴到键盘上,无论其形状或形式如何。
🙅‍♀️ 不要使用第三方依赖项,只使用来自tns-core-modules 的内容。
👭 允许在一个页面上使用多个工具栏(可能具有不同的设计)。

向我展示它可以做什么📽

转到插件的 GitHub 仓库,并按照说明运行 核心演示应用程序Angular 演示,甚至 Vue 演示。最全面的一个是核心演示,您可以在此处观看视频

⚠️ 不要滚动到此部分之外而不观看。看到这个插件在 iOS 和 Android 上运行简直太棒了,不能错过。我是认真的!

嗯,那我如何添加工具栏呢?

像往常一样,通过在项目根目录中运行以下命令来添加插件:tns plugin add nativescript-keyboard-toolbar

然后打开任何包含TextFieldTextView 的页面,并使用纯 NativeScript 布局标记定义工具栏,并将其包裹在<kt:Toolbar> 中,该标记引用您的可编辑视图的id

您可以在其中添加任何您喜欢的 NativeScript 布局。想要一个水平滚动带有图像的 ListView?没问题。想要堆叠两个滑块以进行奇特的数值输入?没问题。

gist: toolbar-page.xml

如果您想了解更多关于为什么需要将所有内容包裹在<GridLayout> 中以及插件如何使用它来对工具栏进行动画处理的信息,请访问 GitHub 上的插件文档。您还可以在其中找到 Angular 和 Vue 示例。


工具栏所有东西!
如果您确实这么做了,请在本文中添加评论,因为我迫切想知道你们将如何滥用这个插件!(这甚至是用正确的英语吗?好吧,可能是正确的美国英语。)