yuanfa

yuanfa

Thanks for the info.

Regards,
Yuan Fa

yuanfa

Hi Onsen Community,

Based on Onsen’s FAQ page, i needed to add the following Polyfill listed below for it to work on IE 11. Below, is the sample code featuring Onsen UI’s “ons-tabbar” with Polyfill. The tabs would not work properly in IE 11. I am not sure if the Polyfill was done correctly. Please advise me.

Polyfill for Set/Map/WeakMap
Polyfill for MutationObserver
Polyfill for Promise
Polyfill for CustomEvent
Polyfill for Element.prototype.classList
Polyfill for Element.prototype.remove

<!DOCTYPE html>
<html>
<head>


<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default|gated,Set|always,Map|always,WeakMap|always,MutationObserver|always,Promise|always,CustomEvent|always,Element.prototype.classList|always,Element.prototype.remove|always"></script>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css"> 


</head>
<body>
<ons-page>
  <ons-toolbar>
    <div class="center">Tab 1</div>
  </ons-toolbar>

  <ons-tabbar swipeable position="auto">
    <ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active>
    </ons-tab>
    <ons-tab page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face">
    </ons-tab>
  </ons-tabbar>
</ons-page>

<template id="tab1.html">
  <ons-page id="Tab1">
    <p style="text-align: center;">
      This is the first page.
    </p>
  </ons-page>
</template>

<template id="tab2.html">
  <ons-page id="Tab2">
    <p style="text-align: center;">
      This is the second page.
    </p>
  </ons-page>
</template>
<script src="https://unpkg.com/onsenui@2.10.4/js/onsenui.js"></script>
</body>
</html>

Regards,
Yuan Fa

yuanfa

@yuanfa

Posts made by yuanfa