35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
import { html } from '@design.estate/dees-element';
|
|
|
|
export const demo = () => html`
|
|
<style>
|
|
.demo-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 600px;
|
|
background: hsl(240 10% 4%);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<div class="demo-container">
|
|
<eco-view-browser
|
|
.bookmarks=${[
|
|
{ id: 'bm-1', title: 'Google', url: 'https://www.google.com', createdAt: new Date() },
|
|
{ id: 'bm-2', title: 'GitHub', url: 'https://github.com', createdAt: new Date() },
|
|
{ id: 'bm-3', title: 'Stack Overflow', url: 'https://stackoverflow.com', createdAt: new Date() },
|
|
{ id: 'bm-4', title: 'MDN Web Docs', url: 'https://developer.mozilla.org', createdAt: new Date() },
|
|
]}
|
|
.showBookmarksBar=${true}
|
|
@navigate=${(e: CustomEvent) => console.log('Navigate:', e.detail)}
|
|
@bookmark-add=${(e: CustomEvent) => console.log('Bookmark add:', e.detail)}
|
|
@bookmark-remove=${(e: CustomEvent) => console.log('Bookmark remove:', e.detail)}
|
|
@browser-back=${() => console.log('Browser back')}
|
|
@browser-forward=${() => console.log('Browser forward')}
|
|
@browser-refresh=${() => console.log('Browser refresh')}
|
|
@browser-stop=${() => console.log('Browser stop')}
|
|
@new-tab=${() => console.log('New tab')}
|
|
@open-devtools=${() => console.log('Open devtools')}
|
|
></eco-view-browser>
|
|
</div>
|
|
`;
|