зеркало из https://github.com/mozilla/mofo-ui.git
023abc08de
* Add Mozilla Code of Conduct file Fixes #71. _(Message COC002)_ * Update CODE_OF_CONDUCT.md |
||
|---|---|---|
| demo | ||
| scripts | ||
| src | ||
| .eslintrc.yaml | ||
| .gitignore | ||
| .npmignore | ||
| .sass-lint.yml | ||
| .travis.yml | ||
| CODE_OF_CONDUCT.md | ||
| README.md | ||
| deploy.js | ||
| package-lock.json | ||
| package.json | ||
| webpack.config.js | ||
README.md
mofo-ui
Mozilla Foundation React components.
Purpose
mofo-ui is a library of React UI components primarily for usage by the various Mozilla Foundation hubs. It's designed to complement mofo-bootstrap, but doesn't require it. It can also be used alongside stock Boostrap versions 3 and 4 or with no additional CSS framework.
Usage
In your target project, do the following:
npm i mofo-ui --save- Include the compiled CSS and JS located in
distin your app. - If you're using Webpack, you can require
mofo-uiand pick which components you want to use.
For example:
import { RadioFilter } from "mofo-ui";
<RadioFilter options={radioOptions} initialChoice={`foo`}></RadioFilter>
Development
Run the following commands in your terminal:
git clone https://github.com/mozilla/mofo-ui.gitcd mofo-uinpm start- Navigate to http://127.0.0.1:1615 to view the demo page.
File Structure
├── demo <- A page with all components for dev and demo purposes
│ ├── css <- Compiled code. Don't edit.
│ ├── img <- Image assets for demo page.
│ ├── index.html <- Wrapper for demo.jsx injection
│ └── js <- Compiled code. Don't edit.
├── dist <- Compiled code. Don't edit.
├── src
│ ├── components <- All the mofo-ui library components
│ ├── demo.jsx <- JSX code for demo page
│ ├── exports.js <- Entry point for exported components.
│ └── main.scss
└── webpack.config.js
CSS Class Names
To reduce conflicts with other CSS, prefix all class names with mui- (eg: mui-tabs).