You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.7 KiB
56 lines
1.7 KiB
<script>
|
|
import IconImage from "$/client/components/IconImage.svelte";
|
|
|
|
let index = 0;
|
|
|
|
let grayscale=0;
|
|
|
|
const icon_patterns = [
|
|
{name: "archive", pattern: "dots-sm", hue: "green", background_hue: "orange"},
|
|
{name: "dollar-sign", pattern: "grid-sm", hue: "orange", background_hue: "blue"},
|
|
{name: "arrow-up-circle", pattern: "vertical-lines-md", hue: "purple", background_hue: "black"},
|
|
{name: "camera", pattern: "triangles-lg", hue: "pink", background_hue: "green"},
|
|
];
|
|
|
|
let props = icon_patterns[index];
|
|
|
|
const change = () => {
|
|
index += 1;
|
|
props = icon_patterns[index % icon_patterns.length];
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
card {
|
|
max-width: 600px;
|
|
}
|
|
</style>
|
|
|
|
<card>
|
|
<top>
|
|
<!-- this is how you assign a set of properties to a component using the {...} syntax -->
|
|
<IconImage {...props } grayscale={ grayscale } />
|
|
</top>
|
|
<middle>
|
|
<h4>IconImage Component</h4>
|
|
<p>The IconImage is kind of a fancy <b>PlaceHolder</b> that embeds an <b>Icon</b> in a pattern field with color. It's good enough to use for quite a while until you can design a better asset. The patterns come from <a href="https://bansal.io/pattern-css" target="_">pattern.css</a>.
|
|
</p>
|
|
|
|
<code><IconImage name="{ props.name }" pattern="{ props.pattern }" hue="{ props.hue }" background_hue="{ props.background_hue }" grayscale="{ grayscale }" /></code>
|
|
|
|
<br>
|
|
</middle>
|
|
|
|
<bottom>
|
|
<button-group>
|
|
<button on:click={ change }>Change It!</button>
|
|
<button on:click={ () => grayscale = grayscale == 0 ? 1 : 0 }>
|
|
{#if grayscale}
|
|
Color It!
|
|
{:else}
|
|
Gray It!
|
|
{/if}
|
|
</button>
|
|
</button-group>
|
|
</bottom>
|
|
</card>
|
|
|