6 lines
2.2 KiB
Plaintext
6 lines
2.2 KiB
Plaintext
page commerceTemplate {
|
|
state bag: number = 0
|
|
view {<nav class="example-toolbar"><a href="/templates">← All templates</a><a href="#example-source">View code</a></nav> <main style="max-width:72rem;margin:3rem auto;padding:2rem;display:grid;gap:1.5rem"><h1>Everyday essentials</h1><p>Thoughtfully made tools for your desk.</p><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.25rem"><Card title="Studio notebook" description="Dot grid · recycled paper" footer="$18"><Button label="Add notebook" @click="bag = bag + 1" /></Card><Card title="Desk organizer" description="Solid oak · natural finish" footer="$42"><Button label="Add organizer" @click="bag = bag + 1" /></Card><Card title="Travel tumbler" description="Insulated · 350 ml" footer="$24"><Button label="Add tumbler" @click="bag = bag + 1" /></Card></div><p role="status">Shopping bag: {bag} items</p><Button label="Clear bag" variant="secondary" @click="bag = 0" /></main> <section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page commerceTemplate <span>{</span>
|
|
state bag: number = 0
|
|
view <span>{</span> <main style="max-width:72rem;margin:3rem auto;padding:2rem;display:grid;gap:1.5rem"><h1>Everyday essentials</h1><p>Thoughtfully made tools for your desk.</p><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.25rem"><Card title="Studio notebook" description="Dot grid · recycled paper" footer="$18"><Button label="Add notebook" @click="bag = bag + 1" /></Card><Card title="Desk organizer" description="Solid oak · natural finish" footer="$42"><Button label="Add organizer" @click="bag = bag + 1" /></Card><Card title="Travel tumbler" description="Insulated · 350 ml" footer="$24"><Button label="Add tumbler" @click="bag = bag + 1" /></Card></div><p role="status">Shopping bag: <span>{</span>bag<span>}</span> items</p><Button label="Clear bag" variant="secondary" @click="bag = 0" /></main> <span>}</span>
|
|
<span>}</span></code></pre></section> } } |