cube-ui icon indicating copy to clipboard operation
cube-ui copied to clipboard

[New Feature] tab-bar组件期望支持传入width

Open draculapile opened this issue 6 years ago • 5 comments

What problem does this feature solve?

tab栏跟随的cube-tab-bar-slider可能并不想设置为每个tab的宽度

What does the proposed API look like?

:showSlider="true" :sliderWidth="xx"

draculapile avatar Mar 21 '19 14:03 draculapile

如果宽度可以任意设置,但是组件内部无法知道需要移动到哪个位置

theniceangel avatar Mar 27 '19 09:03 theniceangel

如果宽度可以任意设置,但是组件内部无法知道需要移动到哪个位置

我个人的想法是:/tab-bar/tab-bar.vue 在_updateSliderStyle _getSliderWidthAndIndex方法里, 如果有传入的width,transform 偏移值可以根据传入的自定义 width 和 this.tabs[index].$el.clientWidth 计算,clientWidth 减去传入的 width 再除以 2, 取整,应该就可以了

draculapile avatar Mar 27 '19 12:03 draculapile

@draculapile 这样是居中对齐,但是有些设计师给出的效果是导航线居左对齐。实际上计算 clientWidth 也不准确,因为不确定用户是否会给每个 tab 设置margin。简而言之,ui 会影响布局,布局会影响 js 的逻辑,如果想要涵盖各种设计效果,可能要以各种设计效果,做一个更抽象更广泛的组件。我们会在 cube 2.0 做一次新的探索。

theniceangel avatar Mar 28 '19 02:03 theniceangel

@theniceangel 好的了解,期待更加灵活的tab-bar,感谢!

draculapile avatar Mar 28 '19 05:03 draculapile

现在支持了传入width么? @theniceangel

Catlc avatar Oct 19 '20 09:10 Catlc