### File

`projects/app-base-library/src/lib/assets/sketch/index/splash/splash.component.ts`

### Metadata

selector | `sk-splash`

template

    <style amp-custom>
    /* Sketch Template boiler plate CSS */
    .sk-template {
    	max-width: 100%;
    	overflow: hidden;
    }
    .sk-ab {
    	background-color: none;
    	margin: 0 auto;
    	transform: scale(1);
    	transform-origin: 0 0;
    	position: relative;
    	overflow: hidden;
    }
    .sk-asset {
    	position: absolute;
    	background-repeat: no-repeat;
    }
    .sk-router-menu, .sk-template header  {
    	text-align: center;
    }
    .sk-router-menu, ul {
    	padding-left: 0;
    	list-style: none;
    }
    /* Sketch Template css specific to splash */
    /* splash-start */
    .sk-ab.sk-ab-splash {
    	width: 375px;
    	height: 375px;
    }

    .sk-ab-splash .sk-asset.sk-section-contact {
    	width: 345px;
    	height: 649px;
    	left: 15px;
    	top: 1634px;
    }

    .sk-ab-splash .sk-asset.sk-section-1 {
    	width: 345px;
    	height: 335px;
    	left: 15px;
    	top: 20px;
    }

    /* splash-end */
    </style>

    <div data-sk-paths='{"splash":{}}' class='sk-template sk-template-svg zoomed'>
    	<div class='sk-ab sk-ab-splash'>
    			<div class='sk-asset sk-section-contact'>
    <svg width="345px" height="649px" viewBox="0 0 345 649" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
        <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
        <title>section-contact</title>
        <desc>Created with Sketch.</desc>
        <defs></defs>
        <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"></g>
    </svg></div>
    			<div class='sk-asset sk-section-1'>
    <svg width="345px" height="335px" viewBox="0 0 345 335" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0" class="sk-tspan-0" class="sk-tspan-0" class="sk-tspan-0" class="sk-tspan-0">
        <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
        <title>section-1</title>
        <desc>Created with Sketch.</desc>
        <defs></defs>
        <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="splash" transform="translate(-15.000000, -20.000000)">
                <g id="section-1" transform="translate(15.000000, 20.000000)">
                    <rect id="Rectangle" fill="#000000" opacity="0.498188406" x="0" y="0" width="345" height="335" rx="38"></rect>
                    <text id="bs" font-family="OpenSans-Bold, Open Sans" font-size="24" font-weight="bold" fill="#FFFFFF">
                        <tspan x="76.7832031" y="155" class="sk-tspan-16">app base library</tspan>
                    </text>
                    <text id="isomorphic-angular" font-family="OpenSans, Open Sans" font-size="14" font-weight="normal" fill="#FFFFFF">
                        <tspan x="110.216309" y="263" class="sk-tspan-18">isomorphic angular</tspan>
                        <tspan x="173.5" y="282"></tspan>
                        <tspan x="173.5" y="301"></tspan>
                        <tspan x="173.5" y="320"></tspan>
                        <tspan x="173.5" y="339"></tspan>
                    </text>
                    <image id="Bitmap" x="157" y="190" width="32" height="32" xlink:href="data:image/png;base64, =="></image>
                    <g id="icon-juggler" transform="translate(131.000000, 27.000000)" fill-rule="nonzero">
                        <path d="M41.415,24.7336389 C48.341,24.7336389 53.954,19.196625 53.954,12.3678056 C53.954,5.53701389 48.341,0 41.415,0 C34.488,0 28.874,5.53701389 28.874,12.3678056 C28.875,19.196625 34.488,24.7336389 41.415,24.7336389 L41.415,24.7336389 Z" id="Shape" fill="#EAEAEA"></path>
                        <ellipse id="Oval" fill="#CC0000" cx="5.439" cy="12.3678056" rx="5.439" ry="5.36345833"></ellipse>
                        <ellipse id="Oval" fill="#CC0000" cx="77.389" cy="12.3678056" rx="5.438" ry="5.36247222"></ellipse>
                        <ellipse id="Oval" fill="#CC0000" cx="41.389" cy="47.8678056" rx="5.438" ry="5.36247222"></ellipse>
                        <path d="M81.234,49.0688889 C79.109,46.975375 75.666,46.975375 73.541,49.0688889 L70.747,51.8270417 L70.747,43.7389583 C70.747,35.5246528 64.278,27.4789722 54.528,27.4789722 L41.414,27.468125 L28.299,27.4789722 C18.549,27.4789722 12.081,35.5246528 12.081,43.7389583 L12.081,51.8260556 L9.286,49.0679028 C7.162,46.9743889 3.718,46.9743889 1.594,49.0679028 C-0.53,51.1614167 -0.53,54.5585694 1.594,56.6520833 L15.267,70.1371528 L22.959,62.551 L22.959,46.7613889 L25.491,46.7613889 L25.491,70.1371528 L57.337,70.1371528 L57.337,46.7613889 L59.869,46.7613889 L59.869,62.551 L67.561,70.1371528 L81.235,56.6530694 C83.359,54.5595556 83.359,51.1624028 81.234,49.0688889 Z M41.513,52.8604861 C38.509,52.8604861 36.074,50.4612778 36.074,47.4980139 C36.074,44.5337639 38.509,42.1355417 41.513,42.1355417 C44.515,42.1355417 46.953,44.53475 46.953,47.4980139 C46.953,50.4622639 44.516,52.8604861 41.513,52.8604861 Z" id="Shape" fill="#EAEAEA"></path>
                    </g>
                </g>
            </g>
        </g>
    </svg></div>
    </div>

