{{ $title := delimit (slice (cond (isset .Params "htmltitle") .Params.htmltitle
.Page.Title) .Site.Title) " | " }} {{ $description := cond (isset .Params
"description") .Params.description .Page.Description }}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="{{ $description }}" />

{{ if .Params.robots }}
  <meta name="robots" content="{{ .Params.robots }}">
{{ end }}

<title>{{ $title }}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true" />
<link
  href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@300;500;600&display=swap"
  rel="stylesheet"
/>
<meta name="referrer" content="origin" />
<meta name="HandheldFriendly" content="True" />
<meta name="msapplication-TileColor" content="#7F4EFF" />
<meta name="theme-color" content="#ffffff" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ $title }}" />
<meta
  property="og:image"
  content="https://user-images.githubusercontent.com/11527560/159138593-09223308-ce91-4582-a47a-a03166fef26b.gif"
/>
<meta property="og:description" content="{{ $description }}" />
<meta property="og:site_name" content="Materialize" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@MaterializeInc" />
<meta name="twitter:creator" content="@MaterializeInc" />
<meta name="twitter:title" content="{{ $title }}" />
<meta
  name="twitter:image"
  content="https://user-images.githubusercontent.com/11527560/159138593-09223308-ce91-4582-a47a-a03166fef26b.gif"
/>
<meta name="twitter:description" content="{{ $description }}" />
<link
  rel="shortcut icon"
  type="image/x-icon"
  href="{{ .Site.BaseURL }}images/materialize_favicon_32.png"
/>
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="{{ .Site.BaseURL }}images/materialize_logo_180.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="{{ .Site.BaseURL }}images/materialize_favicon_32.png"
/>
<link
  rel="mask-icon"
  href="{{ .Site.BaseURL }}images/materialize_logo.svg"
  color="#4d7cfe"
/>
<link rel="canonical" href="{{ .Permalink }}" />


{{/* Include all JavaScript files here */}}
<script src="https://cmp.osano.com/Azz7yeT5NmUe93yp/01cb9c3f-e1eb-4e74-9255-1280e80cdc28/osano.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/simple-scrollspy@2.0.3/dist/simple-scrollspy.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

{{/* Sass processing here */}} {{ $style := resources.Get "sass/main.scss" |
toCSS | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" />

{{/* Intercom */}}
<script>
  const APP_ID = "r8661p0d";
  window.intercomSettings = {
    api_base: "https://api-iam.intercom.io",
    app_id: APP_ID
  };
</script>
<script>
  (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
 </script>

{{/* Algolia DocSearch */}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script defer>
  addEventListener("DOMContentLoaded", () => {
    docsearch({
      appId: "MB06X1VH88",
      apiKey: "d3aa325086974cdfb3912f28e5a8c168",
      indexName: "materialize",
      insights: true,
      container: "#docsearch",
    });
  });
</script>

{{if hugo.IsProduction}} {{/* Google Tag Manager */}}
<script>
  (function (w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
    var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s),
      dl = l != 'dataLayer' ? '&l=' + l : '';
    j.async = true;
    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
    f.parentNode.insertBefore(j, f);
  })(window, document, 'script', 'dataLayer', 'GTM-5VDFPSJ');
</script>
{{end}}

{{/* Tabs */}}
<script>
  $(document).ready(function () {
    // make nav-tab lists from tab-panes
    $(".tab-content").each(function (idx, tab) {
      $(tab)
        .find(".tab-pane")
        .each(function (item) {
          var navTabs = $(this).closest(".code-tabs").find(".nav-tabs"),
            title = $(this).attr("title"),
            id = title
              .toLowerCase()
              .replace(/ /g, "-")
              .replace(/[^\w-]+/g, "");
          navTabs.append(`<li><a href="#${id}-t${idx}">${title}</a></li>`);
        });
    });

    // handle click events
    $(".nav-tabs a").click(function (e) {
      var tab = $(this).parent(),
        tabIndex = tab.index(),
        tabPanel = $(this).closest(".code-tabs"),
        tabPane = tabPanel.find(".tab-pane").eq(tabIndex);
      tabPanel.find(".active").removeClass("active");
      tab.addClass("active");
      tabPane.addClass("active");
    });

    // activate first tab
    $(".nav-tabs li:first-child a").click();

  });
</script>