Image Type

Avatar with images.

Usecase Examples

The following example demonstrates the Avatar of type image in action.

Color

Preview

Code

import React from 'react';

import Avatar from '@flexnative/avatar';
import { LOGO } from '../../../../../constants';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar source={LOGO} color='primary'/>
        <Avatar source={LOGO} color='secondary'/>
        <Avatar source={LOGO} color='success'/>
        <Avatar source={LOGO} color='info'/>
        <Avatar source={LOGO} color='warning' />
        <Avatar source={LOGO} color='error'/>
        <Avatar source={LOGO} color='default'/>
        <Avatar source={LOGO} color='dark'/>
        <Avatar source={LOGO} color='light'/>

        <Avatar source={LOGO} color='crimson'/>
        <Avatar source={LOGO} color='#ed143d'/>
        <Avatar source={LOGO} color='rgb(237, 20, 61)'/>
        <Avatar source={LOGO} color='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

BackgroundColor

Preview

Code

import React from 'react';

import Avatar from '@flexnative/avatar';
import { LOGO } from '../../../../../constants';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar source={LOGO} backgroundColor='crimson'/>
        <Avatar source={LOGO} backgroundColor='#ed143d'/>
        <Avatar source={LOGO} backgroundColor='rgb(237, 20, 61)'/>
        <Avatar source={LOGO} backgroundColor='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

BorderColor

Preview

Code

import React from 'react';

import Avatar from '@flexnative/avatar';
import { LOGO } from '../../../../../constants';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar source={LOGO} color='primary' borderWidth='thin' fillMode='ghost' borderColor='crimson'/>
        <Avatar source={LOGO} color='primary' borderWidth='thin' fillMode='ghost' borderColor='#ed143d'/>
        <Avatar source={LOGO} color='primary' borderWidth='thin' fillMode='ghost' borderColor='rgb(237, 20, 61)'/>
        <Avatar source={LOGO} color='primary' borderWidth='thin' fillMode='ghost' borderColor='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

BorderWidth

Preview

Code

import React from 'react';

import Avatar from '@flexnative/avatar';
import { LOGO } from '../../../../../constants';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar source={LOGO} color='primary' fillMode='none' borderWidth='none'/>
        <Avatar source={LOGO} color='primary' fillMode='none' borderWidth='hairline'/>
        <Avatar source={LOGO} color='primary' fillMode='none' borderWidth='thin'/>
        <Avatar source={LOGO} color='primary' fillMode='none' borderWidth='base'/>
        <Avatar source={LOGO} color='primary' fillMode='none' borderWidth='thick'/>
        <Avatar source={LOGO} color='primary' fillMode='none' borderWidth={2}/>
      </div>
    );
  }
}

FillMode

Preview

Code

import React from 'react';

import Avatar from '@flexnative/avatar';
import { LOGO } from '../../../../../constants';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar source={LOGO} color='primary' fillMode='solid' />
        <Avatar source={LOGO} color='primary' fillMode='none' />
        <Avatar source={LOGO} color='primary' fillMode='ghost' />
      </div>
    );
  }
}

Radius

Preview

Code

import React from 'react';

import Avatar from '@flexnative/avatar';
import { LOGO } from '../../../../../constants';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Avatar source={LOGO} radius='none' />
        <Avatar source={LOGO} radius='small' />
        <Avatar source={LOGO} radius='medium' />
        <Avatar source={LOGO} radius='large' />
        <Avatar source={LOGO} radius='full' />
        <Avatar source={LOGO} radius={15} />
      </div>
    );
  }
}

Size

Preview

Code

import React from 'react';

import Avatar from '@flexnative/avatar';
import { LOGO } from '../../../../../constants';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block align-center'>
        <Avatar source={LOGO} size='small' />
        <Avatar source={LOGO} size='medium' />
        <Avatar source={LOGO} size='large' />
        <Avatar source={LOGO} size={120} />
      </div>
    );
  }
}

Playground

Live Editor

// Play with props to see live changes;
// LOGO = '/flexnative/img/logo.svg'

render(<Avatar source={LOGO} size={120} color='primary' borderWidth='thin' fillMode='ghost' borderColor='crimson'/>);

Result

Loading...