Onsen UI

• E

  This topic is deleted!
  • emccorson

  1
  0
  Votes
  1
  Posts
  68
  Views

  No one has replied

• 

  How to ask a question.
  • OnsenUI

  2
  3
  Votes
  2
  Posts
  5960
  Views

  

  @onsenui said in How to ask a question.: You can include any other resources that you consider important to understand your question. For example you can add links to external pages or embed images in the post (drag and drop the images to the composer). interesting great information :)
• I

  problems with Onsen and android webview
  • ihoid

  1
  0
  Votes
  1
  Posts
  9
  Views

  No one has replied

• L

  Fiber Laser Metal Cutting Machine
  laser cutter • • laserchina

  1
  0
  Votes
  1
  Posts
  26
  Views

  No one has replied

• S

  Multi language?
  • StevieC

  7
  0
  Votes
  7
  Posts
  4785
  Views

  G

  Hi, Check localStorage, if nothing recorded means user use your apps for the first time, then get device language and store to localStorage. I prefer using device language to location language, because someone may be in Japan, but is foreigner. let systemLanguage = navigator.language.replace('-', '_').toLowerCase().substr(0, 2); localStorage.setItem("language", systemLanguage); But your apps cannot support all languages, so you have to check if you can support that user’s device language. If not supported, set it to default language. const supportLanguages = { "ja": "日本語", //Japanese "zh": "中文", // Chinese "en": "English" }; if (!supportLanguages.hasOwnProperty(systemLanguage)) { systemLanguage = "en" } In your Apps content, your set class for different languages text. <ons-tabbar swipeable position="auto"> <ons-tab page="home.html"> <input type="radio" style="display: none"> <button class="tabbar__button"> <div class="tabbar__icon"> <ons-icon icon="ion-ios-home"></ons-icon> </div> <div class="tabbar__label"> <span class="lang en">Home</span> <span class="lang zh">首頁</span> <span class="lang ja">ホーム</span> </div> </button> </ons-tab> <ons-tab page="products.html"> <input type="radio" style="display: none"> <button class="tabbar__button"> <div class="tabbar__icon"> <ons-icon icon="ion-ios-construct"></ons-icon> </div> <div class="tabbar__label"> <span class="lang en">Products</span> <span class="lang zh">產品</span> <span class="lang ja">製品</span> </div> </button> </ons-tab> <ons-tab page="contactus.html"> <input type="radio" style="display: none"> <button class="tabbar__button"> <div class="tabbar__icon"> <ons-icon icon="ion-ios-people"></ons-icon> </div> <div class="tabbar__label"> <span class="lang en">Contact Us</span> <span class="lang zh">聯絡我們</span> <span class="lang ja">お問い合わせ</span> </div> </button> </ons-tab> </ons-tabbar .unselectedLanguages { display: none; } function setLanguage(lang) { let languages = document.getElementsByClassName('lang'); for (language of languages) { language.classList.add("unselectedLanguages") } let selectedLanguage = document.getElementsByClassName(lang); for (language of selectedLanguage) { language.classList.remove("unselectedLanguages") } localStorage.setItem("language", lang); } You can have a ‘Settings’ menu, or a language ‘button’ for user to change his preferred language, and save it to localStorage for next time usage. letpreferedLanguage = localStorage.getItem("language"); setLanguage(preferedLanguage); Regards, Gobi
• S

  Dynamic view update
  • sznur

  5
  0
  Votes
  5
  Posts
  259
  Views

  G

  Hi, if you only want to add a ons-tab to ons-tabbar, you can add it to “ons-tabbar .ons-tabbar__footer”, but if it just show the tab but don’t work, may have to spent more time to find out, Or write own function for ons-tab. var addTab = function () { document.querySelector('ons-tabbar .ons-tabbar__footer').appendChild(ons.createElement(`<ons-tab page="tab3.html" label="Tab 3" icon="md-zoom-in"></ons-tab>`)); } Best Regards, Gobi
• M

  Pursuing Nutritious Pounds Losing Ideas
  • macleanbrian

  1
  0
  Votes
  1
  Posts
  29
  Views

  No one has replied

• M

  Struggling to put AdMob template working
  • mzarkoff

  1
  0
  Votes
  1
  Posts
  30
  Views

  No one has replied

• A

  How to do a fat (tall) toolbar with background image, burger menu (for splitter) and no bottom border in Onsen UI?
  • ajck

  2
  0
  Votes
  2
  Posts
  134
  Views

  A

  Just realised this got answered in my original post two and a half years ago (!), see here: https://community.onsen.io/post/10416
• A

  Extra tall navbar header for OnsenUI/PhoneGap app, with SVG background?
  • ajck

  3
  0
  Votes
  3
  Posts
  1451
  Views

  A

  @mcombatti I apologise for a reply that is 2 & 1/2 years late (!) but I am only now revisiting this stage of this project and found that you replied, and not only that but it works! (with some minor code edits). Thanks very much. For anyone else looking, the working code is below BUT you need to edit the two img src URLs to remove the  which is after the ); in the first URL and after the " in the second URL (the text editor for this forum adds these extra bits into the URLs when you hilight it as source code). If you then paste it into the playground it works https://onsen.io/playground/ <style> #bg1 { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: url("![bighd.jpg](https://videohive.img.customer.envatousercontent.com/files/241571641/bighd.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=eff7aca73a2933133204ac6800f993bf");) } </style> <ons-page id="myPage"> <ons-toolbar style="height: 120px;" id="MainToolbar"> <div class="left" id="MainToolbar_leftDiv"> <ons-toolbar-button id="bg1" style="color: #ffffff;"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button> </div> </ons-toolbar> <div id="hiddenspace" style="height: 72px;"> </div> <ons-card> <img src="![download_image_onsenui_01.png](https://monaca.io/img/logos/download_image_onsenui_01.png") alt="Onsen UI" style="width: 100%"> <div class="title"> Awesome framework </div> <ons-list> <ons-list-header>Bindings</ons-list-header> <ons-list-item>Vue</ons-list-item> <ons-list-item>Angular</ons-list-item> <ons-list-item>React</ons-list-item> </ons-list> </ons-card> </ons-page>
• D

  Hide Onsen Toolbar
  • dustintinsley

  3
  0
  Votes
  3
  Posts
  273
  Views

  G

  Hi document.querySelector(‘ons-toolbar’).show() is not necessary. document.addEventListener('init', function(event) { var page = event.target; if (page.id === 'page1') { page.querySelector('#push-button').onclick = function() { document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}}); }; } else if (page.id === 'page2') { if (true) { page.querySelector('.toolbar').hide(); } else { page.querySelector('ons-toolbar').setAttribute('modifier', '') } } }); Best Regards Gobi
