Better readmes for autocomplete avatar chip and input
parent
85e248c0c4
commit
d04c181fdf
|
@ -5,7 +5,6 @@ An input field with a set of predeterminated labeled values. When it's focused i
|
|||
<!-- example -->
|
||||
```jsx
|
||||
import Autocomplete from 'react-toolbox/lib/autocomplete';
|
||||
import theme from 'react-toolbox/lib/autocomplete/theme';
|
||||
|
||||
const source = {
|
||||
'ES-es': 'Spain',
|
||||
|
@ -31,7 +30,6 @@ class AutocompleteTest extends React.Component {
|
|||
label="Choose countries"
|
||||
onChange={this.handleChange}
|
||||
source={source}
|
||||
theme={theme}
|
||||
value={this.state.countries}
|
||||
/>
|
||||
);
|
||||
|
@ -39,6 +37,8 @@ class AutocompleteTest extends React.Component {
|
|||
}
|
||||
```
|
||||
|
||||
If you want to provide a theme via context, the component key is `RTAutocomplete`.
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|
@ -57,9 +57,7 @@ class AutocompleteTest extends React.Component {
|
|||
|
||||
Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
|
||||
|
||||
## Theming
|
||||
|
||||
You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAutocomplete`, it should implement the following interface:
|
||||
## Theme
|
||||
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
|
|
|
@ -5,7 +5,6 @@ Avatars can be used to represent people. This offer users the ability to persona
|
|||
<!-- example -->
|
||||
```jsx
|
||||
import Avatar from 'react-toolbox/lib/avatar';
|
||||
import theme from 'react-toolbox/lib/avatar/theme';
|
||||
|
||||
const GithubIcon = () => (
|
||||
<svg viewBox="0 0 284 277">
|
||||
|
@ -15,15 +14,17 @@ const GithubIcon = () => (
|
|||
|
||||
const AvatarTest = () => (
|
||||
<div>
|
||||
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" theme={theme} />
|
||||
<Avatar icon={<GithubIcon />} theme={theme} />
|
||||
<Avatar theme={theme}><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
||||
<Avatar title="Javier" image="https://placeimg.com/80/80/animals" theme={theme} />
|
||||
<Avatar style={{backgroundColor: 'yellowgreen'}} theme={theme}><GithubIcon /></Avatar>
|
||||
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
|
||||
<Avatar icon={<GithubIcon />} />
|
||||
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
||||
<Avatar title="Javier" image="https://placeimg.com/80/80/animals" />
|
||||
<Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
If you want to provide a theme via context, the component key is `RTAvatar`.
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|
@ -35,12 +36,10 @@ const AvatarTest = () => (
|
|||
| `title` | `String` | `''` | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |
|
||||
| `theme` | `Object` | `null` | Classnames object defining the component style.|
|
||||
|
||||
## Theming
|
||||
|
||||
You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAvatar`, it should implement the following interface:
|
||||
## Theme
|
||||
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
| `avatar` | Root class.|
|
||||
| `image` | Used for the image if the avatar has image.|
|
||||
| `letter` | Used for the letter in case the avatar has no image.|
|
||||
| `avatar` | Used for the root class of the element.|
|
||||
| `image` | Added to the root element when the component has image.|
|
||||
| `letter` | Used for the root element if the component shows the letter.|
|
||||
|
|
|
@ -1,12 +1,9 @@
|
|||
# Chip
|
||||
|
||||
Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons.
|
||||
|
||||
To add an icon or contact image to a chip, include an `Avatar` element as the first child.
|
||||
Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons. To add an icon or contact image to a chip, include an `Avatar` element as the first child.
|
||||
|
||||
<!-- example -->
|
||||
```jsx
|
||||
// Import theme using `ThemeProvider`
|
||||
import Avatar from 'react-toolbox/lib/avatar';
|
||||
import Chip from 'react-toolbox/lib/chip';
|
||||
|
||||
|
@ -37,6 +34,8 @@ const ChipTest = () => (
|
|||
);
|
||||
```
|
||||
|
||||
If you want to provide a theme via context, the component key is `RTChip`.
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|
@ -46,15 +45,13 @@ const ChipTest = () => (
|
|||
| `deletable` | `Boolean` | `false` | If true, the chip will be rendered with a delete icon.|
|
||||
| `onDeleteClick` | `Function` | | Callback to be invoked when the delete icon is clicked. |
|
||||
|
||||
## Theming
|
||||
|
||||
You can take a look to the configuration variables at the `_config.scss` file. The component implements the following class interface:
|
||||
## Theme
|
||||
|
||||
| Name | Description|
|
||||
|:-----------|:-----------|
|
||||
| `avatar` | Used in the root when the component includes an avatar.|
|
||||
| `chip` | Root class.|
|
||||
| `deletable` | Used in the root when the component is deletable.|
|
||||
| `avatar` | Added to the root element when the component includes an avatar.|
|
||||
| `chip` | Used for the root element.|
|
||||
| `deletable` | Added to the root element when the component is deletable.|
|
||||
| `delete` | Used for the delete element wrapper.|
|
||||
| `deleteIcon` | Used for the delete icon wrapper.|
|
||||
| `deleteIcon` | Used for the delete icon.|
|
||||
| `deleteX` | Used for the delete svg inner layer.|
|
||||
|
|
|
@ -27,6 +27,8 @@ class InputTest extends React.Component {
|
|||
}
|
||||
```
|
||||
|
||||
If you want to provide a theme via context, the component key is `RTInput`.
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|
@ -50,8 +52,6 @@ class InputTest extends React.Component {
|
|||
|
||||
## Theming
|
||||
|
||||
The input component uses `ToolboxInput` as theme context id and the configuration is available in the `_config.scss` as usual. Here is the class interface:
|
||||
|
||||
| Name | Description|
|
||||
|:-----------|:-----------|
|
||||
| `bar` | Used for the bar under the input.|
|
||||
|
|
Loading…
Reference in New Issue