如何在 NativeScript 中隐藏和/或取消隐藏 TabViewItem 组件？

Question

如何使用标签 TabViewItem 在 NativeScript 中显示和隐藏组件？我希望能够选择显示和/或隐藏选项卡。

<TabView>
    <TabView.items>
        ...
        <TabViewItem title="LOGOFF">
            <TabViewItem.view >
                ...
            </TabViewItem.view>
        </TabViewItem>
    </TabView.items>
</TabView>

以下是我尝试过的示例：

<TabView>
    <TabView.items>
        ...
        <TabViewItem title="LOGOFF" [visibility]="settings.showLogin ? 'collapsed' : 'visible'">
            <TabViewItem.view >
                ...
            </TabViewItem.view>
        </TabViewItem>
    </TabView.items>
</TabView>

使用 CSS：

<TabViewItem title="LOGOFF" class="hideTab">

.hideTab{
    display: none;
}

和

<TabViewItem title="LOGOFF" [class.hideTab]="true">

谢谢！

Answer 1

您的代码看起来有点奇怪。您想用[visibility] 和[class.hideTab] 实现什么目标？

无论如何，visibility 属性是您想要用来控制可见性的。

例如这将隐藏一个组件：

<Component visibility="collapse" />

与任何其他值一样，这可以从绑定上下文中设置的变量中设置。例如。如果您在绑定上下文中有 isShown 作为布尔变量，它将控制可见性：

<Component visibility="{{ isShown ? 'visible' : 'collapse' }} />