OnsenUI/OnsenUI

ATTENTION! Community chat has moved to Discord - https://discord.gg/JWhBbnE

Fran Dios

@frandiox

as you see there, a new page is pushed to the navigator when you click on a card

I guess we can continue this on Discord :sweat_smile:

Thibaud

@Thibaud-M

Hey Guys, I'm using Action-sheet dynamically and set in up in my controller on Angular 4. But I can't find how to set the click event on dynamic buttons https://onsen.io/v2/api/angular2/ons-action-sheet-button.html
Can you help me please ?

rawoofpm7

@rawoofpm7

Hi all, I am just exploring onsen ui search input

can any one pls give me an example which is working with search input and below list should reflect based on the search ?

exophunk

@exophunk

Hey there. Is there a maximum width on Toolbar-Buttons or why is my top-right button cut off?

rlam3

@rlam3

@rawoofpm7 @exophunk Please refer to the following link as we are currently migrating over to Discord. Thanks!

https://discord.gg/JWhBbnE

Light1c3

@Light1c3

Anyone online able to help a noob getting setup with React? I keep getting an error that ons is undefined

mexiscool

@mexiscool

<template id="main">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Card</div>
      <div class="right"><button @click="addToList()">click</button></div>
    </v-ons-toolbar>


<div v-for="item in items">
    <v-ons-card>
      <img src="https://monaca.io/img/logos/download_image_onsenui_01.png" alt="Onsen UI" style="width: 100%">
      <div class="title">
        Awesome framework
      </div>
      <div class="content">
        <div>
          <v-ons-button><v-ons-icon icon="ion-thumbsup"></v-ons-icon></v-ons-button>
          <v-ons-button><v-ons-icon icon="ion-share"></v-ons-icon></v-ons-button>
        </div>
        <v-ons-list>
          <v-ons-list-header>Bindings</v-ons-list-header>
          <v-ons-list-item>Vue</v-ons-list-item>
          <v-ons-list-item>Angular</v-ons-list-item>
          <v-ons-list-item>React</v-ons-list-item>
        </v-ons-list>
      </div>
    </v-ons-card>
</div>

  </v-ons-page>
</template>

<div id="app"></div>
<script>
new Vue({
  data: {
    items: ['item1', 'item2']
  },
  el: '#app',
  template: '#main',
  methods: {
    addToList: function() {
     this.items.push('item3');
     }
  }
});
</script>

im trying to have a v-for loop with a v-ons-card from an array and than push a new item to the array but it doesnt update the v-for loop

i also tried this with webpack and there it also doesnt work

mexiscool

@mexiscool

okay solved it by just wrapping the v-ons-card in an div

lyuuku

@imlyuuku1123

@frandiox ,hi, i have an error "Unable to preventDefault inside passive event listener invocation." when use the <ons-pull-hook> component with vue2, can you help me?

lyuuku

@imlyuuku1123

@frandiox ps: the error is always occurred in drag event

lyuuku

@imlyuuku1123

@frandiox by the way, there is no this error in onsenui2.4.2 and vue-onsenui2.0.0 but onsenui2.9.1 and vue-onsenui2.5.2, is that a bug in onsenui2.9.1 and vue-onsenui2.5.2?

Fran Dios

@frandiox

@imlyuuku1123 Passive event listeners were added on 2.9.0 so I guess it's just a problem there

I think it will be fixed in onsenui@2.9.3

In anycase, you can ignore that error for now since it shouldn't break anything

Yury Zhuravlev

@stalkerg

Do you have plans to support any compile time frameworks like SvelteJS?

manoharkhadka1

@manoharkhadka1

Hello there, Can we hide top navigator menu for pages like login ?

Charles biselx

@chaBiselx

Hi with onsen and vue, can I redirect to an other page without the template are in the same file ?

like with js : window.location.href

jayantb1019

@jayantb1019

Hey , Ive a problem with ons-card in angular 4. some cards are invisible no matter what. I'm trying to load them using *ngFor

