Material style text Avatar generator-material Avatar

Vista prévia

Descripción

Material avatar es una librería JavaScript Pure Vanilla para generar avatares de texto de estilo de diseño de materiales de Google con colores de fondo usando HTML5 Canvas y < a href = "https://github.com/hellsan631/material-avatar" target = "_ blank" rel = "noopener" > randomColor. js . ideal para generar distintivos de nombre limpios y agradables de los nombres de usuario.

¿Cómo funciona?

Cargue los material-Avatar. js y randomColor. js necesarios al final del documento.

<script src="randomColor.js"></script>
<script src="material-avatar.js"></script>

Genere un avatar cuadrado básico a partir de texto sin formato envuelto en el contenedor ' Avatar '.

var avatar = new Avatar(document.getElementById('avatar'));

Cambie la forma a ' círculo '.

MaterialAvatar(document.getElementsByClassName('circle'), {shape: 'circle'});

Todas las opciones de configuración predeterminadas.

MaterialAvatar(document.getElementsByClassName('example'), {

// "circle" or "square"
shape: "square",

// A hex string for a background color (i.e. '#f12a27').
 // If not set, one will be chosen at random, or from a default colorPalette (which can be overridden)
backgroundColor: '',

// A hex string for the text color (i.e. '#fff').
 // If not set, an accessable friendly color will be chosen based on the background color (either '#222' or '#fff')
textColor: '',

// An array of color hexes that can will be chosen from randomly as a fallback.
 // Defaults can be found in the material-avatar.js file.
colorPalette: [],

// An overriding size for font. This can either be a number, measured in px, or a function. If its a function, it will be sent two arguments, the height of the canvas, and the initials length, which can be used to return a calculated font size.
fontSize: 14,

// font family
fontFamily: "Arial",

// A string of characters used as the initials for the avatar.
initials: '',

// In addition to being able to use the data-name attribute, or the innerHtml of an element, you can also pass a name in the options, which will be broken down into the initial.
name: ''

});

Configure las opciones de randomColor como esta. Puede encontrar todas las opciones < a href = "https://github.com/davidmerfield/randomColor" target = "_ blank" rel = "noopener" > aquí .

MaterialAvatar(document.getElementsByClassName('color'), {randomColor: {hue: 'orange'}});

Registro de cambios

08/01/2018

• Corrija el renderizado cuando el texto empiece con números