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.
26 lines
1.0 KiB
26 lines
1.0 KiB
2 years ago
|
<script>
|
||
|
|
import Carousel from "$/client/components/Carousel.svelte";
|
||
|
|
import IconImage from "$/client/components/IconImage.svelte";
|
||
|
|
import { log } from "$/client/logging.js";
|
||
|
|
|
||
|
|
export let panels = [
|
||
|
|
{caption: "Anchors Away", active: true, component: IconImage,
|
||
|
|
props: { name: "anchor", hue: "red", background_hue: "green" } },
|
||
|
|
{caption: "Money Money Money", active: false, component: IconImage,
|
||
|
|
props: { name: "dollar-sign", hue: "blue", background_hue: "purple", pattern: "triangles-sm" } },
|
||
|
|
{caption: "We Should Talk", active: false, component: IconImage,
|
||
|
|
props: { name: "message-circle", hue: "green", background_hue: "orange", pattern: "lines-sm" } },
|
||
|
|
];
|
||
|
|
|
||
|
|
let selected = panels[0];
|
||
|
|
|
||
|
|
const tab_select = (event) => {
|
||
|
|
// this is where you can grab selection information
|
||
|
|
log.debug("SELECTED TAB", event.detail);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Carousel panels={ panels } on:select={ tab_select } bind:selected />
|
||
|
|
|
||
|
|
<h3>You're looking at the {selected.caption} panel which has a {selected.props.name} icon.</h3>
|