node-red-dashboard/nodes/ui_tab.html

A set of dashboard nodes for Node-RED

<script type="text/javascript">
    // convert to i18 text
    function c_(x) {
        return RED._("node-red-dashboard/ui_tab:ui_tab."+x);
    }

    RED.nodes.registerType('ui_tab',{
        category: 'config',
        defaults: {
            name: {value: c_("label.home")},
            icon: {value: 'dashboard'},
            order: {value: 0}
        },
        paletteLabel: 'dashboard tab',
        label: function() { return this.name || c_("label.tab"); },
        sort: function(A,B) {
            return A.order - B.order;
        }
    });
</script>

<script type="text/x-red" data-template-name="ui_tab">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui_tab.label.name"></span></label>
        <input type="text" id="node-config-input-name">
    </div>
    <div class="form-row">
        <label for="node-config-input-icon"><i class="fa fa-file-image-o"></i> <span data-i18n="ui_tab.label.icon"></span></label>
        <input type="text" id="node-config-input-icon">
    </div>
    <div class="form-tips" data-i18n="[html]ui_tab.tip"></div>
</script>

<script type="text/x-red" data-help-name="ui_tab">
    <p>Tab configuration for Dashboard</p>
    <p>The <b>Icon</b> field can be either
    <a href="https://design.google.com/icons/" target="_blank">Material Design icons</a> <i>(e.g. 'check', 'close')</i>
    or <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome icons</a> <i>(e.g. 'fa-fire')</i>,
    or <a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css/weather-icons-lite.css" target="_blank">Weather icons</a> <i>(e.g. 'wi-wu-sunny')</i>.</p>
</script>