fastmodel-layout-components v9.0.4
Fastmodel Layout Components
A library of layout-related components for re-use across all Fastmodel React applications.
Installation
yarn add fastmodel-layout-components
Usage
You must import the CSS file for the sidebar and modal to work properly. Most other styles are inline. Then you can import the individual components you need.
import 'fastmodel-layout-components/css/index.css';
// e.g.
import { Button, Tip, Popover, Modal, Sidebar } from 'fastmodel-layout-components';
Contribution
If you are going to add a component to this library,
make sure that it meets the following criteria:
1. It should be universally useful to our apps.
2. It should be as simple and composable as possible.
It's better to compose many simpler components into
one more complex one than to have one big, highly
configurable component. The Sidebar
is a
good example of this, and the Button
component
is a good counter-example.
3. It should have a helpful, up-to-date corresponding
demo that documents how to use it.
4. Make sure you export the component in index.jsx
.
To create a demo
To create a demo component, follow these steps: 1. Create your demo component file.
```
$ touch demo/demo/MyNewComponentDemo.jsx
```
- In
demo/demo.jsx
, import your demo component, and add it too theDemoIndex
andDemoPage
.// first import the component import MyNewComponentDemo from "./demo/MyNewComponentDemo"; // then add it to DemoIndex <DemoLink to="MyNewComponent">MyNewComponent</DemoLink> // and finally add it to DemoPage <Route path="MyNewComponent" component={MyNewComponentDemo}/>
- Now, you have a link on our demo page to an empty file that doesn't export a component at all, so it's time to build the actual demo component. At a minimum, your demo should demonstrate how the component works and should indicate what props are to be used with the component. Ideally, your demo will have an interactive UI that allows someone to play with any of the props the component can use and see the effects in real time.
- As you develop your demo, you can see your work
by opening
index.html
in your browser.
#####NOTE: You may notice that most of the demos so far barely live up to the 'minimum' standard I just described, let alone the 'ideal' standard. Help us make this library better!
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago