Layout / Avatar / Appearance
material theme

Appearance

The Аvatar allows you to set different styles based on its content.

The available type are:

  • Image —By passing an img element as child element of the Avatar.
  • Initials avatar—By passing span element with given string to be rendered as initials.
  • Icon avatar—By passing icon to the Avatar component.

All of the options can be rendered in a different shape by setting the shape property.

The available shape values are:

  • circle—Renders a circle shape avatar.
  • rounded—Renders an avatar with rounded borders.
  • square(Default)—Renders a square shape avatar.

The following example demonstrates all appearance options in action.

import React from 'react';
import ReactDOM from 'react-dom';
import { Avatar } from '@progress/kendo-react-layout';
import { DropDownList } from '@progress/kendo-react-dropdowns';

const src = 'https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg';
const shapes = ['square', 'circle', 'rounded']
class App extends React.Component {
    state = {
        shape: 'square'
    }
    handleChange = (e) => {
        this.setState({
            shape: e.target.value
        })
    }
    render() {
        return (
            <React.Fragment>
                <p>Change share: </p>
                <DropDownList data={shapes} value={this.state.shape} onChange={this.handleChange}/>
                <hr/>
                <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
                    <Avatar type='image' style={{ width: 50, height: 50 }} shape={this.state.shape}><img src={src} style={{ width: 50, height: 50 }}/></Avatar>
                    <Avatar type='initials' style={{ width: 50, height: 50 }} shape={this.state.shape}><span>JS</span></Avatar>
                    <Avatar type='icon' style={{ width: 50, height: 50 }} shape={this.state.shape}><span className='k-icon k-i-user' /></Avatar>
                </div>
            </React.Fragment>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
In this article
 /