Aha! Develop trials are currently invitation-only. If your team is interested, apply for early access now.

Aha! Develop | Web components

Aha! Develop uses Web Components to provide common UI elements that you can use inside your extensions. These components can be used just like native HTML elements:

  <aha-menu>
<aha-menu-item onClick={() => sync(record)}>Resync</aha-menu-item>
<aha-menu-item onClick={() => addLink(record)}>
Link pull request
</aha-menu-item>
<aha-menu-item onClick={() => removeLinks(record)}>
Unlink pull requests
</aha-menu-item>
</aha-menu>

Click any of the following links to skip ahead:

aha-icon

The aha-icon component renders an Aha! Develop icon or a Font Awesome 6 icon:

<aha-icon icon="fa-regular fa-face-smile fa-6x" />
<aha-icon icon="aha-icon-epic" />

A full listing of Aha! Develop icons is not currently available, but you can find the icon names by inspecting elements within Aha! Develop.

Top

aha-button

aha-button renders an Aha!-Develop-styled button:

<aha-button type="secondary">Cancel</aha-button>
<aha-button type="primary">Submit</aha-button>
  • type — The style of the button. One of primary, secondary, blue, green, orange, red, gray, or plain.

  • size — The button size. One of mini, small, medium, or large.

  • selected — Is the button selected? true or false.

aha-buttons can be combined into an aha-button-group:

<aha-button-group>
<aha-button>Button 1</aha-button>
<aha-button>Button 2</aha-button>
<aha-button type="red">Button 3</aha-button>
<aha-button>Button 4</aha-button>
</aha-button-group>

Top

aha-menu

An aha-menu is a menu triggered by a button:

  <aha-menu>
<aha-menu-item onClick={onClick}>Add feature</aha-menu-item>
<aha-menu-item>Rerank features by</aha-menu-item>
<aha-menu-item>Open release details</aha-menu-item>
<aha-menu-item>Ship release</aha-menu-item>
</aha-menu>

aha-menu:

  • label: the label to show on the menu trigger. Defaults to "..."

aha-menu-item:

  • selected: is this menu item selected?

Top

aha-spinner

aha-spinner shows a simple loading indicator.

<aha-spinner />

Top

aha-flex

aha-flex provides a quick way to create flexbox layouts without extra CSS.

<aha-flex
gap="5px"
wrap="nowrap"
direction="row"
alignitems="center"
justifycontent="stretch"
aligncontent="stretch"
>

<aha-button>Cancel</aha-button>

<aha-button-group>
<aha-button>Previous</aha-button>
<aha-button>Next</aha-button>
</aha-button-group>

<aha-button type="primary">Submit</aha-button>
</aha-flex>
  • gap: the gap between child elements.

  • wrap: how to wrap child elements. One of nowrap, wrap, or wrap-reverse.

  • direction: the direction child elements should flow. One of row, column, row-reverse, or column-reverse.

  • alignitems: the alignment of items on the opposite axis of direction. One of flex-start, flex-end, center, stretch, self-start, self-end, baseline, first baseline, last baseline, safe center, or unsafe center.

  • justifycontent: the distribution of items along the axis of direction. One of flex-start, flex-end, center, left, right, space-around, space-between, space-evenly, stretch, baseline, first baseline, last baseline, safe center, or unsafe center.

  • aligncontent: the distribution of items along the opposite axis of direction. One of flex-start, flex-end, center, left, right, space-around, space-between, space-evenly, stretch, baseline, first baseline, last baseline, safe center, or unsafe center.

Top


Related articles

Aha! Roadmaps
Aha! Ideas
Videos
Announcements
© 2021 Aha! Labs Inc.All rights reserved