1 | apeman-react-field
|
2 | ==========
|
3 |
|
4 |
|
5 | This file is generated by ape-tmpl. Do not update manually.
|
6 | --->
|
7 |
|
8 |
|
9 | <a name="badges"></a>
|
10 |
|
11 | [![Build Status][bd_travis_shield_url]][bd_travis_url]
|
12 | [![Code Climate][bd_codeclimate_shield_url]][bd_codeclimate_url]
|
13 | [![Code Coverage][bd_codeclimate_coverage_shield_url]][bd_codeclimate_url]
|
14 | [![npm Version][bd_npm_shield_url]][bd_npm_url]
|
15 | [![JS Standard][bd_standard_shield_url]][bd_standard_url]
|
16 |
|
17 | [bd_repo_url]: https://github.com/apeman-react-labo/apeman-react-field
|
18 | [bd_travis_url]: http://travis-ci.org/apeman-react-labo/apeman-react-field
|
19 | [bd_travis_shield_url]: http://img.shields.io/travis/apeman-react-labo/apeman-react-field.svg?style=flat
|
20 | [bd_travis_com_url]: http://travis-ci.com/apeman-react-labo/apeman-react-field
|
21 | [bd_travis_com_shield_url]: https://api.travis-ci.com/apeman-react-labo/apeman-react-field.svg?token=
|
22 | [bd_license_url]: https://github.com/apeman-react-labo/apeman-react-field/blob/master/LICENSE
|
23 | [bd_codeclimate_url]: http://codeclimate.com/github/apeman-react-labo/apeman-react-field
|
24 | [bd_codeclimate_shield_url]: http://img.shields.io/codeclimate/github/apeman-react-labo/apeman-react-field.svg?style=flat
|
25 | [bd_codeclimate_coverage_shield_url]: http://img.shields.io/codeclimate/coverage/github/apeman-react-labo/apeman-react-field.svg?style=flat
|
26 | [bd_gemnasium_url]: https://gemnasium.com/apeman-react-labo/apeman-react-field
|
27 | [bd_gemnasium_shield_url]: https://gemnasium.com/apeman-react-labo/apeman-react-field.svg
|
28 | [bd_npm_url]: http://www.npmjs.org/package/apeman-react-field
|
29 | [bd_npm_shield_url]: http://img.shields.io/npm/v/apeman-react-field.svg?style=flat
|
30 | [bd_standard_url]: http://standardjs.com/
|
31 | [bd_standard_shield_url]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 | <a name="description"></a>
|
38 |
|
39 | apeman react package for field components.
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 | <a name="overview"></a>
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 | <a name="sections"></a>
|
54 |
|
55 |
|
56 |
|
57 | <a name="section-doc-guides-01-installation-md"></a>
|
58 |
|
59 | Installation
|
60 | -----
|
61 |
|
62 | ```bash
|
63 | $ npm install apeman-react-field --save
|
64 | ```
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 | <a name="section-doc-guides-02-demo-md"></a>
|
72 |
|
73 | Demo
|
74 | -----
|
75 |
|
76 | [Live demo][demo_url] is hosted on GitHub Pages.
|
77 |
|
78 | [![Demo Image](./doc/images/screenshot.png)][demo_url]
|
79 |
|
80 | [demo_url]: http://apeman-react-labo.github.io/apeman-react-field/demo/demo.html
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 | <a name="section-doc-guides-03-usage-md"></a>
|
88 |
|
89 | Usage
|
90 | ---------
|
91 |
|
92 | ```jsx
|
93 | 'use strict'
|
94 |
|
95 | import React from 'react'
|
96 | import {ApField, ApFieldSet, ApFieldLegend, ApFieldLabel, ApFieldValue, ApFieldStyle} from 'apeman-react-field'
|
97 |
|
98 | import {ApText, ApTextStyle} from 'apeman-react-basic'
|
99 | import {ApPassword, ApPasswordStyle} from 'apeman-react-basic'
|
100 |
|
101 | const ExampleComponent = React.createClass({
|
102 | render () {
|
103 | return (
|
104 | <div>
|
105 | <ApFieldStyle />
|
106 | <ApTextStyle />
|
107 | <ApPasswordStyle />
|
108 | <ApFieldSet>
|
109 | <ApFieldLegend>Login Form</ApFieldLegend>
|
110 | <ApField>
|
111 | <ApFieldLabel>Username</ApFieldLabel>
|
112 | <ApFieldValue><ApText /></ApFieldValue>
|
113 | </ApField>
|
114 | <ApField>
|
115 | <ApFieldLabel>Password</ApFieldLabel>
|
116 | <ApFieldValue><ApPassword/></ApFieldValue>
|
117 | </ApField>
|
118 | </ApFieldSet>
|
119 | </div>
|
120 | )
|
121 | }
|
122 | })
|
123 |
|
124 | ```
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 | <a name="section-doc-guides-04-components-md"></a>
|
133 |
|
134 | Components
|
135 | -----
|
136 |
|
137 |
|
138 | ### ApFieldLabel
|
139 |
|
140 | **Props**
|
141 |
|
142 | | Name | Type | Default | Description |
|
143 | | ---- | ---- | ------- | ----------- |
|
144 | | htmlFor | string | null | | |
|
145 |
|
146 | ### ApFieldLegend
|
147 |
|
148 | **Props**
|
149 |
|
150 | | Name | Type | Default | Description |
|
151 | | ---- | ---- | ------- | ----------- |
|
152 |
|
153 | ### ApFieldSet
|
154 |
|
155 | **Props**
|
156 |
|
157 | | Name | Type | Default | Description |
|
158 | | ---- | ---- | ------- | ----------- |
|
159 | | plain | bool | false | | |
|
160 | | uuid | | uuid.v4() | | |
|
161 |
|
162 | ### ApFieldStyle
|
163 |
|
164 | **Props**
|
165 |
|
166 | | Name | Type | Default | Description |
|
167 | | ---- | ---- | ------- | ----------- |
|
168 | | style | object | {} | | |
|
169 |
|
170 | ### ApFieldValue
|
171 |
|
172 | **Props**
|
173 |
|
174 | | Name | Type | Default | Description |
|
175 | | ---- | ---- | ------- | ----------- |
|
176 |
|
177 | ### ApField
|
178 |
|
179 | **Props**
|
180 |
|
181 | | Name | Type | Default | Description |
|
182 | | ---- | ---- | ------- | ----------- |
|
183 | | center | bool | false | | |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 | <a name="license"></a>
|
194 |
|
195 | License
|
196 | -------
|
197 | This software is released under the [MIT License](https://github.com/apeman-react-labo/apeman-react-field/blob/master/LICENSE).
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 | <a name="links"></a>
|
204 |
|
205 | Links
|
206 | ------
|
207 |
|
208 | + [apeman][apeman_url]
|
209 | + [apeman-react-labo][apeman_react_labo_url]
|
210 | + [React][react_url]
|
211 |
|
212 | [apeman_url]: https://github.com/apeman-labo/apeman
|
213 | [apeman_react_labo_url]: https://github.com/apeman-react-labo
|
214 | [react_url]: https://facebook.github.io/react/
|
215 |
|
216 |
|