oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2026-10-08 22:38:34 +08:00
1 parent f572dce2f6
commit e99a9fb274
356 files changed
+28877 -1055
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/g3soft-libs/docs/examples/grid/align.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
// align 控制交叉轴，justify 控制主轴分布
import { G3Col, G3Row, G3Space } from '@g3soft/ui'
</script>
<template>
<G3Space direction="vertical" :size="20" style="display: flex">
<G3Row :gutter="12" align="middle" justify="space-between" style="height: 80px">
<G3Col :span="6"><div class="cell">span 6</div></G3Col>
<G3Col :span="6"><div class="cell tall">span 6（更高）</div></G3Col>
<G3Col :span="6"><div class="cell">span 6</div></G3Col>
</G3Row>
<G3Row :gutter="12" justify="center">
<G3Col :span="6"><div class="cell">居中</div></G3Col>
<G3Col :span="6"><div class="cell">居中</div></G3Col>
</G3Row>
</G3Space>
</template>
<style scoped>
.cell {
padding: 12px 0;
border-radius: 6px;
background: rgba(24, 24, 27, 0.04);
font-size: 13px;
text-align: center;
}
.tall {
padding: 28px 0;
}
</style>
code/g3soft-libs/docs/examples/grid/basic.vue
+25
View File
@@ -0,0 +1,25 @@
<script setup lang="ts">
// 24 栅格：span 表示占几格，一行总和超过 24 会自动换行
import { G3Col, G3Row } from '@g3soft/ui'
</script>
<template>
<G3Row :gutter="12">
<G3Col :span="24"><div class="cell">span 24</div></G3Col>
<G3Col :span="12"><div class="cell">span 12</div></G3Col>
<G3Col :span="12"><div class="cell">span 12</div></G3Col>
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
</G3Row>
</template>
<style scoped>
.cell {
padding: 12px 0;
border-radius: 6px;
background: rgba(24, 24, 27, 0.04);
font-size: 13px;
text-align: center;
}
</style>
code/g3soft-libs/docs/examples/grid/flex.vue
+29
View File
@@ -0,0 +1,29 @@
<script setup lang="ts">
// flex：数字表示 flex-grow，也可传完整 flex 简写；常用于「一侧固定、一侧自适应」
import { G3Col, G3Row, G3Space } from '@g3soft/ui'
</script>
<template>
<G3Space direction="vertical" :size="20" style="display: flex">
<G3Row :gutter="12">
<G3Col :flex="'0 0 200px'"><div class="cell">固定 200px</div></G3Col>
<G3Col :flex="1"><div class="cell">自适应剩余空间</div></G3Col>
</G3Row>
<G3Row :gutter="12">
<G3Col :flex="1"><div class="cell">1 份</div></G3Col>
<G3Col :flex="2"><div class="cell">2 份</div></G3Col>
<G3Col :flex="1"><div class="cell">1 份</div></G3Col>
</G3Row>
</G3Space>
</template>
<style scoped>
.cell {
padding: 12px 0;
border-radius: 6px;
background: rgba(24, 24, 27, 0.04);
font-size: 13px;
text-align: center;
}
</style>
code/g3soft-libs/docs/examples/grid/gutter.vue
+33
View File
@@ -0,0 +1,33 @@
<script setup lang="ts">
// gutter 数字=水平垂直同值；数组=[水平, 垂直]
import { G3Col, G3Row, G3Space } from '@g3soft/ui'
</script>
<template>
<G3Space direction="vertical" :size="20" style="display: flex">
<G3Row :gutter="16">
<G3Col :span="8"><div class="cell">gutter 16</div></G3Col>
<G3Col :span="8"><div class="cell">gutter 16</div></G3Col>
<G3Col :span="8"><div class="cell">gutter 16</div></G3Col>
</G3Row>
<G3Row :gutter="[32, 12]">
<G3Col :span="8"><div class="cell">水平 32</div></G3Col>
<G3Col :span="8"><div class="cell">水平 32</div></G3Col>
<G3Col :span="8"><div class="cell">水平 32</div></G3Col>
<G3Col :span="8"><div class="cell">垂直 12</div></G3Col>
<G3Col :span="8"><div class="cell">垂直 12</div></G3Col>
<G3Col :span="8"><div class="cell">垂直 12</div></G3Col>
</G3Row>
</G3Space>
</template>
<style scoped>
.cell {
padding: 12px 0;
border-radius: 6px;
background: rgba(24, 24, 27, 0.04);
font-size: 13px;
text-align: center;
}
</style>
code/g3soft-libs/docs/examples/grid/no-wrap.vue
+24
View File
@@ -0,0 +1,24 @@
<script setup lang="ts">
// wrap=false：不换行，超出部分会被挤压（配合 flex 使用）
import { G3Col, G3Row } from '@g3soft/ui'
</script>
<template>
<G3Row :gutter="12" :wrap="false">
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
<G3Col :span="8"><div class="cell">超出 24，但不换行</div></G3Col>
</G3Row>
</template>
<style scoped>
.cell {
padding: 12px 0;
border-radius: 6px;
background: rgba(24, 24, 27, 0.04);
font-size: 13px;
text-align: center;
white-space: nowrap;
}
</style>
code/g3soft-libs/docs/examples/grid/offset.vue
+33
View File
@@ -0,0 +1,33 @@
<script setup lang="ts">
// offset 左侧留空格；push / pull 做左右位移（响应式布局里的顺序微调）
import { G3Col, G3Row, G3Space } from '@g3soft/ui'
</script>
<template>
<G3Space direction="vertical" :size="20" style="display: flex">
<G3Row :gutter="12">
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
<G3Col :span="8" :offset="8"><div class="cell">span 8 / offset 8</div></G3Col>
</G3Row>
<G3Row :gutter="12">
<G3Col :span="6" :push="6"><div class="cell">push 6</div></G3Col>
<G3Col :span="6" :pull="6"><div class="cell">pull 6</div></G3Col>
</G3Row>
<G3Row :gutter="12">
<G3Col :span="8" :order="2"><div class="cell">order 2</div></G3Col>
<G3Col :span="8" :order="1"><div class="cell">order 1</div></G3Col>
</G3Row>
</G3Space>
</template>
<style scoped>
.cell {
padding: 12px 0;
border-radius: 6px;
background: rgba(24, 24, 27, 0.04);
font-size: 13px;
text-align: center;
}
</style>