How to use the riot.tag2 function in riot
To help you get started, we’ve selected a few riot examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
cognitom / riot-bootstrap / dist / riot-bootstrap.es6.js View on Github 
// This issue needs more study...
.filter(function (key) {
return !~_this._ownPropKeys.concat(ignoreProps).indexOf(key);
}).forEach(function (key) {
_this[key] = typeof _this.parent[key] != 'function' || _this.parent[key]._inherited ? _this.parent[key] : hook(_this.parent, key);
});
getAllPropertyNames(_this.parent.opts).filter(function (key) {
return !~_this._ownOptsKeys.indexOf(key) && key != 'riotTag';
}).forEach(function (key) {
_this.opts[key] = typeof _this.parent.opts[key] != 'function' || _this.parent.opts[key]._inherited ? _this.parent.opts[key] : hook(_this.parent, key);
});
});
}
};
riot.tag2('time-picker-popup', '<ul> <li> {hh % 2 ? \'·\' : hh + \':00\'} </li> </ul> <ol class="{roundLeft: roundLeft}"> <li>{hh}:{mm}</li> <li>·</li> <li>10</li> <li>·</li> <li>20</li> <li>·</li> <li>30</li> <li>·</li> <li>40</li> <li>·</li> <li>50</li> <li>·</li> </ol>', 'time-picker-popup ul,[riot-tag="time-picker-popup"] ul,[data-is="time-picker-popup"] ul{ position: absolute; z-index: 1000; float: left; padding: 10px 0; margin: 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } time-picker-popup ul > li,[riot-tag="time-picker-popup"] ul > li,[data-is="time-picker-popup"] ul > li{ padding: 0 15px; line-height: 16px; color: #666; position: relative; text-align: center; } time-picker-popup ol,[riot-tag="time-picker-popup"] ol,[data-is="time-picker-popup"] ol{ position: absolute; white-space: nowrap; z-index: 1001; list-style: none; padding: 3px 13px; margin: 0; color: white; text-decoration: none; background-color: #3879d9; cursor: pointer; border-top-right-radius: 4px; border-bottom-right-radius: 4px; box-shadow: 0 3px 6px rgba(0, 0, 0, .175); transition: left .2s; } time-picker-popup ol.roundLeft,[riot-tag="time-picker-popup"] ol.roundLeft,[data-is="time-picker-popup"] ol.roundLeft{ border-top-left-radius: 4px; border-bottom-left-radius: 4px; } time-picker-popup ol > li,[riot-tag="time-picker-popup"] ol > li,[data-is="time-picker-popup"] ol > li{ display: inline-block; margin: 0; padding: 0 2px; min-width: 13px; text-align: center; line-height: 24px; border-radius: 4px; } time-picker-popup ol > li + li,[riot-tag="time-picker-popup"] ol > li + li,[data-is="time-picker-popup"] ol > li + li{ margin-left: -4px; color: rgba(255,255,255,.65) } time-picker-popup ol > li:hover,[riot-tag="time-picker-popup"] ol > li:hover,[data-is="time-picker-popup"] ol > li:hover{ background-color: #528ce1; color: white; }', '', function (opts) {
var _this = this;
var ITEM_HEIGHT = 16;
var popupWidth, popupHeight;
var minutesPositions = [];
this.hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'].map(function (hh) {
return { hh: hh, mm: '00' };
});
this.value = opts.value || '00:00';
this.hh = this.value.split(':')[0];
this.mm = this.value.split(':')[1];
this.top = 0;
this.left = 0;
this.top2 = 0;
this.left2 = 0;var routeContainer = _this2.riotcontainer;
routeContainer.remove && routeContainer.remove();
}
$appRoot = _this2.riotroot;
_this2.opts.baseRoute && riot.route.base(_this2.opts.baseRoute);
_this2.root.getBasePath = function () {
return self.opts.baseRoute || '#';
};
});
});
//# sourceMappingURL=routerlib.js.map
riot.tag2('home', '<h1>home</h1> Prateek', '', '', function(opts) {
});
riot.tag2('msg-component', '<h1>message from {this.opts.from} to {this.opts.to}</h1>', '', '', function(opts) {
});
riot.tag2('user-component', '<h1>user component for {this.opts.user}</h1>', '', '', function(opts) {
});
riot.tag2('tag-404', '<h1>Page not found :(</h1>', '', '', function(opts) {
});
riot.tag2('msg-404', '<h1>Msg not found :(</h1>', '', '', function(opts) {
});
riot.tag2('tag-error', '<h1>check console for error</h1>', '', '', function(opts) {
this.on('mount',function(){riot.tag2('user-component', '<h1>user component for {this.opts.user}</h1>', '', '', function(opts) {
});
riot.tag2('tag-404', '<h1>Page not found :(</h1>', '', '', function(opts) {
});
riot.tag2('msg-404', '<h1>Msg not found :(</h1>', '', '', function(opts) {
});
riot.tag2('tag-error', '<h1>check console for error</h1>', '', '', function(opts) {
this.on('mount',function(){
throw new Error('dummy err');
});
});
riot.tag2('app-route', ' ', '', '', function(opts) {
var self=this;
this.prplFunc = function(){
return new Promise(function(resolve, reject){
resolve('msg-component');
});
}
this.fireRouteChange = function(){
self.trigger('routeChanged');
}
this.fireTagnotfound = function(){
self.trigger('tagNotFound');
}_this.active = opts.hasOwnProperty('active') ? opts.active === '' || opts.active === 'active' || opts.active === true : false;
});
});
var en = { "monthFormat": "%M %Y", "months": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], "weekdays": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] };
var fr = { "monthFormat": "%M %Y", "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], "weekdays": ["L", "Ma", "Me", "J", "V", "S", "D"] };
var ja = { "monthFormat": "%Y年%M月", "months": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], "weekdays": ["日", "月", "火", "水", "木", "金", "土"] };
var zh = { "monthFormat": "%Y年%M月", "months": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], "weekdays": ["一", "二", "三", "四", "五", "六", "日"] };
var i18n = {
en: en,
fr: fr,
ja: ja,
zh: zh
};
riot.tag2('calendar', '<table> <thead> <tr> <th>«</th> <th colspan="5">{title}</th> <th>»</th> </tr> </thead> <tbody> <tr><th>{day}</th></tr> <tr> <td>{daynum}</td> </tr> </tbody> </table>', 'calendar,[riot-tag="calendar"],[data-is="calendar"]{ display: inline-block; vertical-align: top; padding: 3px; text-align: center; } calendar thead th,[riot-tag="calendar"] thead th,[data-is="calendar"] thead th{ font-size: 90%; } calendar tbody th,[riot-tag="calendar"] tbody th,[data-is="calendar"] tbody th{ padding: 6px 0; font-size: 90%; } calendar td,[riot-tag="calendar"] td,[data-is="calendar"] td{ text-align: center; padding: 1px; } calendar btn,[riot-tag="calendar"] btn,[data-is="calendar"] btn{ width: 100%; display: block; } calendar btn button,[riot-tag="calendar"] btn button,[data-is="calendar"] btn button{ color: #333; display: block; width: 100%; border: none; padding: 4px 5px; } calendar btn button:hover,[riot-tag="calendar"] btn button:hover,[data-is="calendar"] btn button:hover,calendar btn button:focus,[riot-tag="calendar"] btn button:focus,[data-is="calendar"] btn button:focus{ color: #000; text-decoration: none; background: #f7f7f7; } calendar btn button:disabled,[riot-tag="calendar"] btn button:disabled,[data-is="calendar"] btn button:disabled{ color: #bbb; } calendar btn button[data-active="yes"],[riot-tag="calendar"] btn button[data-active="yes"],[data-is="calendar"] btn button[data-active="yes"]{ box-shadow: none; background-color: #337ab7; color: white; }', '', function (opts) {
var _this = this;
this.mixin(parentScope).mixin(domEvent).mixin(syncEvent);
var selected = typeof opts.value == 'string' ? opts.value.split(',') : opts.value || [];
var firstDate = selected[0] ? new Date(selected[0]) : new Date(),
getDayOf1st = function getDayOf1st(y, m) {
return new Date(y, m, 1).getDay();
},
getNumOfDays = function getNumOfDays(y, m) {
return new Date(y, m + 1, 0).getDate();
},
getDateString = function getDateString(y, m, d) {
return y + '-' + (m < 9 ? '0' + (m + 1) : m + 1) + '-' + (d < 10 ? '0' + d : d);
},
isSelected = function isSelected(d) {"universal-access": "f29a",
"wheelchair-alt": "f29b",
"question-circle-o": "f29c",
"audio-description": "f29e",
"volume-control-phone": "f2a0",
"assistive-listening-systems": "f2a2",
"american-sign-language-interpreting": "f2a3",
"glide-g": "f2a6",
"sign-language": "f2a7",
"low-vision": "f2a8",
"viadeo-square": "f2aa",
"snapchat-ghost": "f2ac",
"snapchat-square": "f2ad"
};
riot.tag2('fa', '', 'fa,[riot-tag="fa"],[data-is="fa"]{ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); }', '', function (opts) {
this.root.innerHTML = '&#x' + icons[opts.icon] + ';';
});import riot from 'riot';
import route from 'riot-route';
riot.tag2('router', '', '', '', function(opts) {
var this$1 = this;
this.route = route.create();
this.select = function (target) {
[].concat(this$1.tags.route)
.forEach(function (r) { return r.show = (r === target); });
};
this.on('mount', function () {
window.setTimeout(function () { return route.start(true); }, 0);
});
this.on('unmount', function () {
this$1.route.stop();_this.skipSync();
_this.update();
_this.triggerDomEvent('change');
};
this.on('mount', function () {
var radios = _this.tags['radio'] || [];
radios.forEach(function (radio) {
return radio.on('radioClicked', radioSelect);
});
}).on('sync', function () {
_this.value = opts.value;
});
});
riot.tag2('radio', '<button data-size="{opts.size}" data-selected="{selected ? \'yes\' : \'no\'}" type="button"><input type="radio"> </button>', 'radio button,[riot-tag="radio"] button,[data-is="radio"] button{ display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; border-radius: 4px; } radio button:focus,[riot-tag="radio"] button:focus,[data-is="radio"] button:focus{ outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } radio button:hover,[riot-tag="radio"] button:hover,[data-is="radio"] button:hover,radio button:focus,[riot-tag="radio"] button:focus,[data-is="radio"] button:focus{ color: #333; text-decoration: none; } radio button:active,[riot-tag="radio"] button:active,[data-is="radio"] button:active{ background-image: none; outline: 0; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } radio button[disabled],[riot-tag="radio"] button[disabled],[data-is="radio"] button[disabled]{ pointer-events: none; cursor: not-allowed; box-shadow: none; opacity: .65; } radio button,[riot-tag="radio"] button,[data-is="radio"] button{ color: #333; background-color: #fff; border-color: #ccc } radio button:hover,[riot-tag="radio"] button:hover,[data-is="radio"] button:hover,radio button:focus,[riot-tag="radio"] button:focus,[data-is="radio"] button:focus,radio button:active,[riot-tag="radio"] button:active,[data-is="radio"] button:active,radio button[data-selected="yes"],[riot-tag="radio"] button[data-selected="yes"],[data-is="radio"] button[data-selected="yes"]{ color: #333; background-color: #e6e6e6; border-color: #adadad } radio button[data-size="lg"],[riot-tag="radio"] button[data-size="lg"],[data-is="radio"] button[data-size="lg"]{ padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } radio button[data-size="sm"],[riot-tag="radio"] button[data-size="sm"],[data-is="radio"] button[data-size="sm"]{ padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } radio button[data-size="xs"],[riot-tag="radio"] button[data-size="xs"],[data-is="radio"] button[data-size="xs"]{ padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }', '', function (opts) {
var _this = this;
this.mixin(parentScope);
this.click = function (e) {
e.stopPropagation();
_this.selected = true;
_this.trigger('radioClicked', opts.value || _this.root.innerText);
};
this.on('update', function () {
_this.selected = opts.value == _this.parent.value;
});
});_this.root.addEventListener('dragleave', dehightlight, false);
});
}
function isDroppable() {
return window.File && window.FileReader && window.FileList && window.Blob;
}
});
riot.tag2('menu-divider', '', 'menu-divider,[riot-tag="menu-divider"],[data-is="menu-divider"]{ display: block; height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }', '', function (opts) {});
riot.tag2('menu-header', '', 'menu-header,[riot-tag="menu-header"],[data-is="menu-header"]{ display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #777; white-space: nowrap; }', '', function (opts) {
this.mixin(parentScope);
});
riot.tag2('menu-item', '', 'menu-item { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; cursor: pointer; } menu-item:hover, menu-item:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; }', '', function (opts) {
var _this = this;
this.mixin(parentScope).mixin(domEvent).mixin(syncEvent);
var click = function click(e) {
_this.root.value = opts.value || _this.root.innerText;
_this.triggerDomEvent('menuItemClicked');
};
this.one('mount', function () {
_this.root.addEventListener('touchstart', click, false);
_this.root.addEventListener('click', click, false);
}).one('unmount', function () {
_this.root.removeEventListener('touchstart', click);
_this.root.removeEventListener('click', click);
});this.select = function (target) {
[].concat(this$1.tags.route)
.forEach(function (r) { return r.show = (r === target); });
};
this.on('mount', function () {
window.setTimeout(function () { return route.start(true); }, 0);
});
this.on('unmount', function () {
this$1.route.stop();
});
});
riot.tag2('route', '', '', '', function(opts) {
var this$1 = this;
this.show = false;
var showRoute = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
this$1.one('updated', function () {
flatten(this$1.tags).forEach(function (tag) {
tag.trigger.apply(tag, [ 'route' ].concat( args ));
tag.update();
});
});
this$1.parent.select(this$1);
this$1.parent.update();var click = function click(e) {
_this.root.value = opts.value || _this.root.innerText;
_this.triggerDomEvent('menuItemClicked');
};
this.one('mount', function () {
_this.root.addEventListener('touchstart', click, false);
_this.root.addEventListener('click', click, false);
}).one('unmount', function () {
_this.root.removeEventListener('touchstart', click);
_this.root.removeEventListener('click', click);
});
});
riot.tag2('menu', '', 'menu,[riot-tag="menu"],[data-is="menu"]{ position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } menu[align="right"],[riot-tag="menu"][align="right"],[data-is="menu"][align="right"]{ left: auto; right: 0; }', '', function (opts) {
var _this = this;
this.mixin(parentScope).mixin(domEvent).mixin(syncEvent);
var opened = false;
var menuOpen = function menuOpen(e) {
if (opened) return;
opened = true;
_this.root.style.display = 'block';
setTimeout(function () {
document.addEventListener('touchstart', menuClose, false);
document.addEventListener('click', menuClose, false);
}, 100);
},
menuClose = function menuClose(e) {riot
Simple and elegant component-based UI library
