fonteva-design-guide
Version:
## Dev, Build and Test
77 lines (76 loc) • 2.76 kB
HTML
<template>
<span class="pfm-test_button-group">
<c-pfm-button-group>
<c-pfm-button label="Default"></c-pfm-button>
<c-pfm-button icon="utility:add" label="Add"></c-pfm-button>
<c-pfm-button icon="utility:add" icon-position="right" label="Add"></c-pfm-button>
<c-pfm-button icon="utility:edit" label="Edit"></c-pfm-button>
</c-pfm-button-group>
</span>
<span class="pfm-test_cards">
<c-pfm-card title="Footer">
<div>
<c-pfm-text>
body
</c-pfm-text>
</div>
<span slot="footer">
footer
</span>
</c-pfm-card>
</span>
<span class="pfm-test_toast">
<c-pfm-button-group class="pfm-button-test">
<c-pfm-button disable-loader onclick={toastDefault} icon="utility:play"></c-pfm-button>
<c-pfm-button type="success" disable-loader onclick={toastSuccess} icon="utility:play"></c-pfm-button>
<c-pfm-button type="danger" disable-loader onclick={toastDanger} icon="utility:play"></c-pfm-button>
<c-pfm-button type="outline" disable-loader onclick={toastWarning} icon="utility:play"></c-pfm-button>
</c-pfm-button-group>
</span>
<span class="pfm-test_collapse">
<c-pfm-collapse>
<span slot="header">
...
</span>
</c-pfm-collapse>
<c-pfm-collapse icon-position="left">
<span slot="header">
...
</span>
</c-pfm-collapse>
</span>
<span class="pfm-test_container">
<c-pfm-container>
<c-pfm-row>
<c-pfm-column>
...
</c-pfm-column>
</c-pfm-row>
</c-pfm-container>
<c-pfm-container theme="shade" margin="top:large">
<c-pfm-row>
<c-pfm-column>
...
</c-pfm-column>
</c-pfm-row>
</c-pfm-container>
<c-pfm-container padding="around:large" margin="top:large">
<c-pfm-row>
<c-pfm-column>
...
</c-pfm-column>
</c-pfm-row>
</c-pfm-container>
</span>
<span class="pfm-test_tiles">
<c-pfm-tile padding="around:large">0</c-pfm-tile>
<c-pfm-tile theme="shade">1</c-pfm-tile>
<c-pfm-tile margin="top:large" padding="around:large">2</c-pfm-tile>
<c-pfm-tile>
3
<span slot="footer">
footer
</span>
</c-pfm-tile>
</span>
</template>