Add basic examples

styczynski · styczynski · commit 8229d9977bbe · 2019-06-25T01:11:32.000+02:00
diff --git a/examples/ArrayDefaultExample.tsx b/examples/ArrayDefaultExample.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+
+import { Example, IExampleProps } from "@blueprintjs/docs-theme";
+import Form from '../src/index';
+
+export class ArrayDefaultExample extends React.Component<IExampleProps, undefined> {
+    public render() {
+        return (
+            <Example options={false} {...this.props}>
+                <Form>
+                    {{
+                        title: "A registration form",
+                        description: "The description",
+                        type: "object",
+                        properties: {
+                            "array": {
+                                type: "array",
+                                ui: "tuple",
+                                items: [
+                                    {
+                                        type: "string",
+                                        title: "Elem1 - string",
+                                        minLength: 3,
+                                    },
+                                    {
+                                        type: "string",
+                                        title: "Elem2 - string",
+                                    }
+                                ],
+                            },
+                        },
+                    }}
+                </Form>
+            </Example>
+        );
+    }
+}
+
diff --git a/examples/index.tsx b/examples/index.tsx
@@ -0,0 +1 @@
+export * from "./ArrayDefaultExample";
diff --git a/src/index.md b/src/index.md
@@ -0,0 +1,9 @@
+---
+reference: react-json-blinkforms
+---
+
+@# React-json-blinkforms
+
+Components elo
+
+@page renderers
diff --git a/src/renderers/ArrayDefault.md b/src/renderers/ArrayDefault.md
@@ -0,0 +1,70 @@
+@# ArrayDefault
+
+Navbars present useful navigation controls at the top of an application.
+
+@reactExample ArrayDefaultExample
+
+@### Fixed to viewport top
+
+Enable the `fixedToTop` prop to attach a navbar to the top of the viewport using
+`position: fixed; top: 0;`. This is so-called "sticky" behavior: the navbar
+stays at the top of the screen as the user scrolls through the document.
+
+This modifier is not illustrated here because it breaks the document flow.
+
+<div class="@ns-callout @ns-intent-danger @ns-icon-error">
+    <h4 class="@ns-heading">Body padding required</h4>
+    The fixed navbar will lie on top of your other content unless you add padding to the top of the
+    `<body>` element equal to the height of the navbar. Use the `$pt-navbar-height` Sass variable.
+</div>
+
+@### Fixed width
+
+If your application is inside a fixed-width container (instead of spanning the
+entire viewport), you can align the navbar to match by wrap your navbar groups
+in an element with your desired `width` and `margin: 0 auto;` to horizontally
+center it.
+
+@css navbar-container
+
+@## Props
+
+The `Navbar` API includes four stateless React components:
+
+* `Navbar`
+* `NavbarGroup` (aliased as `Navbar.Group`)
+* `NavbarHeading` (aliased as `Navbar.Heading`)
+* `NavbarDivider` (aliased as `Navbar.Divider`)
+
+These components are simple containers for their children. Each of them supports
+the full range of HTML `<div>` props.
+
+```tsx
+<Navbar>
+    <Navbar.Group align={Alignment.LEFT}>
+        <Navbar.Heading>Blueprint</Navbar.Heading>
+        <Navbar.Divider />
+        <Button className="@ns-minimal" icon="home" text="Home" />
+        <Button className="@ns-minimal" icon="document" text="Files" />
+    </Navbar.Group>
+</Navbar>
+```
+
+@interface INavbarProps
+
+@interface INavbarGroupProps
+
+@interface INavbarHeadingProps
+
+@interface INavbarDividerProps
+
+@## CSS
+
+Use the following classes to construct a navbar:
+
+* `nav.@ns-navbar` &ndash; The parent element. Use a `<nav>` element for accessibility.
+* `.@ns-navbar-group.@ns-align-(left|right)` &ndash; Left- or right-aligned group.
+* `.@ns-navbar-heading` &ndash; Larger text for your application title.
+* `.@ns-navbar-divider` &ndash; Thin vertical line that can be placed between groups of elements.
+
+@css navbar
diff --git a/src/renderers/renderers.md b/src/renderers/renderers.md
@@ -0,0 +1,4 @@
+@# Components
+
+<!-- Exact ordering of components in the navbar: -->
+@page ArrayDefault
