repository·main·Indexed 25 days ago
https://github.com/teradata/covalentTeradata's design system providing a library of web components and Angular support to create consistent, branded user experiences. Version 11.20.1 includes specialized modules such as @covalent/code-editor for Monaco Editor integration, @covalent/dynamic-forms for configuration-driven form generation, and @covalent/echarts for declarative ECharts visualizations including bar series, axes, and dataset management.
When defining the template for your side sheet, use the following directives and components to apply standard Covalent styling and behavior:
td-sidesheet-title: Adds title styling to an element (optional).td-side-sheet-close: An attribute directive that closes the side sheet when the element is clicked or interacted with (e.g., via Enter key).td-side-sheet-content: A component that provides a container for content with Material-spec margins and automatic scrolling if the content exceeds the viewport.td-sidesheet-actions: A component that creates a sticky footer for holding multiple action buttons (optional).<span td-sidesheet-title>
Side Sheet Title
<button mat-icon-button td-side-sheet-close>close</button>
</span>
<td-side-sheet-content> Sidesheet Content </td-side-sheet-content>
<td-sidesheet-actions>
<button mat-icon-button td-side-sheet-close>close</button>
<button mat-icon-button td-side-sheet-close>save</button>
</td-sidesheet-actions>The IMenuItem interface allows you to create n-level deep cascading menus. Items fall into one of four roles based on their properties:
children property (an array of IMenuItem).link property (a relative or fully qualified URL). Use newTab: boolean to control if it opens in a new browser tab.action property. Clicking this item emits the itemClicked event.children, link, nor action properties.id: Optional identifier.text: Display text.icon: Optional icon name.svgIcon: Optional SVG icon path.iconClasses: Optional array of styling classes.The React wrapper simplifies interaction with the underlying web components:
on-prefixed event handlers (e.g., onClick, onRowClick). The wrapper maps native DOM events from the web component to these React handlers.import { cvDataTable } from '@covalent/components-react';
function TableDemo() {
const columns = [{ label: 'Name', key: 'name' }];
const data = [{ name: 'Item 1' }, { name: 'Item 2' }];
return (
<cvDataTable
columns={columns}
data={data}
onRowClick={(event) => console.log('Row clicked:', event.detail)}
/>
);
}Covalent Foundations offers two distinct ways to apply styles:
covalent.css): You apply explicit classes (e.g., cv-headline-1) to elements. Use this when you need different styles for the same element type on a single page.elements.css): Standard HTML elements (like <h1>, <p>, <ul>) are automatically styled. Use this for Markdown content, blogs, or documentation sites where you want zero configuration.Using @covalent/components-react is preferred over using the raw @covalent/components web components directly in React because it eliminates boilerplate and provides a native React developer experience.
| Task | With Core Web Components (No Wrapper) | With React Wrapper |
|---|---|---|
| Passing Data | Manually distinguish between attributes (strings) and properties (objects). | Pass props naturally; the wrapper handles conversion. |
| Event Handling | Use ref to add event listeners. | Use React-style onEvent props. |
| Type Support | No built-in TypeScript types. | Full TypeScript support. |
| Code Readability | More boilerplate. | Clean, declarative JSX. |
When defining IGuidedTourStep, you can control how steps are attached to elements and how users advance through them using attachToOptions and advanceOnOptions.
Used to anchor the tour step to a specific DOM element.
highlight: booleanretries: number (attempts to find element)skipIfNotFound: booleanelse: string (step ID to go to if element not found)goBackTo: string (step ID for the back button)skipFromStepCount: booleanUsed to define triggers for moving to the next step.
jumpTo: string (next button will jump to this step ID)allowGoBack: booleanAn array of ITourEventOn objects defining which events (e.g., 'click', 'keyup', 'added') trigger advancement.
When implementing Dialogs in your application, follow these UX guidelines:
Covalent is modular. Depending on your requirements, you can install specific packages from the following ecosystem:
A cv-list-item within a cv-list can be composed of several elements to provide context and information:
twoline attribute to enable a secondary line.graphic attribute (e.g., graphic="avatar") and the slot="graphic" on a cv-icon.slot="meta" on a cv-icon.slot="secondary".<cv-list>
<cv-list-item graphic="avatar" hasMeta twoline>
<span>Two-line list item</span>
<span slot="secondary">Secondary line</span>
<cv-icon slot="graphic">folder</cv-icon>
<cv-icon slot="meta">help</cv-icon>
</cv-list-item>
</cv-list>Covalent offers two distinct styling approaches. You can use them independently or combine them.
covalent.css)elements.css)<h1>, <p>), offering less granular control.For the best results, import elements.css for base styling and use covalent.css utility classes to override specific elements.
<link rel="stylesheet" href="themes/light.css" />
<link rel="stylesheet" href="elements.css" />
<!-- Base styles -->
<link rel="stylesheet" href="covalent.css" />
<!-- Override utilities -->
<h1 class="">Normal heading</h1>
<!-- Uses elements.css -->
<h1 class="cv-headline-3">Smaller heading</h1>
<!-- Override with utility -->The td-chart-dataset element allows you to set the dataset option inside a td-chart. This provides flexibility by separating data management from the series property, enabling data reuse across different series and enabling data encoding. It is the Angular equivalent of creating a JavaScript dataset object in ECharts.
Note: If you provide data via series.data, it will override the data provided in dataset.source.
<td-chart [style.height.px]="300">
<td-chart-x-axis></td-chart-x-axis>
<td-chart-y-axis [type]="'category'"> </td-chart-y-axis>
<td-chart-series td-bar></td-chart-series>
<td-chart-dataset
[source]="[['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7], ['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut Brownie', 72.4, 53.9, 39.1]]"
>
</td-chart-dataset>
</td-chart>