layout | title |
---|---|
../../layouts/MainLayout.astro |
Horizontal Layout |
import ComponentPreview from "../../components/demo/ComponentPreview.svelte";
<cc-horizontal-layout>
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
<cc-horizontal-layout spacing="small">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
<br />
<cc-horizontal-layout spacing="medium">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
<br />
<!-- default to standard -->
<cc-horizontal-layout spacing="standard">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
<br />
<cc-horizontal-layout spacing="large">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
<cc-horizontal-layout style="--gap: 3rem;">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
<cc-horizontal-layout>
<cc-button>Cancel</cc-button>
<cc-button>Reset</cc-button>
<cc-button theme="primary" style="flex-grow: 1;">Save</cc-button>
</cc-horizontal-layout>
<cc-horizontal-layout theme="padding" style="border: 1px solid #76B23B;">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
<div style="border: 1px solid #333; border-radius: 8px;">
<cc-horizontal-layout theme="margin">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
</div>
<div style="border: 1px solid #333; border-radius: 8px;">
<cc-horizontal-layout theme="margin padding" style="border: 1px solid #76B23B;">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
</div>