如何使用 NativeScript 设置菜单栏中活动项的颜色？

Question

我想根据 selected 更改菜单栏中菜单项的颜色。因此，当 "Home" 被 select 编辑时，我希望它是红色的，而所有其他项目都是黑色的。当我 select "Settings" 它应该变成红色，所有其他项目应该是黑色的。我尝试了这个 in the NativeScript Playground，但无法正常工作。

HTML

<GridLayout rows="*,60">
    <StackLayout row="1" orientation="horizontal" class="foot" backgroundColor="#eae8e8" padding="10 5 10 5" id="myMenu" [ngClass]="{ 'active': itemActive }">
        <StackLayout (tap)="gofp()" width="30%" textAlignment="center">
            <Label text="Home">
            </Label>
        </StackLayout>
        <StackLayout (tap)="gosettings()" width="35%" textAlignment="center">
            <Label  text="Settings">
            </Label>
        </StackLayout>
                <StackLayout (tap)="goimages()" width="35%" textAlignment="center">
            <Label text="Images">
            </Label>
              </StackLayout>
    </StackLayout>
</GridLayout>

Answer 1

你是指菜单项的标签吗？如果是这样，那么有几种方法可以做到这一点，您可以直接在 <Label> 元素上使用 style.color 或者您可以使用 CSS class (class="name-of-class").

所以在实践中：

<Label text="Home" style.color="red"></Label>

或：

<Label text="Home" class="color--red"></Label>

// In your CSS file
.color--red {
  color: red;
}

如果您想根据所选内容更改标签的颜色，则需要添加一些逻辑。让我们从最简单的事情开始吧。

CSS

.color--red {
    color: red;
}

然后您需要添加一些逻辑来实际跟踪选择了哪个菜单项。在你的 home.component.ts 构造函数之前添加以下内容：selectedMenuItemId: string;，在你的构造函数中添加 this.selectedMenuItemId = "home"; 并在你的构造函数之后添加：

public selectMenuItem(id: string) {
  this.selectedMenuItemId = id;
}

然后对于每个菜单项，您需要先将点击处理程序替换为以下内容：(tap)="selectMenuItem('home')" 并将以下内容添加到每个菜单标签：[ngClass]="{'color--red': selectedMenuItemId === 'home'}"，确保更改 id .

Here is a link to the Nativescript Playground with the changes.

如何使用 NativeScript 设置菜单栏中活动项的颜色？

How do I set the colour of an active item in the menu bar using NativeScript?

css

menubar

nativescript