layout | title |
---|---|
../../layouts/MainLayout.astro |
Vertical Layout |
import ComponentPreview from "../../components/demo/ComponentPreview.svelte";
Vertical layout places components from top to bottom. By default, its flex children is set to align-items: stretch;
.
<cc-vertical-layout>
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
<cc-vertical-layout spacing="small">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
<br />
<cc-vertical-layout spacing="medium">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
<br />
<!-- default to standard -->
<cc-vertical-layout spacing="standard">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
<br />
<cc-vertical-layout spacing="large">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
<cc-vertical-layout style="--gap: 3rem;">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
<cc-vertical-layout theme="padding" style="border: 1px solid #76B23B;">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
<div style="border: 1px solid #333; border-radius: 8px;">
<cc-vertical-layout theme="margin">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
</div>
<div style="border: 1px solid #333; border-radius: 8px;">
<cc-vertical-layout theme="margin padding" style="border: 1px solid #76B23B;">
<cc-button>Cancel</cc-button>
<cc-button theme="primary">Save</cc-button>
</cc-vertical-layout>
</div>
This is not coming from component, just adding inline style.
<cc-vertical-layout style="align-items: flex-start;">
<cc-button>Cancel</cc-button>
<cc-button>Reset</cc-button>
<cc-button theme="primary" style="flex-grow: 1;">Save</cc-button>
</cc-vertical-layout>
<cc-vertical-layout style="align-items: center;">
<cc-button>Cancel</cc-button>
<cc-button>Reset</cc-button>
<cc-button theme="primary" style="flex-grow: 1;">Save</cc-button>
</cc-vertical-layout>
<cc-vertical-layout style="align-items: flex-end;">
<cc-button>Cancel</cc-button>
<cc-button>Reset</cc-button>
<cc-button theme="primary" style="flex-grow: 1;">Save</cc-button>
</cc-vertical-layout>