"If you can slide, then there are chances you are a panel."
C. Quin, 2013
| isOpen | boolean |
<script>
import Paneler from "./Paneler.svelte";
import PanelSlide from "./PanelSlide.svelte";
import Panel from "./Panel.svelte";
import PanelGrid from "./PanelGrid.svelte";
</script>
<Paneler style="width:450px;height:450px;overflow:hidden;">
<PanelSlide
class="overflow-x-hidden overflow-y-auto"
open={true}>
<Panel data={{ some: "data" }} title="Some Items">
<PanelGrid data={[...Array(9)]} let:data>
<div class="pad border radius-tiny">Some</div>
<div slot="zoomSlot" class="pad-4 text-center">
Some large
</div>
</PanelGrid>
</Panel>
<Panel title="Recent Items">
<PanelGrid data={[...Array(12)]} columns={6}>
<div class="pad border radius-tiny">Recent</div>
</PanelGrid>
</Panel>
<Panel title="Other Items">
<PanelGrid data={[...Array(7)]} columns={2}>
<div class="pad border radius-tiny">Others</div>
</PanelGrid>
</Panel>
</PanelSlide>
<PanelSlide
class="overflow-x-hidden overflow-y-auto"
let:panelSlideId
open={false}
let:data>
<Panel title="Zoom area">
<PanelGrid data={[...Array(130)]} columns={1}>
<div class="pad border radius-tiny">
list item for {panelSlideId}
</div>
</PanelGrid>
</Panel>
</PanelSlide>
</Paneler>
__propDef: {
props: {
title?: string | undefined;
/** panelId will be bound to the targeted panelSlide */ panelId?: string | undefined;
/** data will be bound to the targeted panelSlide */ data?: any | undefined;
/** data will be bound to the targeted panelSlide */ showNavigation?: boolean | undefined;
actions?: {
load: (args: any) => void;
} | undefined;
};
events: {
[evt: string]: CustomEvent<any>;
};
slots: {
panelButtonPrevious: {};
panelButtonNext: {};
default: {
panelId: string;
actions: {
load: (args: any) => void;
};
};
};
};