<ons-carousel-item *ngFor="let degree of degrees$;index as i ; " id ={{i}}>
<div>
<ons-card style="display:block;">
    <form #degreeCertForm{{i}}>
    <ons-list>
    <ons-list-header> {{qualificationById[degree.qual_id]}} - {{specializationById[degree.spec_id]}} </ons-list-header>
    <ons-list-item>

      <div class="left">
        <ons-icon icon="ion-university"></ons-icon>
      </div>
      <div class="center">

      </div>
      <div class="right">
        <ons-button  (click)="getDegreeCert()" modifier="quiet"  > Upload </ons-button>
      </div>

    </ons-list-item>
    <ons-list-item style="display: none;" >
      <div class="center">
      <div class="doc-preview-container">
        <img src="" class="doc-preview" >
      </div>
    </div>
    <div class="left">
      </div>
      </ons-list-item>

  </ons-list>
  <div class="center">
  <input type="file" id="degreCert" accept="image/*" style="display:none;" (change)="onDegreeCertificateInput($event)" #Input{{'qual_' + degree.qual_id + '_spec' + degree.spec_id}} >
  </div>
  <div >
    <p class="doc-helper-text" > Upload your degree certificate </p>
  </div>
</form>

</ons-card>
</div> 
</ons-carousel-item>

could some one help me with this. thank you.

Jonathan Leek

@sorokya

I'm having issues using the should-spin, startSpin() functions on an ons-button element. I tried $().startSpin() and $()[0].startSpin() but both give me undefined errors. my button markup looks like this <ons-button id="btn-login" should-spin="true">Login</ons-button>

dreyn74

@dreyn74

@sorokya Please refer to the following link as we are currently migrating over to Discord. Thanks!
https://discord.gg/JWhBbnE

jenkinssgs

@jenkinssgs

hi,I'm getting below error ,

onsenui.js:685 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

anyone have idea

lyuuku

@imlyuuku1123

@frandiox hi, i'm having some issues using the vue for onsenui, i tried to focus the ons-input element in the mounted event handler, it works in android, but doesn't work in ios , can you help me

jaimecuellar14

@jaimecuellar14

I have a question

I have this line of code

  ons.notification.alert({
           title: 'Error al iniciar sesión',
           message: 'Parece que alguno de los datos son incorrectos.',
           buttonLabels: 'Aceptar',
           callback: function (answer) {
           }
       });

Works fine while watching it on browser

but doesnt work on android device

When I do cordova run android

jaimecuellar14

@jaimecuellar14

Im testing on android 6.0

MaVieDeGweek

@AlainGazouille_twitter

Seems like a lot of people are asking questions and there are no answers. I tried the forums but Facebook login or registration do not work. Is OnsenUI a dead project ?

Simon Bächler

@sbaechler

Hi
I upgraded from 2.6 to 2.9 and now the Checkbox components from react-onsenui do not render in the Karma tests anymore (using Enzyme). They render fine in the Browser. Does anyone have an idea why?

jaimecuellar14

@jaimecuellar14

Can i replace ons navigator with angularjs router?

Masahiro Tanaka

@masahirotanaka

ATTENTION TO EVERYONE!

We switched our community chat service from Gitter to Discord because of the usability.
Please use the link below to signup for your account.

See you there!

https://discord.gg/JWhBbnE

KNIGHT MAHAJAN

@knightmahajan

Hi can someone help this noob to understand how to enable slideshow in carousel and also ensure that after the last slide is reached, if person clicks on next, he is redirected to the first slide

SkapiN

@skapin

It's kinda dead here ...

Manoj

@agrawalcomputers

Hi, I need a color picker for Onsen UI. Please suggest, which plugin I need to use that supports ios as well as android.

Saša Šijak

@ssijak

I am using vue + onseen + typescript and I have a problem that in vue component typscript is not aware that 'this' has $ons binded to it so it throws :
TS2551: Property '$ons' does not exist on type 'nameOfComponent'

any workaround?

Where communities thrive

People

Repo info

Activity

ATTENTION TO EVERYONE!

https://discord.gg/JWhBbnE