@dvhb/themes
Version:
Opensource dvhb themes
41 lines (39 loc) • 4.62 kB
HTML
<html><head><title></title><link href="main.css" rel="stylesheet"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/atom-one-dark.min.css"/></head><body><div class="b-intro b-content textLg" style="background-image: url('img/bg_intro_subway.jpg');"><a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a><div class="section"><h1>Схема метрополитена</h1><p>dvhbMetro — директива схемы метро для Angular.js. Позволяет выбирать станции на карте и отображать информацию о них.</p><P>Github: <a href="#">dvhbru/dvhb-metro</a></P><h2>Сделано с помощью</h2><div><a href="#">Angular.js</a></div><div><a href="#">React JS</a></div></div></div><div class="b-content textLg"><div class="section"><h2>Зависимости</h2><p>Angular.js >= 1.2</p><h2>Установка</h2><p class="textGreen">npm i @dvhb/metro --save</p></div></div><div class="b-usage b-content"><div class="section"><h2>Использование</h2><pre><code class="html"><metro
stations="stations"
on-select="showInfo"
map-url="./bower_components/dvhb_metro/lib/metro.svg">
<div metro-info offset="{top: 20}">
<b>{{station.name}}</b>
<i>{{station.info}}</i>
</div>
</metro>
</code></pre><pre><code class="javascript">angular
.module('App', ['dvhbMetro'])
.controller('MainCtrl', function ($scope) {
$scope.stations = {
"Курская (Кольцевая)": "ТЦ «Атриум», 3 эт., с 9:00 до 21:00",
"Фили": "ТЦ «Филёвский», 1 эт., с 10:00 до 21:00",
"Войковская": "ТЦ «Войковский», 2 эт., с 8:00 до 22:00",
"Спартак": "ТЦ «Колизей», 1 эт., с 8:00 до 22:00"
};
$scope.station = {};
$scope.showInfo = function (names, position) {
$scope.station = {
name: names[0],
info: $scope.stations[names[0]]
;
}
})</code>
</pre></div></div><div class="b-demo b-content textLg"><div class="section"><h2>Демо</h2><div class="form-item"><div class="b-tabs"><div class="row b-tabs__btns"><div class="col-sm-6"><div class="form-item"><div class="b-tabs__btn _active">Схема метро Москвы</div></div></div><div class="col-sm-6"><div class="form-item"><div class="b-tabs__btn">Схема метро Санкт-Петербурга</div></div></div></div></div></div></div><div class="section section_wide"><div class="form-group"><img src="http://placehold.it/1000x880"/></div></div><div class="section"><div class="form-group"><div class="row"><div class="col-sm-6"><div class="form-item"><div class="btn btn_block">Скачать</div></div></div><div class="col-sm-6"><div class="form-item"><div class="btn btn_block">Исходник на GitHub</div></div></div></div></div><h2>Документация</h2><p> <a href="#">http://dvhb-hybrid.readthedocs.io/en/latest/?badge=latest</a></p><h2>Лицензия</h2><p>Данная библиотека распространяется по лицензии MIT © <a href="#">dvhb</a></p><p>Дизайн карты метро © Студия Артемия Лебедева</p></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/atom-one-dark.min.css"/><script>hljs.initHighlightingOnLoad();</script><script src="vendor.js"></script><script src="main.js"></script><script>(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'XXX', 'auto');
ga('send', 'pageview');</script></body></html>