Pivotal UI is a collection of React components that are styled for the Pivotal brand. Visit the live styleguide here.
We assume your project has the following:
- node/npm
- A module loader such as Webpack or Browserify - Pivotal UI modules follow the CommonJS pattern
- A JSX transpiler such as Babel - Pivotal UI components are written in JSX
- React - Pivotal UI components are React components
cd /path/to/your/web/assetsnpm initnpm install --save pivotal-ui
Javascript:
import React from 'react';
import {DefaultButton} from 'pivotal-ui/react/buttons';
class MyTestPage extends React.Component {
constructor(props) {
super(props);
this.state = {showMessage: false};
}
showMessage() {
this.setState({showMessage: true});
}
render() {
return (
<div className="container">
<DefaultButton onClick={this.showMessage}>Show Message</DefaultButton>
{this.state.showMessage ? <h1>Hello world!</h1> : null}
</div>
);
}
}
ReactDOM.render(<MyTestPage />, document.getElementById('root'));HTML:
<html>
<body>
<div id="root"></div>
<script src="<path-to-your-project's-compiled-javascript-file>"></script>
</body>
</html>See MAINTAINERS.md.
Please refer to our contribution guidelines.
Copyright 2018 Pivotal Software, Inc. All Rights Reserved.