GitHub

Javascript

RS Custom Components

Custom built vue components made useable in vue or standard html.

<div class="navbar navbar-branded">
  <div class="navbar-brand">
    <div class="navbar-brand-logo"></div>
    <i class="icon icon-car"></i>
  </div>
  <section class="navbar-section">
    <h1>Calculators</h1>
  </section>
  <branded-navbar-menu />
</div>

Adding our custom components to HTML is easy, just create a target for your component, in this example we will be adding the BrandedNavbarMenu component to an empty div with the id branded-navbar-menu. 

<div class="navbar navbar-branded">
  <div class="navbar-brand">
    <div class="navbar-brand-logo"></div>
    <i class="icon icon-car"></i>
  </div>
  <section class="navbar-section">
    <h1>Calculators</h1>
  </section>
  <div id="branded-navbar-menu"></div>
</div>

Next, you'll want to add a script reference to vue and the rsui components to your footer so we can tell our page where to look for our component. We recommend placing these two scripts right above the closing body tag. 

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11">
  <script type="text/javascript" src="https://static.ridestyler.com/rs-ui/latest/components/rsui.umd.js">
</body>

or you can import any of our components from the cdn below if you're using a module system:

import BrandedNavbarMenu from "ridestyler.ui/src/components/BrandedNavbarMenu";

Now that we have a reference to vue and our components we can go ahead and initialize our component with Vue. You'll need to start by creating a new Vue instance, and rendering the component into our branded-navbar-menu div. Which will look something like this: 

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11" />
  <script type="text/javascript" src="https://static.ridestyler.com/rs-ui/latest/components/rsui.umd.js" />
  <script type="text/javascript">
      new Vue({
        extends: rsui.components.BrandedNavbarMenu,
        el: '#branded-navbar-menu'
      })
  </script>
</body>

That's it! Your component will be rendered in the branded-navbar-menu div.

Calculators