Many thanks for choosing OneUI for your project! The Laravel Starter Kit is based on the HTML version but there is also a full Laravel version (with Vue) in the Vue Edition. Feel free to get in touch through our profile’s contact form from the account the purchase was made if you need any additional help.

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.