azir-block
v1.0.1
Published
An advance Block component that should render nicely on any platform. Supports a great level of customization.
Downloads
2
Maintainers
Readme
Azir Framwork : https://azir.io/docs
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.
Installation
to install the latest version of azir-avatar
you only need to run:
npm install azir-avatar --save
or
yarn add azir-avatar
Examples
Basic :
import Avatar from "azir-avatar";
import { BrandIcons } from "azir-icon";
---
//Image
<Avatar
source={ { uri: "https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixid=eyJhcHBfaWQiOjEyMDd9" } } />
//ICON
<Avatar icon={BrandIcons.react} />
//Title
<Avatar title="RN" />
Advance with Styles :
import Avatar from "azir-avatar";
import Icon,{ BrandIcons } from "azir-icon";
---
<Avatar style={ {borderWidth:1,borderColor:"red"} }
icon={BrandIcons.react} shadow size={300}
color="gray" contentColor="error" rounded={false}
contentStyle={ {borderWidth:1, borderRadius:50, padding:5,borderColor:"white" } }
/>
Custom content with Press :
import Avatar from "azir-avatar";
import Button from "azir-button";
import Icon,{ SolidIcons } from "azir-icon";
---
<Button
color="transparent"
onPress={() => {
console.log("hii");
}}>
<Avatar
size={"large"}
style={ { backgroundColor: "#eee",borderWidth:1,borderColor:"#ff9900" } }>
<Icon icon={SolidIcons.baby} color="#ff9900"></Icon>
</Avatar>
</Button>
Props
you can add any extra props based on the avatar content type ( for example if you have image avatar then you can pass image props to the avatar component )
<Avatar resizeMode="cover" />
Reference
source
Avatar Image Source ( in case you want an image avatar )
| Type | Required | Default | | ------------------- | -------- | ------- | | image source object | No | null |
title
Avatar title text ( in case you want text avatar )
| Type | Required | Default | | ------ | -------- | ------- | | string | No | null |
icon
Avatar Icon ( in case you want Azir Icon avatar )
| Type | Required | Default | | -------------------------------------------------- | -------- | ------- | | SolidIcons, RegularIcons, BrandIcons , CustomIcons | No | null |
color
Background Color of the avatar
| Type | Required | Default | | ------------------------------------------ | -------- | ------- | | azir-color | No | theme |
size
set the avatar component Size.
| Type | Required | Default | | -------------------------------------------------- | -------- | ------- | | ("small" , "medium" , "large" , "xlarge" , number) | No | medium |
contentColor
set the avatar Color (for icon & Text)
| Type | Required | Default | | ------------------------------------------ | -------- | ------- | | azir-color | No | white |
rounded
Makes the avatar circular or square
| Type | Required | Default | | ------- | -------- | ------- | | boolean | No | true |
shadow
If true, show shadow effect for this component.
| Type | Required | Default | | ---- | -------- | ------- | | bool | No | false |
contentStyle
override Avatar content Style based on the avatar content ( image, icon, text)
| Type | Required | | ----- | -------- | | style | No |
style
override Avatar Container Style which include ( View Style )
| Type | Required | | ----- | -------- | | style | No |