Skip to content
Destyler UI Destyler UI Destyler UI
Docs
Separator

Separator

Visually or semantically separates content.

Destyler UI
unstyled component for vue.
Blog
Docs
Source
Destyler UI
unstyled component for solid.
Blog
Docs
Source

Features

Install

Install the component from your command line.

Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/separator @destyler/vue
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/separator @destyler/react
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/separator @destyler/svelte
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/separator @destyler/solid

Anatomy

Import all parts and piece them together.

<script setup lang="ts">
import * as separator from '@destyler/separator'
import { normalizeProps, useMachine } from "@destyler/vue"
import { computed, useId, ref } from "vue"


const [state, send] = useMachine(separator.machine({ id: useId() }))
const api = computed(() =>
  separator.connect(state.value, send, normalizeProps),
)
</script>


<template>
  <div v-bind="api.getRootProps()"/>
</template>
import { normalizeProps, useMachine } from '@destyler/react'
import * as separator from '@destyler/separator'
import { useId } from 'react'


export default function Divider() {


  const [state, send] = useMachine(separator.machine({ id: useId() }))
  const api = separator.connect(state, send, normalizeProps)


  return (
    <div {...api.getRootProps()} />
  )
}
<script lang="ts">
  import * as separator from '@destyler/separator'
  import { normalizeProps, useMachine } from "@destyler/svelte"


  const id = $props.id()


  const [state, send] = useMachine(separator.machine({ id }))
  const api = $derived(separator.connect(state, send, normalizeProps))
</script>


<div {...api.getRootProps()} ></div>
import * as separator from '@destyler/separator'
import { normalizeProps, useMachine } from '@destyler/solid'
import { createMemo } from 'solid-js'


export default function Divider() {


  const [state, send] = useMachine(separator.machine({ id: crypto.randomUUID() }))
  const api = createMemo(() => separator.connect(state, send, normalizeProps))


  return (
    <div {...api().getRootProps()} />
  )
}

Setting a orientation value

const [state, send] = useMachine(
  separator.machine({
    id: createUniqueId(),
    orientation: 'vertical', // default 'horizontal'
  }),
)

Setting specific orientation values

<script setup lang="ts">
import * as separator from '@destyler/separator'
import { normalizeProps, useMachine } from "@destyler/vue"
import { computed, useId, ref } from "vue"


const [state, send] = useMachine(separator.machine({ id: useId() }))
const api = computed(() =>
  separator.connect(state.value, send, normalizeProps),
)
</script>


<template>
  <div v-bind="api.getRootProps()"/>
  <div v-bind="api.getRootProps('vertical')"/>
</template>
import { normalizeProps, useMachine } from '@destyler/react'
import * as separator from '@destyler/separator'
import { useId } from 'react'


export default function Divider() {


  const [state, send] = useMachine(separator.machine({ id: useId() }))
  const api = separator.connect(state, send, normalizeProps)


  return (
    <div {...api.getRootProps()} />
    <div {...api.getRootProps('vertical')} />
  )
}
<script lang="ts">
  import * as separator from '@destyler/separator'
  import { normalizeProps, useMachine } from "@destyler/svelte"


  const id = $props.id()


  const [state, send] = useMachine(separator.machine({ id }))
  const api = $derived(separator.connect(state, send, normalizeProps))
</script>


<div {...api.getRootProps()} ></div>
<div {...api.getRootProps('vertical')} ></div>
import * as separator from '@destyler/separator'
import { normalizeProps, useMachine } from '@destyler/solid'
import { createMemo } from 'solid-js'


export default function Divider() {


  const [state, send] = useMachine(separator.machine({ id: crypto.randomUUID() }))
  const api = createMemo(() => separator.connect(state, send, normalizeProps))


  return (
    <div {...api().getRootProps()} />
    <div {...api().getRootProps('vertical')} />
  )
}

Styling guide

Earlier, we mentioned that each Select part has a data-part attribute added to them to select and style them in the DOM.

[data-part="root"][data-orientation="horizontal"] {
  /* Styles for the root part  */
}

Methods and Properties

Machine Context

The separator machine exposes the following context properties:

orientation(default: "horizontal")
Orientation
The orientation of divider
ids
Partial<{ root: string; }>
The ids of the elements in the divider
id
string
The unique identifier of the machine.
getRootNode
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
dir(default: "ltr")
"ltr" | "rtl"
The document's text/writing direction.

Machine API

The separator api exposes the following methods:

isVertical
boolean
Whether the divider is vertical

Data Attributes

Root

attribute
description
data-scope
separator
data-part
root
data-orientation
The orientation of the separator

Scroll Area

Splitter