-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Jeremy Hamilton
committed
Feb 7, 2021
1 parent
efb74ea
commit ab0526b
Showing
55 changed files
with
1,769 additions
and
1,665 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| --- | ||
| id: avatar | ||
| title: Avatar | ||
| --- | ||
|
|
||
| import Props from './props/avatar.md' | ||
|
|
||
| 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. | ||
|
|
||
| <div class="component-preview component-preview--grid"> | ||
| <figure> | ||
| <img src="/img/avatar/avatar--photo.jpg" alt="Standard Avatar" /> | ||
| <figcaption>Standard</figcaption> | ||
| </figure> | ||
| <figure> | ||
| <img src="/img/avatar/avatar--title.jpg" alt="Avatar with Title" /> | ||
| <figcaption>Title</figcaption> | ||
| </figure> | ||
| <figure> | ||
| <img src="/img/avatar/avatar--icon.jpg" alt="Avatar with Icon" /> | ||
| <figcaption>Icon</figcaption> | ||
| </figure> | ||
| <figure> | ||
| <img src="/img/avatar/avatar--edit.jpg" alt="Standard Avatar with accessory" /> | ||
| <figcaption>Standard with accessory</figcaption> | ||
| </figure> | ||
| </div> | ||
|
|
||
| ## Usage | ||
|
|
||
| ```js | ||
| import { Avatar } from 'react-native-elements'; | ||
|
|
||
| // Standard Avatar | ||
| <Avatar | ||
| rounded | ||
| source={{ | ||
| uri: | ||
| 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg', | ||
| }} | ||
| /> | ||
|
|
||
| // Avatar with Title | ||
| <Avatar rounded title="MD" /> | ||
|
|
||
| // Avatar with Icon | ||
| <Avatar rounded icon={{ name: 'home' }} /> | ||
|
|
||
| // Standard Avatar with accessory | ||
| <Avatar | ||
| source={{ | ||
| uri: | ||
| 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg', | ||
| }} | ||
| > | ||
| <Avatar.Accessory {...accessoryProps} /> | ||
| </Avatar> | ||
| ``` | ||
|
|
||
| #### Avatar with initials | ||
|
|
||
| <img src="/img/avatar_with_initials.png" width="500" /> | ||
|
|
||
| ```js | ||
| import { Avatar } from "react-native-elements"; | ||
|
|
||
| <Avatar | ||
| size="small" | ||
| rounded | ||
| title="MT" | ||
| onPress={() => console.log("Works!")} | ||
| activeOpacity={0.7} | ||
| /> | ||
| <Avatar | ||
| size="medium" | ||
| title="BP" | ||
| onPress={() => console.log("Works!")} | ||
| activeOpacity={0.7} | ||
| /> | ||
| <Avatar | ||
| size="large" | ||
| title="LW" | ||
| onPress={() => console.log("Works!")} | ||
| activeOpacity={0.7} | ||
| /> | ||
| <Avatar | ||
| size="xlarge" | ||
| rounded | ||
| title="CR" | ||
| onPress={() => console.log("Works!")} | ||
| activeOpacity={0.7} | ||
| /> | ||
| ``` | ||
|
|
||
| #### Avatar with icons | ||
|
|
||
| <img src="/img/avatar_with_icons.png" width="500" /> | ||
|
|
||
| ```js | ||
| import { Avatar } from "react-native-elements"; | ||
|
|
||
| <Avatar | ||
| rounded | ||
| icon={{name: 'user', type: 'font-awesome'}} | ||
| onPress={() => console.log("Works!")} | ||
| activeOpacity={0.7} | ||
| containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}} | ||
| /> | ||
| <Avatar | ||
| size="small" | ||
| rounded | ||
| icon={{name: 'user', type: 'font-awesome'}} | ||
| onPress={() => console.log("Works!")} | ||
| activeOpacity={0.7} | ||
| containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}} | ||
| /> | ||
| <Avatar | ||
| size="medium" | ||
| overlayContainerStyle={{backgroundColor: 'blue'}} | ||
| icon={{name: 'meetup', color: 'red', type: 'font-awesome'}} | ||
| onPress={() => console.log("Works!")} | ||
| activeOpacity={0.7} | ||
| containerStyle={{flex: 3, marginTop: 100}} | ||
| /> | ||
| <Avatar | ||
| size="large" | ||
| icon={{name: 'rocket', color: 'orange', type: 'font-awesome'}} | ||
| overlayContainerStyle={{backgroundColor: 'white'}} | ||
| onPress={() => console.log("Works!")} | ||
| activeOpacity={0.7} | ||
| containerStyle={{flex: 4, marginTop: 75}} | ||
| /> | ||
| <Avatar | ||
| size="xlarge" | ||
| rounded | ||
| icon={{name: 'home', type: 'font-awesome'}} | ||
| onPress={() => console.log("Works!")} | ||
| activeOpacity={0.7} | ||
| containerStyle={{flex: 5, marginRight: 60}} | ||
| /> | ||
| <Avatar | ||
| size={200} | ||
| rounded | ||
| icon={{name: 'user', type: 'font-awesome'}} | ||
| onPress={() => console.log("Works!")} | ||
| activeOpacity={0.7} | ||
| containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}} | ||
| /> | ||
| ``` | ||
|
|
||
| #### Avatar with title placeholder | ||
|
|
||
| <img src="/img/avatar_with_title_placeholder.gif" width="500" /> | ||
|
|
||
| ```js | ||
| import { Avatar, ListItem } from 'react-native-elements'; | ||
|
|
||
| <ListItem> | ||
| <Avatar | ||
| title={name[0]} | ||
| source={{ uri: avatar_url }} | ||
| /> | ||
| <ListItem.Content> | ||
| <ListItem.Title>{name}</ListItem.Title> | ||
| <ListItem.SubTitle>{role}</ListItem.Subtitle> | ||
| </ListItem.Content> | ||
| <ListItem.Chevron/> | ||
| />; | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| <Props /> | ||
|
|
||
| --- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| --- | ||
| id: badge | ||
| title: Badge | ||
| --- | ||
|
|
||
| import Props from './props/badge.md' | ||
|
|
||
| Badges are small components typically used to communicate a numerical value or | ||
| indicate the status of an item to the user. | ||
|
|
||
| <div className="component-preview component-preview--grid component-preview--grid-3"> | ||
| <figure> | ||
| <img src="/img/badge/badge--standard.jpg" alt="Standard" /> | ||
| <figcaption>Standard</figcaption> | ||
| </figure> | ||
| <figure> | ||
| <img src="/img/badge/badge--mini.jpg" alt="Mini Badge" /> | ||
| <figcaption>Mini Badge</figcaption> | ||
| </figure> | ||
| <figure> | ||
| <img src="/img/badge/badge--indicator.jpg" alt="Badge as Indicator" /> | ||
| <figcaption>Badge as Indicator</figcaption> | ||
| </figure> | ||
| </div> | ||
|
|
||
| ### 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 | ||
| <Badge value="99+" status="error" /> | ||
| <Badge value={<Text>My Custom Badge</Text>} /> | ||
|
|
||
| // Mini badge | ||
| <Badge status="success" /> | ||
| <Badge status="error" /> | ||
| <Badge status="primary" /> | ||
| <Badge status="warning" /> | ||
|
|
||
| // Avatar with mini badge | ||
| <View> | ||
| <Avatar | ||
| rounded | ||
| source={{ | ||
| uri: 'https://randomuser.me/api/portraits/men/41.jpg', | ||
| }} | ||
| size="large" | ||
| /> | ||
|
|
||
| <Badge | ||
| status="success" | ||
| containerStyle={{ position: 'absolute', top: -4, right: -4 }} | ||
| /> | ||
| </View> | ||
|
|
||
| // withBadge HOC | ||
|
|
||
| const BadgedIcon = withBadge(1)(Icon) | ||
| <BadgedIcon type="ionicon" name="ios-chatbubbles" /> | ||
|
|
||
| // Using the decorator proposal | ||
| @connect(state => ({ | ||
| notifications: state.notifications, | ||
| })) | ||
| @withBadge(props => props.notifications.length) | ||
| export default class MyDecoratedIcon extends React.Component { | ||
| render() { | ||
| return ( | ||
| <Icon type="ionicon" name="md-cart" /> | ||
| ); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| <Props /> | ||
|
|
||
| --- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.