Sub-menus and Sub-panels?

How-to Discussions
1

Hello,

I’m trying to build a custom control similar to a drop-down menu where a main control “spawns” a sub-menu or sub control that floats over other UI elements. I can’t seem to find an example of how I would go about doing it.

Any help with this?

file

2

Have you tried using the Opacity-property? I have yet to try, and i wont be able to try any real code for a few hours, but try playing around with that. You could create a layer that contains the links and set it to not be visible by default. Then upon clicking the main control changes the Opacity to make the menu visible? Idk if theres a better way but something is better than nothing.

3

Hi! Here is a quick example i threw together. It illustrates one way of creating you own dropdown menu. Notice that you supply the data as well through javascript, so this would be reusable as long as you supply the expected data-context (which i would clean up a bit :slight_smile: ).

<App Theme="Basic">
    <Panel>

        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var selectedColor = Observable([1,1,0,1]);

            var dropdownOptions = Observable(
                { name: "Red", color: [1,0,0,1] } ,
                { name: "Green", color: [0,1,0,1] } ,
                { name: "Blue", color: [0,0,1,1] } ,
                { name: "Yellow", color: [1,1,0,1] } ,
                { name: "Teal", color: [0,1,1,1] } ,
                { name: "Magenta", color: [1,0,1,1] }
            );

            var selected = Observable();

            function selectMe(arg){
            selected.value = arg.data.name;
            selectedColor.value = arg.data.color;
            }

            module.exports = {
                dropdownOptions: dropdownOptions,
                selected: selected,
                selectMe: selectMe,
                selectedColor: selectedColor
            }

        </JavaScript>

        <Panel ux:Class="DropdownOption" ux:Name="self" Height="30">
            <string ux:Property="Text" />
            <Rectangle Layer="Background">
                <SolidColor ux:Name="bgCol" Color="#EAF0F2" />
                <Stroke Brush="#BFD8DD" Width="2"/>
            </Rectangle>
            <Text Alignment="CenterLeft" Value="{Property self.Text}" FontSize="14" Margin="10,0"/>

            <WhileHovering>
                <Change bgCol.Color="#D9E1E4" />
            </WhileHovering>
        </Panel>
        <Panel ux:Class="DropdownSelectedItem" ux:Name="self" Height="40">
            <string ux:Property="Text" />
            <Text Alignment="CenterLeft" Value="{Property self.Text}" FontSize="16" Margin="10,0"/>
            <Panel Layer="Background">
                <Rectangle Fill="#FBFDFD" Height="50%" Alignment="Top"/>
                <Rectangle Fill="#EDF3F5" Height="50%" Alignment="Bottom"/>
            </Panel>
        </Panel>

        <SolidColor Color="{selectedColor}"/>

        <Panel Width="200" Height="40">
            <Rectangle>
                <Stroke Brush="#BFD8DD" Width="2"/>
            </Rectangle>
            <DropdownSelectedItem Text="{selected}" />
            <Clicked>
                <Toggle Target="expandDropdown" />
            </Clicked>

            <WhileTrue ux:Name="expandDropdown">
                <StackPanel Offset="0,40">
                    <Each Items="{dropdownOptions}">
                        <DropdownOption Text="{name}" Clicked="{selectMe}" />
                    </Each>
                </StackPanel>
            </WhileTrue>
        </Panel>
    </Panel>
</App>

I hope this helps!

4

Thanks.

But how can i wrap these code into a component, And reuse it somewhere else?

I can’t find a way to pass in a callback or something else to reuse this.

What i want to achieve is something like this:

<DropdownMenu onChange="{someCallBack}" Options="{aListOfOptions}">
5

@jianfu: The code i posted could almost be used like that, you just have to supply the data through javascript. So it looks for the names

 dropdownOptions
 selected
 selectMe

and will work as long as they are in the data-context path.

I’ll look into whether this component can be modularised in a nicer way, but it might require some Uno code :slight_smile: