Направете Gmail като текстови аватари за профилни снимки, ако не съществуват

Днес намерих библиотека с отворен код в GitHub, която е initial.js, изградена от judesfernando. основно initial.js прави SVG изображение с първото по-късно от името, ако снимката на потребителския профил не е настроена, както прави Gmail. това е наистина страхотният принос на judesfernando към общността с отворен код. И така, днес ще ви покажа как можем да настроим тази библиотека с основен пример за клонинг на Gmail.

Ще използваме основна CSS рамка, за да проектираме приложение за клонинг на Gmail, което е Material Design Lite и Angular за обвързване на JSON данни с ng-repeat.

направете папка на проекта и създайте index.html

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Gmail Text Avatar</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

Включете Material Design Lite CSS, файлове с икони в секцията ‹head›.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

Включете jquery, ъглов, начален и материален JavaScript файл в дъното, преди да затворите тялото ‹/body›

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="http://judelicio.us/initial.js/js/initial.min.js"></script>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.profile').initial(); 
  }) 
</script>

направете файл js/script.js

angular.module('gmailClone',[])
.controller('mainController', ['$scope', function($scope){
	
	$scope.data = [
    {
      "first": "Bryan",
      "last": "Cranston",
      "profile_pic": "http://i.imgur.com/Qi5YNlx.png",
      "message": "Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle."
    },
    {
      "first": "Aaron",
      "last": "Paul",
      "profile_pic": null,
      "message": "Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the 'Need For Speed' Movie."
    },
    {
      "first": "Bob",
      "last": "Odenkirk",
      "profile_pic": null,
      "message": "Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle."
    },
    {
      "first": "Dominic",
      "last": "Purcell",
      "profile_pic": "http://i.imgur.com/pEkD9VK.png",
      "message": "Born in England but raised in Australia by his Norwegian father and Irish mother, Purcell was a bored landscaper who decided to attend a drama school."
    },
    {
      "first": "Wentworth",
      "last": "Miller",
      "profile_pic": null,
      "message": "Wentworth Miller is a compelling and critically acclaimed actor whose credits span both television and feature film."
    },
    {
      "first": "Sarah",
      "last": "Wayne",
      "profile_pic": null,
      "message": "Sarah Wayne Callies was born in La Grange, Illinois, and was raised in Honolulu, Hawaii, the daughter of Valerie Wayne."
    }
  ]
}])

най-накрая обвържете целия кодов фрагмент index.html тук е завършен index.html файл.

<!DOCTYPE html>
<html>
<head>
	<title>Gmail Text Avatar</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body ng-app="gmailClone" ng-controller="mainController">
	<div class="mdl-grid">
		<div class="mdl-cell mdl-cell--4-col">
			<ul class="demo-list-three mdl-list">
				<li class="mdl-list__item mdl-list__item--three-line" ng-repeat="x in data">
					<span class="mdl-list__item-primary-content">
						<i class="material-icons mdl-list__item-icon" style="height: 60px">
							<img data-name="{{x.first}}"  ng-if="x.profile_pic == null" class="profile" style="width: 45px;border-radius: 50%" /> 
							<img src="{{x.profile_pic}}"  ng-if="x.profile_pic != null" style="width: 45px;border-radius: 50%" /> 
						</i>
						<span>{{x.first}} {{x.last}}</span>
						<p class="mdl-list__item-text-body">
							{{x.message}}
						</p>
					</span>
					<span class="mdl-list__item-secondary-content">
						<a class="mdl-list__item-secondary-action" href="/bg#"><i class="material-icons">star</i></a>
					</span>
				</li>
			</ul>
		</div>
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<script src="http://judelicio.us/initial.js/js/initial.min.js"></script>
	<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
	<script src="js/script.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		  $('.profile').initial(); 
		}) 
	</script>
</body>
</html>

това е всичко за сега и ако има какво да направите или искате да допринесете в тази публикация, можете да коментирате по-долу. Благодаря.

Направете Gmail като текстови аватари за профилни снимки, ако не съществуват

Подобни въпроси