Skip to content
Ridibooks CMS UI Component Library
CSS JavaScript Makefile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
examples
src
.babelrc
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
Makefile
README.md
package.json

README.md

Ridibooks CMS UI

npm (scoped) Build Status

UI components for Ridibooks CMS SDK.

Getting Started

Install

Install via npm:

npm install --save @ridi/cms-ui

Or use CDN:

<script src="https://cdn.jsdelivr.net/npm/@ridi/cms-ui@0.3/dist/cms-ui.var.js"></script>

Usage

React

import { Menu } from '@ridi/cms-ui';

const menuItems = ... // get menu data from cms-sdk via server-side rendering or custom API.

const Example = (props) => {
  return (
    <div>
      <Menu items={menuItems} />
    </div>
  );
};

Browser

<html>
  <head>
    <!-- Load library in <head> to avoid flickering. -->
    <script src="https://cdn.jsdelivr.net/npm/@ridi/cms-ui@0.3/dist/cms-ui.var.js"></script>
  </head>
  <body>
    <div id="menu_container"></div>

    <script>
      (function renderMenu() {
        var { createElement, render, Menu } = CmsUi;

        // Get menu data from cms-sdk via server-side rendering or custom API.
        var menuItems = ...

        var menuElement = createElement(Menu, { items: menuItems });
        var menuContainer = document.getElementById('menu_container');

        // Make sure to container DOM element is loaded before call render function.
        render(menuElement, menuContainer);
      })();
    </script>
  </body>
</html>

Note: After cms-ui is loaded, following CSS is injected automatically for the layout. This is not configurable for now. If this causes any problem, please notify us.

body {
  margin: 3.5rem 0 0 0;
}

@media (min-width: 1200px) {
  body {
    margin: 0 0 0 17rem;
  }
}

Development

Setup

Install all dependencies:

make install

Run Example App

To compile and run example app, please run:

React

make start-umd

Browser

make start-var

Build

To build cms-ui module, please run:

make build

The output file will be generated in dist directory.

You can’t perform that action at this time.