Ionic 分段控件

分段是显示在水平行中的一组相关按钮。 它可以放置在工具栏或主内容中。 Ionic 分段的功能与 Ionic 选项卡相同，您选择一个选项卡，它将取消选择所有其他选项卡。

当用户在内容中的不同视图之间切换时，分段组件很有用。 当单击控件应在应用程序中的页面之间导航时，应使用选项卡栏而不是分段。 分段可以充当过滤器，根据分段的值显示或隐藏元素。 我们可以使用标准 <ion-segment> 元素访问 Ionic 分段。

以下示例提供了关于如何在 Ionic 应用程序中使用分段的详细说明。

示例

Home.page.html

此页面用于显示用户视图的内容。 在这里，我们将使用 <ion-segment> 在 <ion-content> 元素中。 分段中的选项，例如 ionChange，调用事件以更改分段选项卡，ngModel 是一个 angular 指令，将 HTML 控件的值绑定到应用程序数据。

Home.page.ts

此页面包含用于更改分段选项卡和幻灯片选项的代码。

Home.page.scss

输出

执行上述 Ionic 应用程序时，它将给出以下输出。 在这里，您可以看到 三种类型 的分段 contacts、camera 和 map。 默认情况下，始终选择第一个分段。

现在，当您选择 map 分段时，屏幕上会出现以下输出。