50 docs tagged with "web components"

A more light-weight grid for scenarios where you don't need the full power of Grid Pro.

This is a slotted component that allows a "visual approach" when configuring cell renderers. Each grid-pro-cell takes an ICellRendererFunc typed function.

This is a slotted component that allows a more visual approach to defining columns. Each ` takes a ColDef typed object. To check all the available fields for the variable type coldef`, look here.

The connected data use case is when you have a Data Server or Request Server available and ready to use, and don't want to worry about handling data transformations, updates, deletes and cell renderers in the grid. For cell renders, it's flexible; you can the components provided by default, or you can use any component you want.

Use cases

The grid-pro-renderers enable you to render data in a way that is meaningful to the user. You can render each column differently and individually.

The examples below use JSX syntax. Real-world scenarios might be different, depending on the client application tooling and structure.

An accordion is a vertically stacked set of interactive headings representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

An anchor is a piece of text that marks the beginning and/or the end of a hypertext link.

An anchored region is a container component that enables you to create layouts where the contents of the anchored region can be positioned relative to another "anchor" element. Additionally, the anchored region can react to the available space between the anchor and a parent "viewport" element such that the region is placed on the side of the anchor with the most available space, or even resize itself based on that space.

The avatar component is used to graphically represent a user or an object.

The badge component is used to highlight an item or flag its status.

foundation-banner extends foundation-element.

As defined by the W3C:

Button component enables users to trigger actions, such as submitting a form or opening a dialog.

The card component is a visual container without semantics, which takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.

A chart component is a graphical representation of a set of data. A range of different chart types can be used. Genesis charts are based on g2plot.

An implementation of a checkbox as a form-connected Web Component.

A combo-box is an input with an associated pop-up that enables users to select one value from a collection of possible values.

This version allows you to use a segmented control that generates criteria based on the selected item.

A dialog component presents content to the user. Unlike modal it doesn't prevent the user from interacting with other content on the page.

A disclosure component is the implementation of native details and summary controls, which toggles the visibility of the extra content. Visually, it would look like a button or hyperlink beneath extra content. As defined by the W3C:

A Web Component implementation of a horizontal rule.

Dropdownmenu extends foundationElement.

The file-upload component can be used to select single or multiple files from the local file system. Selected files can be uploaded to a server using the Upload button.

The flipper component is most often used to page through blocks of content or collections of UI elements. As flippers are often a supplemental form of navigation, the flippers are hidden by default to avoid duplicate keyboard interaction. Passing an attribute of aria-hidden="false" will expose the flippers to assistive technology.

An implementation of a content scroller as a Web Component.

foundation-icon extends foundation-element.

An implementation of a listbox. While any DOM content is permissible as a child of the listbox, only alpha-option elements, option elements, and slotted items with role="option" will be treated as options and receive keyboard support.

As defined by the W3C:

A modal is a type of dialog that prevents the user from interacting with other content on the page. Usually, when an active modal is displayed, all other content on the screen is dimmed. The user is unable to move focus to other windows or dialogs. This forces the user to deal with the modal before moving to other work on the application.

A text field for numeric entry. By default, this includes steps - up and down arrows where the user can click to increase or decrease the number in the field.

An implementation of an option.

A selection input that enables the user to select multiple options.

The Progress and Progress Ring components are used to display

The Progress and Progress Ring components are used to display one of the following:

A selection input with support for selection of multiple options.

As defined by the W3C:

A segmented control is a set of checkable buttons. No more than one button can be checked at a time. When a user checks an unchecked button, the previously checked button is automatically unchecked.

An implementation of an HTML select element as a form-connected Web Component. It is very similar to the combo-box, but with some differences such as:

The skeleton component is used as a visual placeholder for an element while it is in a loading state. It usually presents itself as a simplified wireframe-like version of the UI it is representing.

An implementation of a range slider as a form-connected Web Component. This component is used together with the alpha-slide-label. It displays a slider that the user can move in either direction to reset the value.

The `` enables you to provide a multi-step process or dynamic form that the user can follow. Configurable attributes such as orientation and validation conditions provide flexibility, allowing you to tailor the stepper's behaviour to specific use cases.

An implementation of a switch as a form-connected Web Component.

Tabs are displayed as a set of layered sections of content, where one selected panel of content is displayed above all the other sections. Each tab panel has an associated tab element that, when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel.

A text-area is a graphic user-interface element that provides a region where users can input, edit or display text that extends over multiple lines.

A text field is an interactive or graphic web component that enables users to input and edit text.

As defined by the W3C:

The alpha-tooltip component is used to provide extra information about another element when the user hovers over it.

As defined by the W3C: