Best posts made by rubs

The QTabs component is quite useful, but in my opinion it has some omissions:

• It’s not redrawn automatically when a QTab item is inserted or removed – especially the navigation arrows visibility doesn’t change. I kinda solved this one by using a ready flag that gets updated when a new item is inserted, but it would be easier if the component did it already.
• When inserted, new tabs that go past the current width are not scrolled into view. Apparently there are not events for doing this.
• The mouse scroll wheel doesn’t do anything. Capturing the wheel events and sending clicks to the arrows didn’t work for me:

wheel_scroll: function(event)
{
  let arrows = this.$el.getElementsByClassName('q-tabs__arrow');
  let evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  // Here I chose one arrow for testing, but nothing happened:
  arrows[1].dispatchEvent(evt);
}

• It would be nice if users were able to drag individual tabs to change their order.

Would exposing some extra events and properties allow these actions? I don’t know. Any help is appreciated. Thanks!

Thanks! I’ll try it. Looks much better than my CSS hack

@viswanathNK Thanks, that’s exactly what I wanted!