Hello:
I am trying to learn interfaces to create a single-page application. I am using the Navigation (subsection) as the starting component (first image). However, I would like to customize the interface so that when the cursor is hovering over an option, the text and background color changes. As per the current configuration, the option (when a cursor is hovering) has a border but the text color is blue (option: Expenses in image one). I would like to make it seem like the user-interface used in the Appian documentation page (second image). Cursor is hovering on MODEL RECORD DATA. I assume the collapsible feature is implemented using a!section. Two questions:
1. Is there an attribute or function that controls the color of the text/background when a cursor hovers?
2. Is a!cardLayout (other than header/billboardlayout) the only component that provides ability to control the background - noticed that a!columnsLayout doesn't and neither does a!columnLayout ?
Thank you for your help.
Discussion posts and replies are publicly visible
Hi Mana,
1. Nope, there is no way you can control background color on mouse hovers, that colored border is also due to the link in the cardLayout.
2.Yes these are the only ones in which you can change background color (other than these, in boxLayout you can change label style). There is no need for columnLayout and columnsLayout to have the ability to control background color as you can always add a cardLayout inside column content and achieve that.
edit: You can play by nesting multiple cardLayouts like this, but it simply has no use other than just have some fun :)
a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout( contents: a!cardLayout(link: a!dynamicLink(), padding: "NONE"), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), link: a!dynamicLink(), padding: "NONE" ), padding: "NONE" )