### Index

###### Properties

- Public artboard
- Public data

###### Methods

- ngOnInit

### Constructor

`constructor()`
Defined in projects/app-base-library/src/lib/assets/sketch/index/splash/splash.component.ts:101

### Methods

ngOnInit
`ngOnInit()`
Defined in projects/app-base-library/src/lib/assets/sketch/index/splash/splash.component.ts:103
Returns : `void`

### Properties

Public artboard
`artboard: `any``
Type : `any`
Defined in projects/app-base-library/src/lib/assets/sketch/index/splash/splash.component.ts:100

Public data
`data: `any``
Type : `any`
Defined in projects/app-base-library/src/lib/assets/sketch/index/splash/splash.component.ts:101

    import { Component, ElementRef } from '@angular/core';
    	@Component({
    		selector: 'sk-splash',
    		template: `<style amp-custom>

    /* Sketch Template boiler plate CSS */
    .sk-template {
    	max-width: 100%;
    	overflow: hidden;
    }
    .sk-ab {
    	background-color: none;
    	margin: 0 auto;
    	transform: scale(1);
    	transform-origin: 0 0;
    	position: relative;
    	overflow: hidden;
    }
    .sk-asset {
    	position: absolute;
    	background-repeat: no-repeat;
    }
    .sk-router-menu, .sk-template header  {
    	text-align: center;
    }
    .sk-router-menu, ul {
    	padding-left: 0;
    	list-style: none;
    }
    /* Sketch Template css specific to splash */
    /* splash-start */
    .sk-ab.sk-ab-splash {
    	width: 375px;
    	height: 375px;
    }

    .sk-ab-splash .sk-asset.sk-section-contact {
    	width: 345px;
    	height: 649px;
    	left: 15px;
    	top: 1634px;
    }

    .sk-ab-splash .sk-asset.sk-section-1 {
    	width: 345px;
    	height: 335px;
    	left: 15px;
    	top: 20px;
    }

    /* splash-end */
    </style>

    <div data-sk-paths='{"splash":{}}' class='sk-template sk-template-svg zoomed'>
    	<div class='sk-ab sk-ab-splash'>
    			<div class='sk-asset sk-section-contact'>
    <svg width="345px" height="649px" viewBox="0 0 345 649" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
        <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
        <title>section-contact</title>
        <desc>Created with Sketch.</desc>
        <defs></defs>
        <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"></g>
    </svg></div>
    			<div class='sk-asset sk-section-1'>
    <svg width="345px" height="335px" viewBox="0 0 345 335" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0" class="sk-tspan-0" class="sk-tspan-0" class="sk-tspan-0" class="sk-tspan-0">
        <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
        <title>section-1</title>
        <desc>Created with Sketch.</desc>
        <defs></defs>
        <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="splash" transform="translate(-15.000000, -20.000000)">
                <g id="section-1" transform="translate(15.000000, 20.000000)">
                    <rect id="Rectangle" fill="#000000" opacity="0.498188406" x="0" y="0" width="345" height="335" rx="38"></rect>
                    <text id="bs" font-family="OpenSans-Bold, Open Sans" font-size="24" font-weight="bold" fill="#FFFFFF">
                        <tspan x="76.7832031" y="155" class="sk-tspan-16">app base library</tspan>
                    </text>
                    <text id="isomorphic-angular" font-family="OpenSans, Open Sans" font-size="14" font-weight="normal" fill="#FFFFFF">
                        <tspan x="110.216309" y="263" class="sk-tspan-18">isomorphic angular</tspan>
                        <tspan x="173.5" y="282"></tspan>
                        <tspan x="173.5" y="301"></tspan>
                        <tspan x="173.5" y="320"></tspan>
                        <tspan x="173.5" y="339"></tspan>
                    </text>
                    <image id="Bitmap" x="157" y="190" width="32" height="32" xlink:href="data:image/png;base64, =="></image>
                    <g id="icon-juggler" transform="translate(131.000000, 27.000000)" fill-rule="nonzero">
                        <path d="M41.415,24.7336389 C48.341,24.7336389 53.954,19.196625 53.954,12.3678056 C53.954,5.53701389 48.341,0 41.415,0 C34.488,0 28.874,5.53701389 28.874,12.3678056 C28.875,19.196625 34.488,24.7336389 41.415,24.7336389 L41.415,24.7336389 Z" id="Shape" fill="#EAEAEA"></path>
                        <ellipse id="Oval" fill="#CC0000" cx="5.439" cy="12.3678056" rx="5.439" ry="5.36345833"></ellipse>
                        <ellipse id="Oval" fill="#CC0000" cx="77.389" cy="12.3678056" rx="5.438" ry="5.36247222"></ellipse>
                        <ellipse id="Oval" fill="#CC0000" cx="41.389" cy="47.8678056" rx="5.438" ry="5.36247222"></ellipse>
                        <path d="M81.234,49.0688889 C79.109,46.975375 75.666,46.975375 73.541,49.0688889 L70.747,51.8270417 L70.747,43.7389583 C70.747,35.5246528 64.278,27.4789722 54.528,27.4789722 L41.414,27.468125 L28.299,27.4789722 C18.549,27.4789722 12.081,35.5246528 12.081,43.7389583 L12.081,51.8260556 L9.286,49.0679028 C7.162,46.9743889 3.718,46.9743889 1.594,49.0679028 C-0.53,51.1614167 -0.53,54.5585694 1.594,56.6520833 L15.267,70.1371528 L22.959,62.551 L22.959,46.7613889 L25.491,46.7613889 L25.491,70.1371528 L57.337,70.1371528 L57.337,46.7613889 L59.869,46.7613889 L59.869,62.551 L67.561,70.1371528 L81.235,56.6530694 C83.359,54.5595556 83.359,51.1624028 81.234,49.0688889 Z M41.513,52.8604861 C38.509,52.8604861 36.074,50.4612778 36.074,47.4980139 C36.074,44.5337639 38.509,42.1355417 41.513,42.1355417 C44.515,42.1355417 46.953,44.53475 46.953,47.4980139 C46.953,50.4622639 44.516,52.8604861 41.513,52.8604861 Z" id="Shape" fill="#EAEAEA"></path>
                    </g>
                </g>
            </g>
        </g>
    </svg></div>
    </div>
    `
    	})
    	export class SplashComponent {
    	     public artboard: any;
    	     public data: any;
    	     constructor() { }
    	     ngOnInit() {
    	        document.dispatchEvent(new CustomEvent( "sketch-artboard-init",{detail:{"name":"{}","selector":"sk-splash","className":"Splash","pageName":"{}","options":{"imageFormat":{},"embedSvg":true,"imageScales":[1]},"paths":{"splash":{}},"classes":{"Splash":"Splash","About":"About","DevStack":"DevStack"}}}));
    	     }
    	}

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""