README.md

Visual Studio Code Divider

The vscode-divider is a web component implementation of a horiztonal rule element.

Usage

❌ Don't	✅ Do
Don't use a divider to create pseudo-views within a webview.	Use dividers to create distinct sections of related content in a single view.

❌ Don't	✅ Do
Don't split up related form elements with a divider.	Use a divider to separate multiple forms on the same page.

Attributes

Attribute	Type	Description
role	string	Indicates the semantic meaning of the divider.

Basic Divider

Interactive Storybook Example

<vscode-divider></vscode-divider>

Role Attribute

The role attribute determines the semantic meaning (or lack there of) of a Visual Studio Code Divider. The two options are separator and presentation.

The separator option is the default value and indicates that the divider semantically separates content.

The presentation option indicates that the divider has no semantic value and is for visual presentation only.

Interactive Storybook Example

<!-- Indicates that the divider semantically separates content -->
<vscode-divider role="separator"></vscode-divider>

<!-- Indicates that the divider has no semantic value and is for visual presentation only -->
<vscode-divider role="presentation"></vscode-divider>