a3d-button

Description

Description

The a3d-button web component provides a customizable button based on Spectrum 2. It supports customization through slots, attributes, and CSS properties.

Installation

Using npm:

npm install @a3d-viewer/viewer
npm install @a3d-ui/toolbar

Importing a3d-button:

import '@a3d-viewer/viewer'
import '@a3d-ui/toolbar'

Usage

To use the a3d-button component, include it in your HTML or as part of a toolbar or other UI elements:

<a3d-button>Click Me</a3d-button>

Example with Toolbar

<a3d-viewer>
  <a3d-toolbar>
    <a3d-button slot="left">Reset</a3d-button>
    <a3d-button slot="right">Fullscreen</a3d-button>
  </a3d-toolbar>
</a3d-viewer>

Attributes

selected

The selected attribute indicates whether the button is in a selected state. When selected, the button’s appearance changes to reflect its active state.

<a3d-button selected>Selected Button</a3d-button>

value

The value attribute allows you to associate a value with the button, which can be used in event handling.

<a3d-button value="orbit">Orbit</a3d-button>

Slots

Default Slot

The default slot is used to add content inside the button, such as text or icons.

<a3d-button>Click Me</a3d-button>

icon

The icon slot is used to add an icon to the button.

<a3d-button>
  <span slot="icon">🔍</span>
</a3d-button>

Styling

The <a3d-button> component provides several CSS properties for customization:

• --a3d-button-background-color-override: Background color of the button.
• --a3d-button-border-color-override: Border color of the button.
• --a3d-button-content-color-override: Content color of the button.
• --a3d-button-background-color-hover-override: Background color of the button on hover.
• --a3d-button-border-color-hover-override: Border color of the button on hover.
• --a3d-button-content-color-hover-override: Content color of the button on hover.
• --a3d-button-background-color-selected-override: Background color of the button when selected.
• --a3d-button-border-color-selected-override: Border color of the button when selected.
• --a3d-button-content-color-selected-override: Content color of the button when selected.

Example:

a3d-button {
  --a3d-button-background-color-override: #0078d4;
  --a3d-button-border-color-override: #005a9e;
  --a3d-button-content-color-override: #ffffff;
}

Events

click

The click event is dispatched when the button is clicked. The event includes the value of the button in its detail.

const button = document.querySelector('a3d-button')
 
button.addEventListener('click', (event) => {
  console.log('Button clicked with value:', event.detail)
})

API