• L

  Where to place custom.js file for separate html page?
  • LittleOldLady

  8
  0
  Votes
  8
  Posts
  645
  Views

  G

  I have tried LoadJS in my projects, it works fine with OnsenUI. Best Regards Gobi
• D

  Perform function on closing a page using ons-navigator
  • dustintinsley

  2
  0
  Votes
  2
  Posts
  231
  Views

  G

  Hi, I have done this in my project before, to avoid user back accidentally. "ons-back-button: is a component that shows the button and also the action “popPage()”, so we cannot use it. Instead of “<div class=“left”><ons-back-button>Page 1</ons-back-button></div>”, we use the following to draw the back-button. <div class="back-button" style="display: inline-block;" onclick="showConfirm()"> <span class="back-button__icon"> <!--?xml version="1.0" encoding="UTF-8"?--> <svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>ios-back-button-icon</title> <g id="toolbar-back-button" stroke="none" stroke-width="1" fill-rule="evenodd"> <g id="ios" transform="translate(-34.000000, -30.000000)"> <polygon id="ios-back-button-icon" points="34 40.5 44.5 30 46.5 32 38 40.5 46.5 49 44.5 51"></polygon> </g> </g> </svg> </span> <span class="back-button__label" style="">Page 1</span> </div> We have to write the back-button function by ourselves, we call it “showConfirm()”. Ask your confirmation before popPage(). var showConfirm = function() { ons.notification.confirm({ message: 'Are you sure to exit?', buttonLabels: ['Yes', 'No'], primaryButtonIndex: 1, callback: function(i) { if (i === 0) { document.querySelector('#myNavigator').popPage() } else { ons.notification.alert('You have cancelled back to page 1'); } } }) }; So when you press the back button, it will show a dialog to have your confirmation, if you press ‘yes’, then it will go back to page 1. Best Regards Gobi
