Divider

Create clear visual separation between elements in your user interface.

Anchor to propertiesProperties

Anchor to color color "base" | "strong": Modify the color to be more or less intense.
Anchor to direction direction "inline" | "block": Specify the direction of the divider.

An 'inline' divider separates blocks of content. In a left-to-right or right-to-left writing mode, this would typically be a horizontal line.

A 'block' divider separates items within the current line of content. In a left-to-right or right-to-left writing mode, this would typically be a vertical line.

Divider

adoptedCallback
```
() => void
```
attributeChangedCallback
```
(name: string) => void
```
click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
```
({ sourceEvent }?: ClickOptions) => void
```
color
Modify the color to be more or less intense.
```
"base" | "strong"
```
connectedCallback
```
() => void
```
direction
Specify the direction of the divider. An 'inline' divider separates blocks of content. In a left-to-right or right-to-left writing mode, this would typically be a horizontal line. A 'block' divider separates items within the current line of content. In a left-to-right or right-to-left writing mode, this would typically be a vertical line.
```
"inline" | "block"
```
disconnectedCallback
```
() => void
```
queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
```
() => void
```
setAttribute
```
(name: string, value: string) => void
```

declare class Divider extends PreactCustomElement implements DividerProps {
  accessor direction: DividerProps['direction'];
  accessor color: DividerProps['color'];
  constructor();
}

ClickOptions

sourceEvent
The event you want to influence the synthetic click.
```
ActivationEventEsque
```

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

button
```
number
```
ctrlKey
```
boolean
```
metaKey
```
boolean
```
shiftKey
```
boolean
```

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

Was this section helpful?

Code

<s-divider></s-divider>

examples

Code

<s-divider></s-divider>

<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: grid; place-items: center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><s-divider></s-divider>
</body></html>

Preview

Anchor to useful-forUseful for

Separating elements inside sections.
Visually grouping related content in forms and lists.

Was this section helpful?