90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
|
import { html, type TemplateResult } from '@design.estate/dees-element';
|
||
|
|
import './dees-mobile-iconbutton.js';
|
||
|
|
import '../dees-mobile-icon/dees-mobile-icon.js';
|
||
|
|
|
||
|
|
export const demoFunc = (): TemplateResult => {
|
||
|
|
return html`
|
||
|
|
<style>
|
||
|
|
.demo-container {
|
||
|
|
padding: 2rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-section {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-label {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
font-weight: 600;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
color: #71717a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="demo-container">
|
||
|
|
<div class="demo-section">
|
||
|
|
<div class="demo-label">Sizes</div>
|
||
|
|
<div class="demo-row">
|
||
|
|
<dees-mobile-iconbutton size="sm" label="Small">
|
||
|
|
<dees-mobile-icon icon="settings" size="16"></dees-mobile-icon>
|
||
|
|
</dees-mobile-iconbutton>
|
||
|
|
|
||
|
|
<dees-mobile-iconbutton size="md" label="Medium">
|
||
|
|
<dees-mobile-icon icon="settings" size="20"></dees-mobile-icon>
|
||
|
|
</dees-mobile-iconbutton>
|
||
|
|
|
||
|
|
<dees-mobile-iconbutton size="lg" label="Large">
|
||
|
|
<dees-mobile-icon icon="settings" size="24"></dees-mobile-icon>
|
||
|
|
</dees-mobile-iconbutton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<div class="demo-label">Common Actions</div>
|
||
|
|
<div class="demo-row">
|
||
|
|
<dees-mobile-iconbutton label="Edit">
|
||
|
|
<dees-mobile-icon icon="pencil" size="20"></dees-mobile-icon>
|
||
|
|
</dees-mobile-iconbutton>
|
||
|
|
|
||
|
|
<dees-mobile-iconbutton label="Delete">
|
||
|
|
<dees-mobile-icon icon="trash-2" size="20"></dees-mobile-icon>
|
||
|
|
</dees-mobile-iconbutton>
|
||
|
|
|
||
|
|
<dees-mobile-iconbutton label="Share">
|
||
|
|
<dees-mobile-icon icon="share" size="20"></dees-mobile-icon>
|
||
|
|
</dees-mobile-iconbutton>
|
||
|
|
|
||
|
|
<dees-mobile-iconbutton label="More">
|
||
|
|
<dees-mobile-icon icon="more-vertical" size="20"></dees-mobile-icon>
|
||
|
|
</dees-mobile-iconbutton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<div class="demo-label">States</div>
|
||
|
|
<div class="demo-row">
|
||
|
|
<dees-mobile-iconbutton label="Normal">
|
||
|
|
<dees-mobile-icon icon="check" size="20"></dees-mobile-icon>
|
||
|
|
</dees-mobile-iconbutton>
|
||
|
|
|
||
|
|
<dees-mobile-iconbutton label="Disabled" disabled>
|
||
|
|
<dees-mobile-icon icon="check" size="20"></dees-mobile-icon>
|
||
|
|
</dees-mobile-iconbutton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
};
|