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 react.
Blog
Docs
Source
Destyler UI
unstyled component for svelte.
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,vue}
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/{separator,react}
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/{separator,svelte}
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/{separator,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:

ids
Partial<{ root: string; }>
The ids of the elements in the separator. Useful for composition.
orientation
"vertical" | "horizontal"
The orientation of the separator
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.

Machine API

The separator api exposes the following methods:

isVertical
boolean
Whether the separator is vertical

Data Attributes

Root

name
desc
data-scope
separator
data-part
root
data-orientation
The orientation of the separator

Image