Same question is relevant for other frameworks with onsenui card divs. But I need the answer for VUE-onsenui
Thanks!
Same question is relevant for other frameworks with onsenui card divs. But I need the answer for VUE-onsenui
Thanks!
Maybe you can tell me why the example isn’t working in the codepen?
https://codepen.io/pashute/pen/YrxxPX?editors=1111
Am I using a wrong CDN?
@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!!!
How do I make with vue-onsen a segment
(a choice of one button out of several in a row)
or a button-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.html
I’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?
Bug with tutorial: on latest chrome windows 10, slide app and text right for bigger code section, and code is gone, never to return.
Wish: a codepen linked from example
OK, I see what’s wrong with the example.
The code for the toolbar and the menu icon must be repeated 3 times, in each page separately.
But, typically a toolbar and a menu item are kept in place and only the rest of the content changes.
// this is being repeated three times, once in each page!
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>...
Why is the navigator inside the homepage, can it be outside (above all pages)?
I want the segment (button bar, radio selection) in the horizontal center of the screen.
Here’s my code.
<div id="segtbar" class="segment tbar">
<div class="segment__item">
<input type="radio" class="segment__input" name="segment-a" checked></input>
<button class="segment__button">Nearby</button>
</div>
<div class="segment__item">
<input type="radio" class="segment__input" name="segment-a"></input>
<button class="segment__button">This way <i class="fa fa-hand-o-up" style="fong-size:17px""></i></button>
</div>
<div class="segment__item">
<input type="radio" class="segment__input" name="segment-a"></input>
<button class="segment__button">In Building</button>
</div>
</div>
<ons-card id="crd1">
<div class="title">One</div>
<div class="content">
showing messages for one.
</div>
</ons-card>
<ons-card id="crd2">
<div class="title">Two</div>
<div class="content">
showing messages for two.
</div>
</ons-card>
<ons-card id="crd3">
<div class="title">Three</div>
<div class="content">
showing messages for three.
</div>
</ons-card>
What do I need to do in the CSS and in the HTML to get it centered?