Vertical style accordion using vaadin - coding-style

I am using vaadin framework, I can use the com.vaadin.ui.Accordion library for Accordion.
By default it appears in horizontal style. Is there any idea of using this style in vertical form?
Thanks

An Accordion is a TabSheet, a subclass of TabSheet, as documented in the API.
TabSheet is meant for horizontal use, Accordion for vertical use.
TabSheet screenshot:
Accordion screenshot:

From http://vaadin.com/api/com/vaadin/ui/Accordion.html:
An accordion is a component similar to a TabSheet, but with a vertical orientation and the selected component presented between tabs
Do you mean you want it to be horizontal instead of vertical?

Related

Horizontal Scrollbar Controls Instead Of Bullet Controls For Glidejs

Does Glide allow for a horizontal scroll bar as the control UI for sliding through images? Right now I only see button controls, where each button maps to a slide.
Just to be clear I am still definitely interested in swiping behavior of course. I'd just like the button controls to behave like a scroll as well.
If Glide indeed allows for horizontal scrolling for controls can someone share how they implemented this? I cannot seem to find any guidelines in the docs.

NativeScript animated Modal Page

I need Modal Page appears with "slide from bottom and cover (NOT push) current page" transition.
I set parameter animated of showModal method, but nothing changed.
How implement such transition for Modal Page? Android platform.
it's bug github.com/NativeScript/NativeScript/issues/5989
I have kinda hacky stuff, wrapping my elements with AbsoluteLayout and give it a high top value like '800',
and in navigatedTo function make transition animation with the negative value of the top attribute. In your case you would use left attribute and make transition over x.
Another solution that looks better in the UI, adding a custom component that would act as your modal, wrap your page elements with AbsoluteLayout, add your custom component when you need to show your modal, and apply the previous animation hack to it.
Tip: You can set the actionBarHiddin = true if you want to your custom component to overlay the full screen.
Tip: async/await and then would be very useful for the smoothing matters.

TabView header style

I am using TabVIew and I’ve got two questions:
1.How can I remove the border-bottom of the TabView header?
2. How can I add separator between the items in the TabView header ?
Thanks,
Chen
You can't remove neither the bottom color nor add a separator within the tabs. You can control the color of your bottom border for the selected tab. Here are the exposed properties in NativeScript
<TabView
androidSelectedTabHighlightColor="orange"
selectedTabTextColor="red"
tabBackgroundColor="lightgreen"
tabTextColor="blue">
For anything above that you should access the native element and see if there are native possibilities for further styling the element.

propagate scroll event to waterfall-tall core header panel

I am trying to replicate this demo:
https://www.polymer-project.org/components/core-animated-pages/demos/grid.html
I want to use a waterfall-tall header panel instead. If I just change the mode of the scroll header panel, it doesn't collapse because the scrollable div is not the one expected.
Which would be the best way to have this demo working in the same way with a waterfall-tall header?
I tried having the animated pages scrollable instead but the hero transition is then messed up.
Best,
Nicolas

Kendo UI style for non-widget or primitive controls

Helllo All,
I am struggling hard to apply KendoUI theme colors to radiobutton and checkbox controls.
I am using out of the box KendoUI's flat theme. All the widgets on my screen are displayed and decorated with the KendoUI theme and I get some basic styling on primitive controls like checkbox, radiobutton etc. by applying ".k-textbox" class on those. I have referred: http://docs.kendoui.com/getting-started/web/appearance-styling for details.
As per HTML standards, you can't give border-color to checkbox, radiobutton elements. But somehow they are decorated and KendoUI theme color is applied to the border on mouse hover? Strange! Any clues to override hover border color on some specific scenarios.
Thanks for your help.
Sam
Kendo UI doesn't include styles for radio buttons and checkboxes. The .k-textbox class is meant for styling textboxes (hence the name). It is not recommended to use that class for checkboxes or radio buttons because it would cause the loss of the native appearance.

Resources