1. Home
2. Onsen UI

Onsen UI

• 

  How to ask a question.
  

  1
  1
  Posts
  1590
  Views

  No one has replied

• C

  How do I find component event descriptions in the document?
  

  4
  4
  Posts
  20
  Views

  

  @czpae86 Only the custom events are specified, the native ones are assumed. Just capture it normally with addEventListener or onchange handler.

  Edit: Actually, the range only throws change when you release the drag. If you want something continuous use input event instead.

• G

  Muliple Modifiers in ons-list-item
  

  3
  3
  Posts
  14
  Views

  

  Yes, modifier="chevron nodivider" should work. What do you mean with onclick event to chevron modifier? Clicking on the chevron itself? I don’t think that’s possible since the chevron is a CSS pseudo element :before, not a real DOM element.

• 

  Navigator erase stack possible ?
  

  4
  4
  Posts
  22
  Views

  

  There is indeed a mechanism to hide the back button. Also, in Vue you can ensure it in a very easy way: <v-ons-back-button v-show="pageStack.length > 1">.
  Try to do the reset at once: pageStack = [somePage] and see if there is any difference.

• D

  Custom Drop Animation for Onsen 2.5.1 for Angular 1.X
  

  5
  5
  Posts
  76
  Views

  D

  That works like a charm! Thank you very much - glad to see ONSEN is still kicking butt. Cheers

• J

  Cannot clear radio button
  

  3
  3
  Posts
  65
  Views

  J

  @Fran-Diox Thanks. Yeah I read that one way binding. That’s why I used the events. I checked the v-model and it is not working and removed it on the question component. Thanks for that. Can you suggest me the correct way of clearing that radio button. As for now I’ m accessing the new method in the questionOption component

  methods: { clear() { this.chosenAnswer = ''; } }
• C

  when ons-if and ons-list-item are use together,border is not show.
  

  3
  3
  Posts
  31
  Views

  C

  @Fran-Diox Thank you,The problem is solved.

  if(ons.platform.isAndroid()){ var html = '<ons-list-item modifier="longdivider" tappable>' +'<div class="left">' +'<ons-icon icon="fa-cloud-download" size="20px" style="color:rgb(54, 162, 235)"></ons-icon>' +'</div>' +'<div class="center">item1</div>' +'</ons-list-item>'; document.querySelector('#list').appendChild(ons._util.createElement(html)); }
• R

  GooglePlay accepts app, but it cannot be downloaded
  

  2
  2
  Posts
  16
  Views

  

  @remzo Does your Google Play version show correctly?

• 

  Platform-specific styling classes?
  

  2
  2
  Posts
  26
  Views

  

  @Saloniq-David Everything looks like iOS by default. Autostyling is adding a modifier="material" attribute to every component basically. At the same time, modifiers add custom classes like page--material or toolbar--material (elementName--modifierName). Therefore, you can easily select an element in CSS with .page.page--material for MD or .page:not(.page--material) for iOS. Alternatively, [modifier~=material] and :not([modifier~=material] would also work.

  ons.platform contains methods to change platform styling or detect the current platform.

• 

  Is there any way to make the v2 <ons-carousel> continuous?
  

  3
  3
  Posts
  53
  Views

  

  @Fran-Diox said:

  here

  Not sure how I missed that. Thanks!

• J

  change element proprierty according network status
  javascript cordova network information html5 onsen ui cordova plugins •

  3
  3
  Posts
  48
  Views

  J

  @Fran-Diox , thanks for your explanation.
  Yes, my project is using the Onsen UI v1, but it’s possible to change the main-page content by a function on onsen ui framework?
  I did it before, into a project-based in cordova 6, and worked well.

• J

  Error of css onsen UI common libs
  onsen ui css monaca ide onsen •

  3
  3
  Posts
  49
  Views

  

  @Jonathan-Silva Hi! It’s probably a version mismatch. Make sure that the libs you are including contain the same version you were using before. If possible, update to the latest one. Monaca’s Onsen UI is not different from original Onsen UI, you can use any of them.

• 

  A Functioning Carousel with Tab Bar
  

  6
  6
  Posts
  136
  Views

  

  @Woody-Deck Hey! I will start working on a sliding tab bar from next week. It will be hopefully finished in a few weeks so mixing carousel+tabbar won’t be necessary anymore

• P

  when i click on search tab on my screen the ons tabber automatically overlay
  

  3
  3
  Posts
  60
  Views

  P

  thnx @Fran-Diox

• J

  How to get data from a nested component
  vue-onsen bindings onsen ui 2.0 vue •

  3
  3
  Posts
  64
  Views

  J

  @Fran-Diox thanks for your answer.

• 

  how can i load json in jquery load 5 and if i scroll down it will be load again
  

  8
  8
  Posts
  144
  Views

  

  @Fran-Diox

  Thank you for your kindness here is my code but i wonder the first 30 ons-list item was blank and if i down i got 30 result and loop to 30 my total results is 212 each but i a scrool down the results will be 30 and loop on same 30 result

  <script> document.addEventListener('init', function(event) { var page = event.target; if (page.matches('#load-more-page')) { var listNode = page.querySelector('#list-node'); var createListItem = function (i) { return ons.createElement(`<ons-list-item id="info"></ons-list-item>`); }; for (let i = 0; i < 30; i++) { listNode.appendChild(createListItem(i)); } page.onInfiniteScroll = function(done) { $.getJSON('https://wagi.ph/api/json/en/', function (data) { var total_results = data.total_results; var createListItem = function (i) { return ons.createElement(`<ons-list-item id="info">${url}</ons-list-item>`); }; for (let i = 0; i < total_results; i++) { var url = data.results[i].url; listNode.appendChild(createListItem(i)); done(); } }); }; } }); </script>

  thankyou best regards

• 

  Loading pages using jQuery and preventing destroying of pages
  

  10
  10
  Posts
  200
  Views

  

  @fearnowrath You can add ripple effect by appending <ons-ripple></ons-ripple> component wherever you want.

  I’m not sure I understand about the situation you mention, I already said that you can use pure CSS solution instead of using ons-tabbar and ons-tab, and then load pages by calling Splitter’s load method. I think this pattern is not very common but you can do whatever you want in your app, of course.

  About the back buttons… I think it is completely different from what you think. ons-navigator is the only component that keeps a page stack, which mean that it can push pages on top of other pages and pop them. Therefore, it also has a ons-back-button to pop pages. This ons-back-button only works for ons-navigator.

  Apart from that, several components implement a handler for Android’s back button. These components are ons-navigator, ons-page, ons-splitter-side and all the dialogs. They have a default behavior that can be modified via onDeviceBackButton property. Navigator’s default behavior is popping 1 page, which is the same as pressing ons-back-button. And by the way, ons-page has no load methods, so I’m not sure what you mean. More info about device back button in the guide.

• S

  Specifying Splitter Side Animation does not work in 2.5.2
  

  2
  2
  Posts
  49
  Views

  

  @sherscher Hey, thanks for reporting! There was already an issue on Github about this and is now closed. It will be released soon.

• G

  prevent tappable ons-list-item on button click
  

  4
  4
  Posts
  72
  Views

  G

  thanks @Fran-Diox this worked for me

• G

  make carousel infinite swipe
  

  12
  12
  Posts
  228
  Views

  

  @Fran-Diox Ah, ok. That would make sense, so you would have to refresh everything which would cause some flickering.