Hi, many thanks for choosing OneUI for your project! Yes, you can by using the hide and show methods. For example:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas');

bsOffcanvas.show();
bsOffcanvas.hide();

Please have a look at the official docs for more examples and info. Hope that helps.

Fantasic! Thank you very much!!!!

You’re welcome, happy coding!!

Hi, please make that you’ve included oneui.app.min.js directly in your views and didn’t import it through your build process.

Alternatively, if you would like to import it in your JS code, you can use the JS source code and import the _js/main/app.js file directly.

In that case, if you are still having the same issue, you can try changing lines 23-25 in _js/main/modules/template.js to the following (in some cases, eg you are using a third party library, let’s say Turbolinks that might be an issue):

constructor() {
  this._uiInit();
}

Moreover, if you are using the One.onLoad() function yourself, please make sure that you are passing a function as a parameter, eg:

One.onLoad(function(){
  // your code to run on page load..
});

PS: It seems that your support is expired, so if you would like any additional support in the future, please consider extending it. Thank you!

Hi, thank you very much!

Your explanations were precisely the solution to the problem, now everything is working perfectly, I will continue using OneUI as the basis for the layout of my website.

If I need help again I will renew the support.

thanks

You’re welcome, we’re glad you’ve got it working. Wish you all the best with your project and happy coding!

Thanks for your kind words, really glad you like it! Most of the design is based on the root font size, so you can easily adjust it to your own liking if you set it in your assets/_scss/custom/_main.scss as follows:

:root {
  --bs-root-font-size: 14px;
}

16px is the default size and provides a design that looks and works in an ideal way between various screen resolutions and sizes. Hope that helps!

Hi, thank you for your interest in OneUI! Yes, it is very easy to remove the sidebar and use a horizontal navigation instead. We also provide a similar example which you can preview online. Hope that helps!

Thank you, really glad you like OneUI! Be sure to check out Dashmix and Codebase which they include a medical dashboard example. It is something than can easily be created with OneUI, too.

Hi, many thanks for choosing OneUI for your project! Nuxt is a Vue.js based framework and has some specific conventions. Using OneUI Vue Edition with it is the same as using any other Vue.js based project.

You need to be familiar with both and migrate over the code based on your requirements. Also please have in mind, that Nuxt 3 with Vue.js 3 support is still in the works with no stable release as of today (still in beta).

ok can you please send me the old version of vuejs version with vue 2?

Please send us a message from our profile’s contact form and we will get back to you with a link to download that version.

Hi, please have a look at your inbox, we just replied to your email!

Hello, we just replied to your email, please have a look at your inbox!

Thanks for your fast response

You’re welcome. You can either use the Layout API on page load..

One.layout('dark_mode_on');

sidebar-dark page-header-dark dark-mode

Hey, we’ve updated OneUI Vue Edition with 1.7 update which was released today

_uiHandleDarkMode(mode = ‘init’) { let self = this;

if (this._lPage.classList.contains(‘remember-theme’)) { let darkMode = localStorage.getItem(‘oneuiDarkMode’) || false; }

if (mode === 'init') {
    if (darkMode) {
      self._lPage.classList.add('sidebar-dark');
      self._lPage.classList.add('page-header-dark');
      self._lPage.classList.add('dark-mode');
    } else if (mode === 'init') {
                  self._lPage.classList.remove('dark-mode');
} else if (mode === 'init' ) {
  localStorage.removeItem('oneuiDarkMode');
}

}
} else if (mode === 'on') {
  localStorage.setItem('oneuiDarkMode', true);
} else if (mode === 'off') {
  localStorage.removeItem('oneuiDarkMode');
}

Something in that code, but im not good with JS. thanks

This bug is very annoying for US, because we enforce this theme into all of our projects, and not possible to start with dark mode causes a major problems. Please reply to me , i need a fix to that stuff. Currently i can set just without remember-theme , but if someone change to white mode, it doesnt saves , cuz we are forced to not use ‘remember-theme’ in the page-container.

Very easy to reproduce – open your demo page with dark mode on – “be_layout_dark_mode_on.html” and add ‘remember-theme’ , and the page container becomes white

Hi, this is normal because the remember theme functionality was made to work with a light theme as base, not the other way around.

You can just add the ‘remember-theme’ class (not ‘dark-mode’) and run the following JS code on page load to have dark mode as the default preference:

One.onLoad(function(){
  if (localStorage.getItem('oneuiModePreference') === null) {
    One.layout('dark_mode_on');
    localStorage.setItem('oneuiModePreference', true);
  }
});

Hope that helps. Moreover, please have in mind that if you are using OneUI in more than one end product, you have to acquire additional licenses for each additional one.

Just a small fix to the code:

One.onLoad(function(){
  jQuery('.js-select2').select2({
    dropdownParent: jQuery('#your-modal-id')
  });
});

@pixelcave thank you! Best template, best author!

Thank you for your kind words! We’re very happy it was helpful and you’ve got it working. Happy coding!

Hi, thank you for your interest in OneUI! If you are familiar with React and JavaScript it won’t be that hard to migrate the core JS functionality over since we are not using any third party libraries such as jQuery.

If on the other hand you are not very confident with React and JavaScript, you might find it a bit overwhelming. Using the design on its own though, it’s a simple process. Hope that helps!

Thanks for the answer, I am comfortable with ReactJS. I just didn’t want some features to break using the theme and ReactJS because of the DOM. Your answer is satisfactory. Thank you.

You’re welcome, thank you once again for your interest, wish you all the best with your project!

Thanks for your interest in OneUI! There is no such version available at the moment but we might create one in the future, so stay tuned.

Hello, many thanks for choosing OneUI for your project, really glad you like the latest updates! Thanks for you suggestion, we will evaluate such feature and we might implement it in a future update, so stay tuned.

Hi Rob, many thanks for choosing OneUI for your project! Thanks for your suggestion, it makes perfect sense.

The thing is that we don’t force the regeneration but rather use few functions which auto generate dummy content from the PHP version. It is something that we can’t bypass unless we hardcode the content which defeats the purpose of quickly having dummy content for the example pages.

Is there a specific reason you diff the .html files? The update process is the same for each update (updating section includes further info) and if there is an additional change you need to apply to your markup with an update, we always provide the related info in the changelog.

Thanks @pixelcave for responding. I’m not sure I’m following because I’m referring to diffing the changes in the HTML version. It’s not a huge deal but I’m using the Laravel version where I’ve integrated OneUI templates into my app. When a new version of OneUI comes out I diff the HTML version to find out what CSS classes or other changes have happened so I can manually apply those changes. Some examples of those changes are:

enable-cookies to remember-theme

“link-fx font-w600 font-size-h2 text-white” to “link-fx fw-semibold fs-2 text-white” for the link that wraps the app name.

Switching from “form-group” to “mb-4”.

If there is a better way to do this I’m all ears! Thanks either way.

You’re welcome Rob. We’re sorry that we didn’t specify it but with each update we auto generate the HTML version from the PHP one and that’s why there are always changes to the dummy data. Hope that makes sense now.

We can totally understand what you mean and understand how a diff can be helpful in that case. That kind of changes though are always documented in the changelog and most of the time are very few. The exception comes with the 5.0 version which we consider as a new separate version due to many changes that took place because of Bootstrap 5 migration and improvements we made under the hood (that’s why we didn’t include a changelog to upgrade from 4.9).

If you are interested, please send us a message from our profile’s contact form and we will send you over a complete changelog for upgrading from 4.x to 5.x (for example, the class changes in your example happened due to Bootstrap 5 – more info can be found at https://getbootstrap.com/docs/5.1/migration/ ). Hope that helps!