如何在Flex中实现这个伪TabNavigation UI？

发布于 2024-10-26 14:08:10 字数 378 浏览 5 评论 0原文

在此处输入图像描述

我正在尝试在 Flex 中实现上述导航 UI。基本上我想要一个带有两个（或更多）大按钮的栏（参见顶部图片，按钮一和二）。当用户单击按钮一时，按钮条的下部会出现一组新按钮（特定于模式一），并且可以选择（参见左下图）。如果您单击按钮二，也会发生同样的情况（参见右下图）。基本上，按钮一和按钮二选择自己的栏，其中的按钮可用于执行操作。

注意：这并不是一个悬停菜单，即较低的按钮是可见的，直到用户选择另一个较高级别的按钮或单击栏的背景。

我考虑过使用 Spark TabBar 或 ButtonBar 容器，但我不确定这是最好的方法。

感谢您提供任何建议或示例指示！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

永不分离 2024-11-02 14:08:10

由于您将其标记为 Flex 3 和 Flex 4，因此我建议对此使用 Flex 4 组件。

使用一堆标签栏以及皮肤状态您的自定义组件。从概念上讲是这样的：

<s:TabBar id="mainTabBar" change="onChange(event)"/>
<s:TabBar id="firstSubBar" includeIn="firstSelected" />
<s:TabBar id="secondSubBar" includeIn="secondSelected" />
<s:TabBar id="thirdSubBar" includeIn="thirdSelected" />

有一个像这样的更改方法：

protected function changeSelection(event:IndexChangeEvent): void {
  invalidateSkinState()
}

在您的 getCurrentSkinState() 方法中，执行如下操作：

override protected getCurrentSkinState():void{
  if(mainTabBar.selectedIndex == 1){
   return "firstSelected";
 } else if(mainTabBar.selectedIndex == 2){
   return "secondSelected";
 } // etc. etc// 

 return super.getCurrentSkinState();
}

您没有理由不能使用 MX TabBar 执行类似的操作。

这有帮助吗？

Since you tagged this as both flex 3 and Flex 4, I'd recommend using the Flex 4 components for this one.

Use a bunch of tab bars along with skin states of your custom component. Conceptually something like this:

<s:TabBar id="mainTabBar" change="onChange(event)"/>
<s:TabBar id="firstSubBar" includeIn="firstSelected" />
<s:TabBar id="secondSubBar" includeIn="secondSelected" />
<s:TabBar id="thirdSubBar" includeIn="thirdSelected" />

Have a change method something like this:

protected function changeSelection(event:IndexChangeEvent): void {
  invalidateSkinState()
}

And in your getCurrentSkinState() method, do something like this:

override protected getCurrentSkinState():void{
  if(mainTabBar.selectedIndex == 1){
   return "firstSelected";
 } else if(mainTabBar.selectedIndex == 2){
   return "secondSelected";
 } // etc. etc// 

 return super.getCurrentSkinState();
}

There is no reason you can't do something similar w/ the MX TabBar.

Does that help?

回复收藏 0 原文

~没有更多了~