@ovh-ux/ui-kit v6.10.0

OVHcloud UI Kit

A component framework for the OVHcloud brand.

Installation

Prerequisites

This library has been tested with AngularJS 1.6+.

You need to load these dependencies in your project:

• angular
• angular-aria
• angular-sanitize
• bloodhound-js (used by Autocomplete)
• clipboard (used by Clipboard)
• flatpickr (used by Calendar and Timepicker)
• popper.js (used by Popover and Tooltip)
• ui-select (used by Select and Select Picker)

See package.json for more informations.

Install with npm

npm install @ovh-ux/ui-kit

Install with yarn

yarn add @ovh-ux/ui-kit

Usage

1. In your index.html, you need to load oui.css and oui.js:

<link rel="stylesheet" href="path/to/@ovh-ux/ui-kit/dist/css/oui.css">

<script src="path/to/@ovh-ux/ui-kit/dist/js/oui.js" type="text/javascript"></script>

2. You need to add oui in your angular module dependencies like that:

angular.module('myAwesomeApp', ['oui']);

Webpack

In your index.js, you need to import the library, with its CSS file separately.

import '@ovh-ux/ui-kit/dist/css/oui.css';
import oui from '@ovh-ux/ui-kit';

angular.module('myAwesomeApp', [oui]);

LESS variables

If you want to use the variables for your style, you can access it through _variables.less.

@import 'path/to/@ovh-ux/ui-kit/dist/less/_variables';

Note: Importing _variables.less will import _constants.less and _icons.less too.

Develop

Run in development mode

1. Clone and install ovh-ui-kit

git clone https://github.com/ovh/ovh-ui-kit.git
cd ovh-ui-kit
yarn install

2. Run ovh-ui-kit in the Workshop

yarn start

This will open Storybook in your default browser

Hot reload

Once you have yarn start-ed the project, you can edit anything with an automatic browser refresh as a result.

Contributing

You've developed a new cool feature? Fixed an annoying bug? We'd be happy to hear from you!

see CONTRIBUTING

Related links

• Contribute: https://github.com/ovh/ovh-ui-kit/blob/master/CONTRIBUTING.md
• Report bugs: https://github.com/ovh/ovh-ui-kit/issues
• Get latest version: https://github.com/ovh/ovh-ui-kit

Documentation

Documentation is available from the packages/ folder, every package is self-documented throught a README.md file.

License

See https://github.com/ovh/ovh-ui-kit/blob/master/LICENSE