chore(ui): simplify layout component, improve documentation
This commit is contained in:
upsiflu
parent
db3b00dd1f
commit
2602280080
|
|
@ -1,11 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useCssModule } from 'vue'
|
||||
|
||||
const props = defineProps<
|
||||
{ columnWidth?: number, noGap?:true }
|
||||
& { [P in "stack" | "grid" | "flex" | "columns"]?: true }
|
||||
& { [C in "nav" | "aside" | "header" | "footer" | "main"]?:true }>()
|
||||
const classes = useCssModule()
|
||||
const columnWidth = props.columnWidth ?? 320
|
||||
</script>
|
||||
|
||||
|
|
@ -13,12 +10,12 @@ const columnWidth = props.columnWidth ?? 320
|
|||
<component
|
||||
:is="props.nav ? 'nav' : props.aside ? 'aside' : props.header ? 'header' : props.footer ? 'footer' : props.main ? 'main' : 'div'"
|
||||
:class="[
|
||||
classes.layout,
|
||||
noGap || classes.gap,
|
||||
props.grid ? classes.grid
|
||||
: props.flex ? classes.flex
|
||||
: props.columns? classes.columns
|
||||
: classes.stack
|
||||
$style.layout,
|
||||
noGap || $style.gap,
|
||||
props.grid ? $style.grid
|
||||
: props.flex ? $style.flex
|
||||
: props.columns? $style.columns
|
||||
: $style.stack
|
||||
]">
|
||||
<slot />
|
||||
</component>
|
||||
|
|
@ -93,7 +90,6 @@ const columnWidth = props.columnWidth ?? 320
|
|||
&.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
&.flex {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
import Card from '~/components/ui/Card.vue'
|
||||
import Alert from '~/components/ui/Alert.vue'
|
||||
import Layout from '~/components/ui/Layout.vue'
|
||||
|
|
@ -6,7 +8,7 @@ import Spacer from '~/components/ui/layout/Spacer.vue'
|
|||
import Tab from '~/components/ui/Tab.vue'
|
||||
import Tabs from '~/components/ui/Tabs.vue'
|
||||
import Toggle from '~/components/ui/Toggle.vue'
|
||||
import { ref } from 'vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
|
||||
const isGrowing = ref(true)
|
||||
const noGap = ref(true)
|
||||
|
|
@ -154,25 +156,43 @@ Add space between vertically stacked items
|
|||
|
||||
Let items flow like words on a printed newspaper, Great for very long lists of buttons or links.
|
||||
|
||||
<Layout flex>
|
||||
<Layout stack>
|
||||
|
||||
```vue-html
|
||||
<Layout columns>
|
||||
<Card title="A"></Card>
|
||||
<Card title="B"></Card>
|
||||
<Card title="C"></Card>
|
||||
<Card title="D"></Card>
|
||||
<Card title="E"></Card>
|
||||
<Layout columns :column-width="120">
|
||||
<Button icon="bi-star"/>
|
||||
<Button icon="bi-star"/>
|
||||
<Button icon="bi-star"/>
|
||||
|
||||
Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.
|
||||
|
||||
<Card small title="Cards...">...break over columns...</Card>
|
||||
|
||||
<Button icon="bi-star"/>
|
||||
<Button icon="bi-star"/>
|
||||
<Button icon="bi-star"/>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
<div class="preview">
|
||||
<Layout columns>
|
||||
<Card title="A"></Card>
|
||||
<Card title="B"></Card>
|
||||
<Card title="C"></Card>
|
||||
<Card title="D"></Card>
|
||||
<Card title="E"></Card>
|
||||
<Layout columns :column-width="120">
|
||||
<Button icon="bi-star"/>
|
||||
<Button icon="bi-star"/>
|
||||
<Button icon="bi-star"/>
|
||||
|
||||
---
|
||||
|
||||
Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.
|
||||
|
||||
---
|
||||
|
||||
<Card small title="Cards...">...break over columns...</Card>
|
||||
|
||||
---
|
||||
|
||||
<Button icon="bi-star"/>
|
||||
<Button icon="bi-star"/>
|
||||
<Button icon="bi-star"/>
|
||||
</Layout>
|
||||
</div>
|
||||
|
||||
|
|
@ -234,14 +254,12 @@ const isGrowing = ref(true);
|
|||
<template>
|
||||
<Toggle v-model="isGrowing" />
|
||||
|
||||
<div style="height:30em; /* Space to grow into */">
|
||||
<Layout stack>
|
||||
<Alert>A</Alert>
|
||||
<Alert>B</Alert>
|
||||
<Spacer :grow="isGrowing || undefined" />
|
||||
<Alert>C (footer)</Alert>
|
||||
</Layout>
|
||||
</div>
|
||||
<Layout stack style="height:30em;">
|
||||
<Alert>A</Alert>
|
||||
<Alert>B</Alert>
|
||||
<Spacer :grow="isGrowing || undefined" />
|
||||
<Alert>C (footer)</Alert>
|
||||
</Layout>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
@ -250,14 +268,12 @@ const isGrowing = ref(true);
|
|||
|
||||
---
|
||||
|
||||
<div style="height:30em; background:rgba(255,250,20,.3)">
|
||||
<Layout stack>
|
||||
<Alert>A</Alert>
|
||||
<Alert>B</Alert>
|
||||
<Spacer :grow="isGrowing || undefined" />
|
||||
<Alert>C (footer)</Alert>
|
||||
</Layout>
|
||||
</div>
|
||||
<Layout stack style="height:30em; background:rgba(155,200,20,.3)">
|
||||
<Alert>A</Alert>
|
||||
<Alert>B</Alert>
|
||||
<Spacer :grow="isGrowing || undefined" />
|
||||
<Alert>C (footer)</Alert>
|
||||
</Layout>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
|
@ -269,23 +285,17 @@ Note that you can set the minimum space occupied by the `Spacer` with its `size`
|
|||
<Layout flex>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
const isGrowing = ref(true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle v-model="isGrowing" />
|
||||
|
||||
<div style="height:20em; /* Space to grow into */">
|
||||
<Layout>
|
||||
<Alert>A</Alert>
|
||||
<Spacer :size="-32" :grow="isGrowing || undefined" />
|
||||
<Alert>B1</Alert>
|
||||
<Alert>B2</Alert>
|
||||
<Spacer :size="-32" :grow="isGrowing || undefined" />
|
||||
<Alert>C (footer)</Alert>
|
||||
</Layout>
|
||||
</div>
|
||||
<Layout stack style="height:25em;">
|
||||
<Alert>A</Alert>
|
||||
<Spacer :size="-32" :grow="isGrowing || undefined" />
|
||||
<Alert>B1</Alert>
|
||||
<Alert>B2</Alert>
|
||||
<Spacer :size="-32" :grow="isGrowing || undefined" />
|
||||
<Alert>C (footer)</Alert>
|
||||
</Layout>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
@ -294,16 +304,14 @@ const isGrowing = ref(true);
|
|||
|
||||
---
|
||||
|
||||
<div style="height:20em;background:rgba(255,250,20,.3)">
|
||||
<Layout>
|
||||
<Layout stack style="height:25em; background:rgba(155,200,20,.3)">
|
||||
<Alert>A</Alert>
|
||||
<Spacer :size="-32" :grow="isGrowing || undefined" />
|
||||
<Spacer :size="-32" :grow="isGrowing || undefined" />
|
||||
<Alert>B1</Alert>
|
||||
<Alert>B2</Alert>
|
||||
<Spacer :size="-32" :grow="isGrowing || undefined" />
|
||||
<Spacer :size="-32" :grow="isGrowing || undefined" />
|
||||
<Alert>C (footer)</Alert>
|
||||
</Layout>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Reference in New Issue