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-baras 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-segmentcomponent :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 :)
-
