administrators

You can remove the swipeable attribute on ons-tabbar to disable swiping.

Unfortunately the fade animation is not available for the tabbar, only for the navigator.

Do you have Node installed on your system? If you do, try running this program:

const os = require('os');

const nif = os.networkInterfaces();

console.log(JSON.stringify(nif, null, 2));

From the program output, look for the first object with "family": "IPv4" and "internal": false. This is the address that Monaca Debugger will use.

I’m guessing that both 192.168.178.107 and 169.254.44.238 appear in your output and both are non-internal and IPv4, and that 169.254.44.238 appears first.

(By the way, I figured out this behaviour by looking at the Monaca CLI source code. It looks like this is the function that determines the IP address that Monaca Debugger will use: https://github.com/monaca/monaca-lib/blob/766ace80f1245ad7142d1608ca18f1b4e4cfa658/src/localkit.js#L248)

It’s hard to know without seeing the files, but it looks like the components directory contains CSS only for specific components. In that case you want the styles in the components directory to override the ones in onsen-css-components.css. So you should still import theme.css and onsen-css-components.css as normal, but then after the onsen-css-components.css import, import each file in the components directory. (I think.)

This will really depend on how your project is set up.

Are you able to upload your project to GitHub? If you can do that, I will look at the project and point to how you can add the custom theme.

If you just want to change to the dark theme, find the line that imports onsen-css-components.css and change it to dark-onsen-css-components.css.

Oh, I just realised from your other post that you might be using React.

If you are using React, instead of using the link tag, you should import your CSS styles however you already import CSS styles for React.

No need to touch any of the files in node_modules.

First unzip the onsen-css-theme.zip file you downloaded from Theme Roller. Put the CSS files in a directory in your source directory (for example, www/styles).

In your index.html, you should have a line something like:

<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">

Change the href attribute to point to the onsen-css-components.css file that you just put in your source directory. For example, if you put the CSS files in www/styles and your index.html file is in www change it to:

<link rel="stylesheet" href="styles/onsen-css-components.css">

Then add another line to link the theme.css file:

<link rel="stylesheet" href="styles/theme.css">

That should be it working. If you are still having problems, can you provide a tree of your project structure so I can see which files are where?

Templates are fragments of HTML that are not rendered immediately when a page is loaded, but can be rendered later. This is useful for speeding up loading times because templates don’t need to be rendered when the app starts. For example, if your app contains a page in a template and the user never visits that page, the page will never be rendered. If you hadn’t used a template, the page would have been rendered even though the user never visited it.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

In Onsen UI, there are two ways of defining pages that the navigator can load. One is by using the template tags e.g.:

<template>
  <ons-page>...</ons-page>
</template>

The other way is to define a page in a separate file (without the template tags).

A template isn’t used instead of ons-page. ons-page defines an Onsen UI page; template lets the browser know that it shouldn’t be loaded at startup.

I hope that helps. If you still have questions please let us know.

Is your device running Android 9? HTTP communication is prohibited on Android 9 so you will need to use HTTPS. Even if you’re not running Android 9, it is worth changing your server HTTPS and trying again.

Are you talking about scrolling to items that are currently in the DOM? In that case, scrollTop should work fine as long as you know the height of your items so you can figure out the position of the item you want to scroll to.

If you want to scroll to an item that has not yet been loaded or has been re-hidden by the lazy list, that might be a bit more tricky.

The easiest way to do this is by creating a custom theme with Onsen UI Theme Roller: https://onsen.io/theme-roller/

Check the ‘Customize’ box and then scroll down to the Tabbar component. On the right-hand pane, you will see ‘Component Variables’ and under that heading is ‘tabbar highlight text’. Changing ‘tabbar highlight text’ will change the colour.

Once you are finished, click ‘Download’ and then import the downloaded files into your Onsen UI project.