diff --git a/website/i18n/en.json b/website/i18n/en.json index 49acdc5640..55ef291bf6 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -252,6 +252,58 @@ }, "version-1.1.0/version-1.1.0-text": { "title": "Text" + }, + "version-1.2.0/version-1.2.0-avatar": { + "title": "Avatar" + }, + "version-1.2.0/version-1.2.0-badge": { + "title": "Badge" + }, + "version-1.2.0/version-1.2.0-card": { + "title": "Card" + }, + "version-1.2.0/version-1.2.0-customization": { + "title": "Customization" + }, + "version-1.2.0/version-1.2.0-getting_started": { + "title": "Getting Started", + "sidebar_label": "Getting Started" + }, + "version-1.2.0/version-1.2.0-header": { + "title": "Header" + }, + "version-1.2.0/version-1.2.0-image": { + "title": "Image" + }, + "version-1.2.0/version-1.2.0-input": { + "title": "Input" + }, + "version-1.2.0/version-1.2.0-listitem": { + "title": "ListItem" + }, + "version-1.2.0/version-1.2.0-overlay": { + "title": "Overlay" + }, + "version-1.2.0/version-1.2.0-pricing": { + "title": "Pricing" + }, + "version-1.2.0/version-1.2.0-searchbar": { + "title": "SearchBar" + }, + "version-1.2.0/version-1.2.0-social_icon": { + "title": "SocialIcon" + }, + "version-1.2.0/version-1.2.0-tile": { + "title": "Tile" + }, + "version-1.2.0/version-1.2.0-tooltip": { + "title": "Tooltip" + }, + "version-1.2.0/version-1.2.0-troubleshooting": { + "title": "Troubleshooting" + }, + "version-1.2.0/version-1.2.0-web_usage": { + "title": "Usage on the Web" } }, "links": { diff --git a/website/versioned_docs/version-1.2.0/avatar.md b/website/versioned_docs/version-1.2.0/avatar.md new file mode 100644 index 0000000000..ba09ac413e --- /dev/null +++ b/website/versioned_docs/version-1.2.0/avatar.md @@ -0,0 +1,406 @@ +--- +id: version-1.2.0-avatar +title: Avatar +original_id: avatar +--- + +Avatars are found all over ui design from lists to profile screens. They are +commonly used to represent a user and can contain photos, icons, or even text. + +
+
+ Standard Avatar +
Standard
+
+
+ Avatar with Title +
Title
+
+
+ Avatar with Icon +
Icon
+
+
+ Standard Avatar with edit button +
Standard with edit button
+
+
+ +## Usage + +```js +import { Avatar } from 'react-native-elements'; + +// Standard Avatar + + +// Avatar with Title + + +// Avatar with Icon + + +// Standard Avatar with edit button + +``` + +#### Avatar with initials + + + +```js +import { Avatar } from "react-native-elements"; + + console.log("Works!")} + activeOpacity={0.7} +/> + console.log("Works!")} + activeOpacity={0.7} +/> + console.log("Works!")} + activeOpacity={0.7} +/> + console.log("Works!")} + activeOpacity={0.7} +/> +``` + +#### Avatar with icons + + + +```js +import { Avatar } from "react-native-elements"; + + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}} +/> + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}} +/> + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 3, marginTop: 100}} +/> + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 4, marginTop: 75}} +/> + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 5, marginRight: 60}} +/> + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}} +/> +``` + +#### Avatar with title placeholder + + + +```js +import { ListItem } from 'react-native-elements'; + +; +``` + +--- + +## Props + +- [`activeOpacity`](#activeopacity) +- [`avatarStyle`](#avatarstyle) +- [`containerStyle`](#containerstyle) +- [`editButton`](#editbutton) +- [`icon`](#icon) +- [`iconStyle`](#iconstyle) +- [`imageProps`](#imageprops) +- [`onEditPress`](#oneditpress) +- [`onLongPress`](#onlongpress) +- [`onPress`](#onpress) +- [`overlayContainerStyle`](#overlaycontainerstyle) +- [`placeholderStyle`](#placeholderstyle) +- [`rounded`](#rounded) +- [`size`](#size) +- [`showEditButton`](#showeditbutton) +- [`source`](#source) +- [`title`](#title) +- [`titleStyle`](#titlestyle) +- [`renderPlaceholderContent`](#renderplaceholdercontent) +- [`Component`](#Component) +- [`ImageComponent`](#imagecomponent) + +--- + +## Reference + +### `activeOpacity` + +Opacity when pressed + +| Type | Default | +| :----: | :-----: | +| number | 0.2 | + +--- + +### `avatarStyle` + +Style for avatar image + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `containerStyle` + +Styling for outer container + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `editButton` + +Icon props to be user for edit button + +| Type | Default | +| :------------------------------: | :---------------------------------------------------------------------------: | +| {[...Icon props](icon.md#props)} | { name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' } | + +--- + +### `icon` + +Displays an icon as the main content of the Avatar. **Cannot be used alongside +title**. When used with the `source` prop it will be used as the placeholder. + +| Type | Default | +| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | +| object {name: string, color: string, size: number, type: string (default is material, or choose from [supported icon sets](icon.md#available-icon-sets)), iconStyle: object(style)} | none | + +--- + +### `iconStyle` + +Extra styling for icon component (optional) + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `imageProps` + +Optional properties to pass to the avatar e.g "resizeMode" + +| Type | Default | +| :--------------------------------: | :-----: | +| {[...Image props](image.md#props)} | none | + +--- + +### `onEditPress` + +Callback function when pressing on the edit button + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `onLongPress` + +Callback function when long pressing component + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `onPress` + +Callback function when pressing component + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `overlayContainerStyle` + +Style for the view outside image or icon + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `placeholderStyle` + +Adds style to the placeholder wrapper + +| Type | Default | +| :------------: | :------------------------------: | +| object (style) | `{ backgroundColor: '#BDBDBD' }` | + +--- + +### `rounded` + +Makes the avatar circular + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `size` + +Size of the avatar + +| Type | Default | +| :----------------------------------------------------: | :-----: | +| string(`small`, `medium`, `large`, `xlarge`) or number | `small` | + +--- + +### `showEditButton` + +Shows an edit button over the avatar (optional) + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `source` + +Image source + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `title` + +Renders title in the placeholder + +| Type | Default | +| :----: | :-----: | +| string | none | + +--- + +### `titleStyle` + +Style for the title + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `renderPlaceholderContent` + +Custom placeholder element (by default, it's the title) + +| Type | Default | +| :------------------------: | :-----: | +| React component or element | none | + +--- + +### `Component` + +Component for enclosing element (eg: TouchableHighlight, View, etc) + +| Type | Default | +| :------: | :----------------: | +| function | TouchableHighlight | + +--- + +### `ImageComponent` + +Custom ImageComponent for Avatar + +| Type | Default | +| :------------------------: | :-----: | +| React component or element | Image | diff --git a/website/versioned_docs/version-1.2.0/badge.md b/website/versioned_docs/version-1.2.0/badge.md new file mode 100644 index 0000000000..8c0a283a0d --- /dev/null +++ b/website/versioned_docs/version-1.2.0/badge.md @@ -0,0 +1,233 @@ +--- +id: version-1.2.0-badge +title: Badge +original_id: badge +--- + +Badges are small components typically used to communicate a numerical value or +indicate the status of an item to the user. + +
+
+ Standard +
Standard
+
+
+ Mini Badge +
Mini Badge
+
+
+ Badge as Indicator +
Badge as Indicator
+
+
+ +### Mini Badge + +This type of badge shows when no `value` prop is provided. This form is +effective for showing statuses. + +### withBadge Higher-Order Component + +The withBadge HOC allows you to easily add badges to icons and other components. + +## Usage + +```js +import { Text, View } from 'react-native' +import { Avatar, Badge, Icon, withBadge } from 'react-native-elements' + +// Standard badge + +My Custom Badge} /> + +// Mini badge + + + + + +// Avatar with mini badge + + + + + + +// withBadge HOC + +const BadgedIcon = withBadge(1)(Icon) + + +// Using the decorator proposal +@connect(state => ({ + notifications: state.notifications, +})) +@withBadge(props => props.notifications.length) +export default class MyDecoratedIcon extends React.Component { + render() { + return ( + + ); + } +} +``` + +--- + +## Props + +- [`badgeStyle`](#badgestyle) +- [`containerStyle`](#containerstyle) +- [`onPress`](#onpress) +- [`status`](#status) +- [`textStyle`](#textstyle) +- [`value`](#value) +- [`Component`](#Component) + +--- + +## Reference + +### `badgeStyle` + +Additional styling for badge (background) view component (optional) + +| Type | Default | +| :-----------------: | :------------: | +| View style (object) | Internal Style | + +--- + +### `containerStyle` + +Style for the container (optional) + +| Type | Default | +| :-----------------: | :------------: | +| View style (object) | Internal Style | + +--- + +### `onPress` + +Function called when pressed on the badge + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `status` + +Determines color of the indicator + +| Type | Default | +| :--------------------------------------: | :-----: | +| `primary`, `success`, `warning`, `error` | primary | + +--- + +### `textStyle` + +Extra styling for icon component (optional) + +| Type | Default | +| :-----------------: | :------------: | +| Text style (object) | Internal Style | + +--- + +### `value` + +Text value to be displayed by badge, defaults to empty + +| Type | Default | +| :----------------------------------------: | :-----: | +| String OR Number OR React Native Component | none | + +--- + +### `Component` + +Custom component to replace the badge outer component + +| Type | Default | +| :--------------------: | :----------------------------------------: | +| React Native Component | View, if `onPress` then `TouchableOpacity` | + +--- + +## Props for withBadge + +- [`value`](#value) +- [`options`](#options) + +--- + +## Reference for withBadge + +### `value` + +Text value to be displayed by badge, defaults to empty + +| Type | Default | +| :-------------------------------------------------------------------------------------: | :-----: | +| String OR Number OR React Native Component OR Function, which returns one of the former | none | + +--- + +### `options` + +> Also receives all +> [Badge](https://facebook.github.io/react-native/docs/badge#props) props. + +Object with the following (optional) keys: + +#### `bottom` + +| Type | Default | +| :---------------: | :-------: | +| number (optional) | undefined | + +#### `left` + +| Type | Default | +| :---------------: | :-------: | +| number (optional) | undefined | + +#### `right` + +| Type | Default | +| :---------------: | :------------------------------------------: | +| number (optional) | -16 (-3 with MiniBadge aka. without `value`) | + +#### `top` + +| Type | Default | +| :---------------: | :-------------------: | +| number (optional) | -1 (3 with MiniBadge) | + +#### `hidden` + +| Type | Default | +| :----------------: | :-----: | +| boolean (optional) | false | + +#### `containerStyle` + +| Type | Default | +| :-----------------: | :------------: | +| View style (object) | Internal Style | + +--- diff --git a/website/versioned_docs/version-1.2.0/card.md b/website/versioned_docs/version-1.2.0/card.md new file mode 100644 index 0000000000..bf5ebd52c2 --- /dev/null +++ b/website/versioned_docs/version-1.2.0/card.md @@ -0,0 +1,235 @@ +--- +id: version-1.2.0-card +title: Card +original_id: card +--- + +Cards are a great way to display information, usually containing content and +actions about a single subject. Cards can contain images, buttons, text and +more. + +![Card Component](/react-native-elements/img/card.png) + +## Usage + +```js +const users = [ + { + name: 'brynn', + avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg' + }, + ... // more users here +] + +import { View, Text, Image } from 'react-native' +import { Card, ListItem, Button, Icon } from 'react-native-elements' + +// implemented without image with header + + { + users.map((u, i) => { + return ( + + + {u.name} + + ); + }) + } + + +// implemented without image without header, using ListItem component + + { + users.map((u, i) => { + return ( + + ); + }) + } + + + +// implemented with Text and Button as children + + + The idea with React Native Elements is more about component structure than actual design. + +