Сегодня я нашел на 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, Icons в раздел «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, angular, initial и material 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="#"><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>
на данный момент это все, и если вам еще что-то нужно сделать или вы хотите внести свой вклад в этот пост, вы можете оставить комментарий ниже. Спасибо.