skinny-widgets/dist/antd.templates.html

skinnable web components widgets collection

<template id="SkInputTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<label class="sk-input-label"><slot name="label"></slot><slot></slot></label>
<input class="ant-input" />

</template>
<template id="SkButtonTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<button type="button" class="ant-btn">
    <slot name="label"></slot>
    <slot></slot>
</button>
</template>
<template id="SkAlertTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<style>
    .ant-alert-close-icon {
        border: none;
        background-color: initial;
        right: 5px;
    }
    .ant-alert.ant-alert-no-icon {
        padding: 10px 16px 10px 15px;
    }
</style>
<div data-show="true" class="ant-alert ant-alert-no-icon">
    <span class="ant-alert-message"><slot></slot></span>
    <span class="ant-alert-description"></span>
    <button type="button" class="ant-alert-close-icon" tabindex="0"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></button>
</div>

</template>
<template id="SkCheckboxTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<span class="ant-checkbox-wrapper">
    <span class="ant-checkbox">
        <input type="checkbox" class="ant-checkbox-input" value="" />
        <span class="ant-checkbox-inner"></span>
    </span>
    <label><slot name="label"></slot><slot></slot></label>
</span>
</template>
<template id="SkDatePickerTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">

<span class="ant-calendar-picker">
    <div>
        <label><slot name="label"></slot><slot></slot></label>
        <input class="ant-calendar-picker-input ant-input" value="">

    </div>
</span>

<div class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft">
    <div class="ant-calendar" tabindex="0">
        <div class="ant-calendar-panel">
            <div class="ant-calendar-input-wrap">
                <div class="ant-calendar-date-input-wrap ant-input-affix-wrapper">
                    <input class="ant-calendar-input" placeholder="Select date" />
                    <span class="ant-input-suffix ant-input-clear">x</span>
                </div>
                <a role="button" title="Clear"><span class="ant-calendar-clear-btn"></span></a>
            </div>
            <div tabindex="0" class="ant-calendar-date-panel">
                <div class="ant-calendar-header">
                    <div style="position: relative;">
                        <a class="ant-calendar-prev-year-btn" role="button" title="Last year (Control + left)"></a>
                        <a class="ant-calendar-prev-month-btn" role="button" title="Previous month (PageUp)"></a>
                        <span class="ant-calendar-my-select">
                            <a class="ant-calendar-month-select" role="button" title="Choose a month">Dec</a>
                            <a class="ant-calendar-year-select" role="button" title="Choose a year">2019</a>
                        </span>
                        <a class="ant-calendar-next-month-btn" role="button" title="Next month (PageDown)"></a>
                        <a class="ant-calendar-next-year-btn" role="button" title="Next year (Control + right)"></a>
                    </div>
                </div>
                <div class="ant-calendar-body">
                    <table class="ant-calendar-table" cellspacing="0" role="grid">
                        <thead>
                        </thead>
                        <tbody class="ant-calendar-tbody">
                        </tbody>
                    </table>
                </div>
                <div class="ant-calendar-footer">
                    <span class="ant-calendar-footer-btn">
                        <a class="ant-calendar-today-btn " role="button" title="December 23, 2019">Today</a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<template id="SkDialogTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<div class="ant-modal" role="document">
    <div aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;" tabindex="0"></div>
    <div class="ant-modal-content">
        <button aria-label="Close" class="ant-modal-close" type="button"><span class="ant-modal-close-x">
            <i aria-label="icon: close" class="anticon anticon-close ant-modal-close-icon">
                <svg aria-hidden="true"
                     class="" data-icon="close" fill="currentColor" focusable="false" height="1em" viewBox="64 64 896 896"
                     width="1em">
                <path
                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span>
        </button>
        <div class="ant-modal-header" style="display:none;">
            <div class="ant-modal-title" id="rcDialogTitle0"></div>
        </div>
        <div class="ant-modal-body">
        </div>
        <div class="ant-modal-footer">

        </div>
    </div>
    <div aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;" tabindex="0"></div>
</div>

</template>
<template id="SkDialogFooterTpl">
<div>
    <button class="ant-btn btn-cancel" data-action="cancel" type="button"><span>{{ Cancel }}</span></button>
    <button class="ant-btn btn-confirm ant-btn-primary" data-action="confirm" type="button"><span>{{ Ok }}</span></button>
</div>
</template>
<template id="SkFormTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<form>
    <slot></slot>
    <slot name="fields"></slot>
    <slot name="buttons"></slot>
</form>
</template>
<template id="SkSelectTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<style>
    .ant-select {
        min-width: 16em;
    }
</style>
<label class="sk-input-label"><slot name="label"></slot></label>
<div class="ant-select ant-select-enabled">
    <div class="ant-select-selection" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
        <div class="ant-select-selection__rendered">
            <div unselectable="on" class="ant-select-selection__placeholder" style="display: none; user-select: none;">--</div>
        </div>
        <span class="ant-select-arrow" unselectable="on" style="user-select: none;">
            <i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon">
                <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                    <path
                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                </svg>
            </i>
        </span>
    </div>
