Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
Segment and button bar in VUE2 with OnsenUI2
-
How do I make with vue-onsen a
segment
(a choice of one button out of several in a row)
or abutton-bar
as defined in the onsen-ui css?See here in css documentation: https://onsen.io/v2/api/css.html#segment-category
vs. here in vue documentation: https://onsen.io/v2/api/vue/v-ons-button.htmlI’m thinking out loud here:
I make a .vue component called my-v-segment that is simply a div with class segment.
It has a group-name variable not shown in the DOM.In it I make a .vue component called my-v-segment-button that is simply a button with class segment-item
and in it an input element type:radio with class:segment__input and a name attribute: pointing to the group-name.Then I make a card and it shows the content that is set for that “tab” (i.e. selected button in the “segment”)
Anybody with VUE experience care to make a pen?
-
@Moshe-Flam Well, you could certainly do that but I think it would be easier to use the official
v-ons-segment
component :sweat_smile:
-
@Fran-Diox said:
uld certainly do that but I think it would be easier to use the o
whew! It’s up there under “control”. I should have looked for it although failed to find button-bar… Thanks!!!
-
Maybe you can tell me why the example isn’t working in the codepen?
https://codepen.io/pashute/pen/YrxxPX?editors=1111Am I using a wrong CDN?
-
@Moshe-Flam Yes, update Vue version :)
-