You can set the animation attribute on ons-splitter-side to change the splitter animation. You may also want to set animation-options.

https://onsen.io/v2/api/js/ons-splitter-side.html#attributes

Each tab is loaded when the tabbar is loaded, not when the tab is shown, which is why your script is running as soon as you open the app.

The best way to do the call is with the prechange event as you mentioned. You can check the tab that is being shown so you only do the AJAX call for the tab that is going to be shown.

The other option is to use ons-navigator instead of ons-tabbar, since ons-navigator loads pages only when they are shown.

The closest component is probably ons-popover.
https://onsen.io/v2/api/js/ons-popover.html

Two differences from your screenshots:

1. By default, it has an arrow pointing out the side but you can easily hide that with CSS.
2. The popover appears below the button, not on top of it. Again you can move this with CSS.

Here is an example similar to your screenshots using ons-popover:
https://codepen.io/emccorson/pen/gObyrYm

HTML:

<ons-page>
  <ons-toolbar>
    <div class="right">
       <ons-toolbar-button icon="ion-md-more" onclick="showPopover(this)"></ons-toolbar-button>
    </div>
  </ons-toolbar>
</ons-page>

<ons-popover id="popover" direction="down" cancelable="true">
  <ons-list>
    <ons-list-item>one</ons-list-item>
    <ons-list-item>two</ons-list-item>
    <ons-list-item>three</ons-list-item>
  </ons-list>
</ons-popover>

JS:

var showPopover = function(target) {
  document
    .getElementById('popover')
    .show(target);
};

var hidePopover = function() {
  document
    .getElementById('popover')
    .hide();
};

There’s no padding by default, so you basically need to style text like you would with regular HTML elements.

See here for some examples of how to do that: https://onsen.io/playground/?framework=vanilla&category=reference&module=input
Also check the User Interface Tutorials section (at the bottom of the drop-down menu) for some more complicated UI examples.

Hmmm… I think both the toolbars from your screenshot might actually be the same size, but the iPad one is overlapping with the device status bar. You can see the blue icon on the right is overlapping.

By the way, that overlapping behaviour shouldn’t happen. Does it still happen if you remove the icon and just have a text in the toolbar? I’m guessing that the problem is because the icon height is larger than the toolbar height and the toolbar is not automatically resizing.

From the OnsenUI source code, it looks like the height is set to 46px. It should be possible to override this by applying your own CSS class to the toolbar.
https://github.com/OnsenUI/OnsenUI/blob/master/css-components/src/components/toolbar.css#L6

The problem is that you have currently have the splitter inside the navigator, when you actually need the navigator inside the splitter.

Copy the example from the link I already posted. It defines a splitter, and within the splitter content is a navigator. That means that the splitter is available on every page, no matter what page the navigator shows.

Then for the tabbar, just define a page with a tabbar and push it using the navigator. That means you have:

1. A top-level splitter
2. Inside the top-level splitter: a navigator that is used to show pages.
3. Inside the navigator: a page containing a tabbar that is pushed by the navigator.

It might work to set the icon attribute of ons-tab, then inspect the tab in your browser’s dev tools, and copy the compiled result from the inspector into your source code. This way Onsen doesn’t compile the tab because you’re already using the transformed version of the tab. Then you should be able to put HTML child elements in the tab.

Onsen should scale components automatically to look good on whatever size of device.

You might be able to do it directly in CSS, or you could check if the device is an iPad with ons.platform.isIpad and apply your own CSS classes accordingly.
https://onsen.io/v2/api/js/ons.platform.html#method-isIPad

Maybe something like this? https://onsen.io/playground/?framework=vanilla&category=common patterns&module=splitter_navigator
But instead of navigator use tabbar.

@icangeek Basically, just use ons-page and template and don’t bother about ons-template.