Posts made by emccorson

How about ons.platform.isIPhoneX?

https://onsen.io/v2/api/vue/$ons.platform.html#method-isIPhoneX

Contrary to the naming, this will return true for iPhone X, XS, XS Max, XR, 11, 11 Pro, 11 Pro Max, 12 Mini, 12, 12 Pro or 12 Pro Max.

Internally, each ons-tab has a radio input which is checked when the tab is active.

It’s a bit hacky, but you should just need to check the input and uncheck the currently active input for the active styling to work.

e.g. if fa-search is currently selected and you want to change tab to fa-user-md:

document.querySelector('ons-tab[icon="fa-search"] input').checked = false;
document.querySelector('ons-tab[icon="fa-user-md"] input').checked = true;

If you have a paid plan on Monaca, I would suggest contacting Monaca Support Team. They will be able to debug your project to locate the error. At the moment, it’s hard to know what’s going on without seeing your project.

The Material icons are Material Design Iconic Font v2.2.0.

The full list is here:
http://zavoloklom.github.io/material-design-iconic-font/cheatsheet.html

So that means that the icons don’t completely match up with the ones you linked, but hopefully you can find suitable ones there.

Come to think of it, I’m not sure why we don’t use the official ones. I will look into it…

Thanks for the report.

At the moment, only debug and release options seem to be supported, but if you use --browser you can select the Debugger build in the GUI.

That’s probably more bother than it’s worth to try and fix. I would suggest just adding your items in reverse order e.g.

<ons-carousel>
  <ons-carousel-item>third</ons-carousel-item>
  <ons-carousel-item>second</ons-carousel-item>
  <ons-carousel-item>first</ons-carousel-item>
</ons-carousel>

The carousel already swipes left and right if you have swipeable set.

All you need to is set the initial starting item to the last one by setting the initial-index to the number of items you have minus 1. So if you have 3 items in your carousel set it to 2:

<ons-carousel initial-index="2" swipeable></ons-carousel>

In that case you need to set a CSS color rule on the tab’s button (it has the class tabbar__button).

For example, you could create a class custom-color for the ons-tab and a CSS rule like:

<ons-tab class="custom-color"></ons-tab>

.custom-color .tabbar__button {
  color: green;
}

The link just leads to an empty editor. Can you try again please?

Can you post a minimal sample that shows the problem using the Playground?:
https://onsen.io/playground/

Yes, you can create a custom theme for Onsen UI here:
https://onsen.io/theme-roller/?customize

Scroll to the Tabbar section and change the colour as needed, then download and add to your project.

This may be a temporary server error.

Please note that if you are using Monaca Backend, support for it is ending, so you will need to move to something else such as cordova-plugin-firebasex.

What is it you’re trying to do? In general, you can’t configure Xcode options through Monaca.

Actually it appears you also need this line:

<icon src="/res/ios/icon/icon-1024.png" width="1024" height="1024" />

What version of the plugin are you using? I was able to get it to install properly with the latest release version.

Monaca now uses cordova-ios@6 which has WKWebView by default so you don’t need the plugin. To get around the XHR problem, see https://github.com/OnsenUI/OnsenUI/issues/2629#issuecomment-732533174

ryanjanderson created this issue in OnsenUI/OnsenUI

closed Cordova and tabbar and separate HTML files #2629

If you rotate the screen to landscape and then back to portrait, does the screen display correctly once back in portrait?

Also, were you using WKWebView before the Cordova 10 upgrade? It is used by default in Cordova 10, but before that you had to use a plugin if you wanted to use WKWebView.

This may be related, I’m not sure: https://github.com/apache/cordova-plugin-wkwebview-engine/issues/53

mwargan created this issue in apache/cordova-plugin-wkwebview-engine

closed iPhone X initial height issue #53

You should be able to just use v-on:batterystatus, right? I think that’s the case but I haven’t checked.

https://vuejs.org/v2/guide/events.html#Listening-to-Events

@geraldineak How about this?

You can copy and paste it into the playground to try it:
https://onsen.io/playground/

HTML

<ons-page>
  <p style="text-align: center; margin-top: 10px;">
    <ons-search-input
      placeholder="Search"
      oninput="input()"
      id="search"
    ></ons-search-input>
  </p>
  
  <ons-list>
    <ons-lazy-repeat id="infinite-list"></ons-lazy-repeat>
  </ons-list>
</ons-page>

JS

const allItems = ['hey', 'there', 'here', 'are', 'some', 'options'];
let shownItems = [];

ons.ready(function() {
  const infiniteList = document.getElementById('infinite-list');

  infiniteList.delegate = {
    createItemContent: function(i) {
      const element = ons.createElement('<ons-list-item>' + shownItems[i] + '</ons-list-item>');
      element.onclick = () => fill(shownItems[i]);
      return element;
    },
    countItems: function() {
      return shownItems.length;
    }
  };

  infiniteList.refresh();
});

// updates list of options on input
function input() {
  const inputValue = document.getElementById('search').value;
  
  if (inputValue === '') {
    shownItems = [];
  } else {
    shownItems = allItems.filter(item => item.startsWith(inputValue));
  }
  
  document.getElementById('infinite-list').refresh();
}

// sets input value to clicked option
function fill(clickedOption) {
  document.getElementById('search').value = clickedOption;
  shownItems = [];
  document.getElementById('infinite-list').refresh();
}

Glad it’s working now.

By the way, you can save from the playground by clicking the Export to Codepen button (or if it’s to report an Onsen UI bug, click Report an Issue).