dees-catalog/ts_web/elements/dees-chips.demo.ts

42 lines
1.1 KiB
TypeScript
Raw Normal View History

2023-10-23 19:23:18 +00:00
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`
2023-10-24 12:18:03 +00:00
<style>
.demoContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background: #222;
}
</style>
<div class="demoContainer">
<dees-chips
selectionMode="none"
.selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' },
]}
></dees-chips>
<dees-chips
selectionMode="single"
2023-10-31 12:44:18 +00:00
chipsAreRemovable
2023-10-24 12:18:03 +00:00
.selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' },
]}
></dees-chips>
<dees-chips
selectionMode="multiple"
.selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' },
]}
></dees-chips>
</div>
2023-10-23 19:23:18 +00:00
`;