Splitter

O‘lchami o‘zgartiriladigan bo‘lingan panellar. Panellarning o‘lchamini o‘zgartirish uchun ular orasidagi tutqichni torting.

Panel A

Panel B

<template>
  <VxSplitter>
    <VxSplitterPanel>Panel A</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel>Panel B</VxSplitterPanel>
  </VxSplitter>
</template>

Vertical

Top

Bottom

<template>
  <VxSplitter direction="vertical">
    <VxSplitterPanel>Top</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel>Bottom</VxSplitterPanel>
  </VxSplitter>
</template>

Initial Size

Panelning boshlang‘ich o‘lchamini foiz sifatida belgilang.

30%

70%

<template>
  <VxSplitter>
    <VxSplitterPanel :size="30">30%</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel :size="70">70%</VxSplitterPanel>
  </VxSplitter>
</template>

Min / Max Size

Panel qanchalik kichik yoki katta bo‘lishi mumkinligini cheklang.

Min 20% / Max 60%

Flexible

<template>
  <VxSplitter>
    <VxSplitterPanel :min-size="20" :max-size="60">Constrained</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel>Flexible</VxSplitterPanel>
  </VxSplitter>
</template>

Three Panels

Sidebar

Main

Inspector

<template>
  <VxSplitter>
    <VxSplitterPanel :size="25">Sidebar</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel :size="50">Main</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel :size="25">Inspector</VxSplitterPanel>
  </VxSplitter>
</template>

Nested

Gorizontal va vertikal splitterlarni birlashtiring.

Sidebar

Editor

Terminal

<template>
  <VxSplitter>
    <VxSplitterPanel :size="30">Sidebar</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel :size="70">
      <VxSplitter direction="vertical">
        <VxSplitterPanel :size="60">Editor</VxSplitterPanel>
        <VxSplitterHandle />
        <VxSplitterPanel :size="40">Terminal</VxSplitterPanel>
      </VxSplitter>
    </VxSplitterPanel>
  </VxSplitter>
</template>

Disabled Handle

Tutqichni tortishning oldini oling.

Fixed

This handle cannot be dragged

<template>
  <VxSplitter>
    <VxSplitterPanel :size="40">Fixed</VxSplitterPanel>
    <VxSplitterHandle disabled />
    <VxSplitterPanel :size="60">Cannot drag</VxSplitterPanel>
  </VxSplitter>
</template>

Collapsible Panel

Tugma yordamida panelni ochish/yopish uchun almashtiring. Panel nol kenglikka anime qilinadi.

Sidebar

Main Content

<script setup>
import { ref } from 'vue'
const collapsed = ref(false)
</script>

<template>
  <VxButton @click="collapsed = !collapsed">
    {{ collapsed ? 'Open' : 'Close' }}
  </VxButton>
  <VxSplitter>
    <VxSplitterPanel :size="30" collapsible :collapsed="collapsed">
      Sidebar
    </VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel>Main</VxSplitterPanel>
  </VxSplitter>
</template>

Lazy

resize hodisasini faqat tortish tugaganida chiqaradi, davomida emas. Og‘ir kontent uchun yaxshiroq.

Panel A

Panel B (resize fires on drop)

<template>
  <VxSplitter lazy @resize="onResize">
    <VxSplitterPanel>Panel A</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel>Panel B</VxSplitterPanel>
  </VxSplitter>
</template>

Props

VxSplitter

Prop	Type	Default	Description
direction	'horizontal' | 'vertical'	'horizontal'	Bo‘lish yo‘nalishi
lazy	boolean	false	Resize hodisasini faqat tortish tugagach chiqarish

VxSplitterPanel

Prop	Type	Default	Description
size	number	—	Foizdagi boshlang‘ich o‘lcham
minSize	number	0	Foizdagi minimal o‘lcham
maxSize	number	100	Foizdagi maksimal o‘lcham
collapsible	boolean	false	Panelni yig‘ishga ruxsat berish
collapsed	boolean	false	Yig‘ilgan holat

VxSplitterHandle

Prop	Type	Default	Description
disabled	boolean	false	Tortishni o‘chirish

Events

Event	Type	Description
resize	(sizes: number[]) => void	Tortish davomida ishga tushadi (yoki lazy bo‘lsa qo‘yib yuborilganda)