20260720172840
This commit is contained in:
oneao committed
1 parent
cda7f16d3a
commit
94207c77ff
3117 files changed
+201407
-1236
No files matched your search
@@ -0,0 +1,45 @@
|
||||
# _semantic
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { SemanticPreview } from '@/components/semantic'
|
||||
import { useComponentLocale } from '@/composables/use-locale'
|
||||
import { locales } from '../locales'
|
||||
|
||||
const { t } = useComponentLocale(locales)
|
||||
|
||||
const semantics = computed(() => [
|
||||
{ name: 'root', desc: t('root'), version: '1.0.0' },
|
||||
{ name: 'panel', desc: t('panel'), version: '1.0.0' },
|
||||
{ name: 'dragger', desc: t('dragger'), version: '1.0.0' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Splitter"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<a-splitter
|
||||
:style="{ height: '200px', boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }"
|
||||
:classes="classes"
|
||||
>
|
||||
<a-splitter-panel>
|
||||
<div :style="{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }">
|
||||
First
|
||||
</div>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel>
|
||||
<div :style="{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }">
|
||||
Second
|
||||
</div>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,49 @@
|
||||
# Collapsible
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Collapsible panel.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-splitter style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)">
|
||||
<a-splitter-panel collapsible min="20%">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
First
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel collapsible>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Second
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
<a-splitter
|
||||
orientation="vertical"
|
||||
style="height: 300px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
|
||||
>
|
||||
<a-splitter-panel collapsible min="20%">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
First
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel collapsible>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Second
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
# Collapsible Icon
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Control the display of collapsible icon with `showCollapsibleIcon`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const showIconMode = ref<'auto' | boolean>(true)
|
||||
|
||||
const options = [
|
||||
{ label: 'Auto', value: 'auto' },
|
||||
{ label: 'True', value: true },
|
||||
{ label: 'False', value: false },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical :gap="20">
|
||||
<a-flex :gap="5">
|
||||
<p>ShowCollapsibleIcon:</p>
|
||||
<a-radio-group v-model:value="showIconMode" :options="options" />
|
||||
</a-flex>
|
||||
<a-splitter style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)">
|
||||
<a-splitter-panel
|
||||
:collapsible="{ start: true, end: true, showCollapsibleIcon: showIconMode }"
|
||||
min="20%"
|
||||
>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
First
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel
|
||||
:collapsible="{ start: true, end: true, showCollapsibleIcon: showIconMode }"
|
||||
>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Second
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel
|
||||
:collapsible="{ start: true, end: true, showCollapsibleIcon: showIconMode }"
|
||||
>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Third
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,58 @@
|
||||
# Controlled
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Control panel size with `size` and `onResize`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const sizes = ref<(number | string)[]>(['50%', '50%'])
|
||||
const enabled = ref(true)
|
||||
|
||||
function handleResize(newSizes: number[]) {
|
||||
sizes.value = newSizes
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
sizes.value = ['50%', '50%']
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-splitter
|
||||
style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
|
||||
@resize="handleResize"
|
||||
>
|
||||
<a-splitter-panel :size="sizes[0]" :resizable="enabled">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
First
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel :size="sizes[1]">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Second
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
<a-flex gap="middle" justify="space-between">
|
||||
<a-switch
|
||||
v-model:checked="enabled"
|
||||
checked-children="Enabled"
|
||||
un-checked-children="Disabled"
|
||||
/>
|
||||
<a-button @click="handleReset">
|
||||
Reset
|
||||
</a-button>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,42 @@
|
||||
# Layout Group
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Nested Splitter for complex layout.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-splitter style="height: 300px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)">
|
||||
<a-splitter-panel collapsible>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Left
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel>
|
||||
<a-splitter orientation="vertical">
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Top
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Bottom
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,50 @@
|
||||
# Lazy
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Lazy rendering mode, only updates panel size when mouse moves. Suitable for large pages to avoid frequent re-rendering causing lag.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-space vertical style="width: 100%">
|
||||
<a-splitter lazy style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)">
|
||||
<a-splitter-panel default-size="40%" min="20%" max="70%">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
First
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Second
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
<a-splitter
|
||||
lazy
|
||||
orientation="vertical"
|
||||
style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
|
||||
>
|
||||
<a-splitter-panel default-size="40%" min="30%" max="70%">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
First
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Second
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,38 @@
|
||||
# Multiple
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Multiple panels split.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-splitter style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)">
|
||||
<a-splitter-panel collapsible>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Panel 1
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel :collapsible="{ start: true }">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Panel 2
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Panel 3
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,56 @@
|
||||
# Double-clicked reset
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Double-click the dragger to reset the Splitter.Panel to its default size.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const defaultSizes = ['30%', '40%', '30%']
|
||||
const sizes = ref<(number | string)[]>([...defaultSizes])
|
||||
|
||||
function handleResize(newSizes: number[]) {
|
||||
sizes.value = newSizes
|
||||
}
|
||||
|
||||
function handleDoubleClick() {
|
||||
sizes.value = [...defaultSizes]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-splitter
|
||||
style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
|
||||
@resize="handleResize"
|
||||
@dragger-double-click="handleDoubleClick"
|
||||
>
|
||||
<a-splitter-panel :size="sizes[0]">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Panel 1
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
|
||||
<a-splitter-panel :size="sizes[1]">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Panel 2
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
|
||||
<a-splitter-panel :size="sizes[2]">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Panel 3
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,100 @@
|
||||
# Size Mix
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Mix using pixels and percentages to set panel size.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const sizeBucket = ref(1)
|
||||
|
||||
interface SizeBucket {
|
||||
defaultSize?: number | string
|
||||
min: number | string
|
||||
max?: number | string
|
||||
}
|
||||
|
||||
const SIZE_BUCKETS_1: SizeBucket[] = [
|
||||
{
|
||||
defaultSize: 100,
|
||||
min: 100,
|
||||
max: 200,
|
||||
},
|
||||
{
|
||||
min: 100,
|
||||
max: 200,
|
||||
},
|
||||
{
|
||||
min: '20%',
|
||||
},
|
||||
]
|
||||
|
||||
const SIZE_BUCKETS_2: SizeBucket[] = [
|
||||
{
|
||||
min: 300,
|
||||
},
|
||||
{
|
||||
min: 100,
|
||||
max: 200,
|
||||
},
|
||||
{
|
||||
min: 600,
|
||||
},
|
||||
]
|
||||
|
||||
const SIZE_BUCKETS = computed(() => sizeBucket.value === 1 ? SIZE_BUCKETS_1 : SIZE_BUCKETS_2)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-radio-group
|
||||
v-model:value="sizeBucket"
|
||||
style="margin-bottom: 16px"
|
||||
>
|
||||
<a-radio-button :value="1">
|
||||
Size Bucket 1
|
||||
</a-radio-button>
|
||||
<a-radio-button :value="2">
|
||||
Size Bucket 2
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-splitter
|
||||
:key="sizeBucket"
|
||||
style="height: 300px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
|
||||
>
|
||||
<a-splitter-panel
|
||||
:default-size="SIZE_BUCKETS?.[0]?.defaultSize"
|
||||
:min="SIZE_BUCKETS[0]?.min"
|
||||
:max="SIZE_BUCKETS?.[0]?.max"
|
||||
>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
First
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel
|
||||
:min="SIZE_BUCKETS?.[1]?.min"
|
||||
:max="SIZE_BUCKETS?.[1]?.max"
|
||||
>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Second
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel :min="SIZE_BUCKETS?.[2]?.min">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Third
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,28 @@
|
||||
# Basic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Set the default size with `defaultSize`, and restrict the panel size with `min` and `max`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-splitter style="height: 200px;box-shadow: 0 0 10px rgba(0,0,0,0.1)">
|
||||
<a-splitter-panel default-size="40%" min="20%" max="70%">
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
First
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Second
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,85 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Customize semantic structure styles and class names. Supports both object and function forms.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { SplitterProps } from 'antdv-next'
|
||||
|
||||
const stylesObject: SplitterProps['styles'] = {
|
||||
root: { backgroundColor: '#fffbe6' },
|
||||
dragger: { backgroundColor: 'rgba(194,223,252,0.4)' },
|
||||
}
|
||||
|
||||
const stylesFn: SplitterProps['styles'] = ({ props }) => {
|
||||
if (props.orientation === 'horizontal') {
|
||||
return {
|
||||
root: {
|
||||
borderWidth: '2px',
|
||||
borderStyle: 'dashed',
|
||||
marginBottom: '10px',
|
||||
},
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="large">
|
||||
<a-splitter
|
||||
style="height: 200px"
|
||||
root-class="shadow-secondary"
|
||||
:styles="stylesObject"
|
||||
>
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="color: #000">
|
||||
First
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="color: #000">
|
||||
Second
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
<a-splitter
|
||||
style="height: 200px"
|
||||
root-class="shadow-secondary"
|
||||
:styles="stylesFn"
|
||||
>
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5">
|
||||
First
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5">
|
||||
Second
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.shadow-secondary {
|
||||
box-shadow:
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,28 @@
|
||||
# Vertical
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Vertical split panel.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-splitter orientation="vertical" style="height: 300px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)">
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
First
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
<a-splitter-panel>
|
||||
<a-flex justify="center" align="center" style="height: 100%">
|
||||
<a-typography-title type="secondary" :level="5" style="white-space: nowrap">
|
||||
Second
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-splitter-panel>
|
||||
</a-splitter>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
title: Splitter
|
||||
description: Split panels to isolate content.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
|
||||
Provide a draggable split panel for creating complex multi-column or multi-row layouts.
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic | demo/size.md |
|
||||
| Vertical | demo/vertical.md |
|
||||
| Controlled | demo/control.md |
|
||||
| Collapsible | demo/collapsible.md |
|
||||
| Collapsible Icon | demo/collapsibleIcon.md |
|
||||
| Multiple | demo/multiple.md |
|
||||
| Layout Group | demo/group.md |
|
||||
| Size Mix | demo/size-mix.md |
|
||||
| Lazy | demo/lazy.md |
|
||||
| Double-clicked reset | demo/reset.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Splitter
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| collapsibleIcon | Custom collapsible icon | { start?: VueNode; end?: VueNode } | - | 6.0.0 | × |
|
||||
| draggerIcon | Custom dragger icon | VueNode | - | 6.0.0 | × |
|
||||
| lazy | Lazy rendering mode | boolean | false | 5.23.0 | × |
|
||||
| orientation | Layout direction | `vertical` \| `horizontal` | `horizontal` | - | × |
|
||||
| vertical | Orientation, Simultaneously existing with `orientation`, `orientation` takes priority | boolean | false | - | × |
|
||||
|
||||
#### Events
|
||||
| Event | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| collapse | Callback when expanding or collapsing | (collapsed: boolean[], sizes: number[]) => void | 5.28.0 |
|
||||
| resize | Panel size change callback | (sizes: number[]) => void | - |
|
||||
| resizeEnd | Drag end callback | (sizes: number[]) => void | - |
|
||||
| resizeStart | Callback before dragging starts | (sizes: number[]) => void | - |
|
||||
|
||||
#### Slots
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| collapsibleIconEnd | Custom collapsible end icon | () => VueNode | - |
|
||||
| collapsibleIconStart | Custom collapsible start icon | () => VueNode | - |
|
||||
| draggerIcon | Custom dragger icon | () => VueNode | 6.0.0 |
|
||||
|
||||
### SplitterPanel
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| collapsible | Enable collapsible | boolean \| { start?: boolean; end?: boolean; showCollapsibleIcon?: boolean \| 'auto' } | false | 5.28.0 |
|
||||
| defaultSize | Initial panel size, supports px and percentage | number \| string | - | - |
|
||||
| max | Maximum threshold, supports px and percentage | number \| string | - | - |
|
||||
| min | Minimum threshold, supports px and percentage | number \| string | - | - |
|
||||
| resizable | Whether to enable resize | boolean | true | - |
|
||||
| size | Controlled panel size, supports px and percentage | number \| string | - | - |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
| _semantic | demo/_semantic.md |
|
||||
@@ -0,0 +1,28 @@
|
||||
# splitter Token
|
||||
|
||||
Use these variables through `theme.components.Splitter`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Splitter: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `splitBarDraggableSize` | `number` | Drag and drop the identity element size |
|
||||
| `splitBarSize` | `number` | Drag the element display size |
|
||||
| `splitTriggerSize` | `number` | Drag and drop trigger area size |
|
||||
Reference in new issue
Block a user