</div>
<div style="display: inline-block;">
    <div>
        <div class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft  ant-select-dropdown-hidden">
            <div style="overflow: auto; transform: translateZ(0px);">
                <ul role="listbox" class="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical" tabindex="0">

                </ul>
            </div>
        </div>
    </div>
</div>
<slot></slot>
</template>
<template id="SkSpinnerTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<style>
    .spinner {
        display: block;
        margin: 0 auto 0 auto;
        text-align: center;
    }
</style>
<div class="spinner ant-spin ant-spin-lg ant-spin-spinning">
    <span class="ant-spin-dot ant-spin-dot-spin">
        <i class="ant-spin-dot-item"></i>
        <i class="ant-spin-dot-item"></i>
        <i class="ant-spin-dot-item"></i>
        <i class="ant-spin-dot-item"></i>
    </span>
</div>
</template>
<template id="SkSwitchTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<button type="button" role="switch" aria-checked="false" class="ant-switch">
    <span class="ant-switch-inner"></span>
</button>
<label class="sk-input-label"><slot name="label"></slot><slot></slot></label>
<style>
    button.form-invalid {
        border: 1px red solid;
    }
</style>
</template>
<template id="SkTabsTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<style>
    .ant-tabs-nav-wrap, .ant-tabs-nav {
        max-height: 40px;
    }
</style>
<div class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-line">
    <div class="ant-tabs-bar ant-tabs-top-bar ant-tabs-small-bar" role="tablist" tabindex="0">
        <div class="ant-tabs-nav-container">
            <span class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled" unselectable="unselectable">
                <span class="ant-tabs-tab-prev-icon">
                    <i aria-label="icon: left" class="anticon anticon-left ant-tabs-tab-prev-icon-target">
                        <svg aria-hidden="true" class="" data-icon="left" fill="currentColor" focusable="false" height="1em" viewBox="64 64 896 896" width="1em">
                            <path
                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></span></span><span
                class="ant-tabs-tab-next ant-tabs-tab-btn-disabled" unselectable="unselectable">
                    <span class="ant-tabs-tab-next-icon">
                        <i aria-label="icon: right"
                                                  class="anticon anticon-right ant-tabs-tab-next-icon-target"><svg
                aria-hidden="true" class="" data-icon="right" fill="currentColor" focusable="false" height="1em"
                viewBox="64 64 896 896" width="1em"><path
                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></span>
            <div class="ant-tabs-nav-wrap">
                <div class="ant-tabs-nav-scroll">
                    <div class="ant-tabs-nav ant-tabs-nav-animated">
                        <div>

                        </div>
                        <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
                             style="display: block; transform: translate3d(0px, 0px, 0px); width: 66px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" tabindex="0"></div>
    <div class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content" style="margin-left: 0%;">

    </div>
    <div role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" tabindex="0"></div>
</div>
</template>
<template id="SkTabTpl">

</template>
<template id="SkTreeTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<div class="sk-tree">

</div>
</template>
<template id="SkTreeItemTpl">
{{ name }}
</template>
<template id="SkAccordionTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<style>
    .ant-tabs-nav-wrap, .ant-tabs-nav {
        max-height: 40px;
    }
</style>
<div class="ant-list ant-list-lg ant-list-split ant-list-bordered ant-list-something-after-last-item">
    <div class="ant-spin-nested-loading">
        <div class="ant-spin-container">
            <div class="ant-list-items">
            </div>
        </div>
    </div>
</div>
</template>
<template id="SkNavbarTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">

<div class="sk-navbar-panel">

</div>
<div class="ant-drawer ant-drawer-left" style="" tabindex="-1">
    <div class="ant-drawer-mask" style=""></div>
    <div class="ant-drawer-content-wrapper" style="transform: translateX(-100%);">
        <div class="ant-drawer-content">
            <div class="ant-drawer-wrapper-body">
                <div class="ant-drawer-header">
                    <div class="ant-drawer-title"></div>
                </div>
                <div class="ant-drawer-body">

                </div>
            </div>
        </div>
    </div>
</div>

</template>
<template id="SkMenuTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">

<ul class="ant-menu ant-menu-sub antd-menu-inline ant-menu-root"></ul>

</template>
<template id="SkMenuItemTpl">
<li class="sk-menu-item ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1">
    <span class="ant-menu-title-content">
        {{ contents }}
    </span>
</li>

</template>
<template id="SkToolbarTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">

<div class="sk-toolbar"><slot></slot></div>

</template>
<template id="SkToolbarItemTpl">
<span class="sk-toolbar-item">
    {{ contents }}
</span>

</template>
<template id="SkAppTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<slot></slot>
</template>