• D

  Create "stackable" pages with Cordova + Onsen UI?
  • dustintinsley

  3
  0
  Votes
  3
  Posts
  300
  Views

  D

  The Nest app. Also noticed it on an app called Super Agent.
• 

  How to add a card-header like the bootstrap's sytle?
  • BrightSun2021

  2
  0
  Votes
  2
  Posts
  586
  Views

  G

  Sorry for late reply. <ons-card modifier="bootstrap"> <div class="header">Header</div> <div class="content"> <div class="title">Title</div> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <div class="footer"><small> Last updated 3 mins ago</small> </div> </ons-card> .card--bootstrap .header { font-weight: 500; padding: 0.75rem 1.25rem; margin-bottom: 0; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); } .card--bootstrap { padding: 0px; border-radius: 0px; } .card--bootstrap__content { padding-left: 15px; padding-right: 15px; } .card--bootstrap__content .title { /* same as onsen .card__title */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 20px; margin: 4px 0px 8px 0; padding: 0; display: block; box-sizing: border-box; } .card--bootstrap .footer { padding: 0.75rem 1.25rem; background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.125); } You can write your css. Best Regards, Gobi
• S

  onsen carousel last item getActiveIndex
  • SushiMan

  2
  0
  Votes
  2
  Posts
  2320
  Views

  G

  Sorry for late reply. It seems the postchange will not fire for last item, because it is not yet touch the end. Instead of setting carousel item width 80%, set a div 80% to contain the carousel. <div style="width:80%"> <ons-carousel fullscreen swipeable auto-scroll item-width="100%" overscrollable id="carousel"> <ons-carousel-item style="background-color: #085078;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> BLUE </div> </ons-carousel-item> <ons-carousel-item style="background-color: #373B44;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> DARK </div> </ons-carousel-item> <ons-carousel-item style="background-color: #D38312;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> ORANGE </div> </ons-carousel-item> </ons-carousel> </div> Best Regards Gobi
• 

  How to change the icon's color of BackButton?
  • BrightSun2021

  2
  0
  Votes
  2
  Posts
  508
  Views

  G

  Sorry for late reply. <ons-page> <ons-toolbar> <div class="left"> <ons-back-button>back</ons-button> </div> </ons-toolbar> </ons-page> .back-button__icon { fill: red; } .back-button__label { color: orange; } Use .back-button__icon: { fill: the color you want}, will change the left arrow color, and .back-button__label to change the color of text. Best Regards, Gobi
• D

  This topic is deleted!
  • dustintinsley

  1
  0
  Votes
  1
  Posts
  42
  Views

  No one has replied

• A

  Buy Properties in Electronic City Phase 1
  • aravindarya

  1
  0
  Votes
  1
  Posts
  175
  Views

  No one has replied

• 

  What are the core files
  • hajsf

  2
  0
  Votes
  2
  Posts
  480
  Views

  E

  This section of the guide about reducing app size may be helpful for you: https://onsen.io/v2/guide/appsize.html#reducing-app-size Specifically, using ES modules is the way to ensure you only include the components you actually use. The CSS for iOS/Android is bundled together so it will be difficult to separate these, but the weight of this is not very much. Also, you can use onsenui-core.js instead of onsenui.js, and only the icon packs you need.