Styling

Web components provided by us can be seamlessly integrated and styled to align with your website's design, utilizing CSS for customization. These components leverage the shadow DOM for encapsulation, which inherently restricts direct access to their CSS classes to avoid styling conflicts with the rest of your website. Nonetheless, to facilitate customization, certain DOM elements within the configurator are exposed, enabling styling through the ::part pseudo-element. In addition to this, several CSS variables are available. The example below illustrates how to style the cm-config-group-title part within the .menu CSS class of the basic menu example:

.menu {
  justify-content: center;
  width: 15%;
  background-color: #f4f4f4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 400px;
}

/* This will change the apprearance of the configuration group titles */
.menu::part(cm-config-group-title) {
  background-color: #d78a5e;
  padding: 10px;
  color: white;
}

A full example with more styling options can be found in the samples repository. This example also covers the CSS variables.

Even though the CSS classes are not directly accessible, you can see all the exposed parts in the dev tools of your browser as illustrated in the figure below:

part-illustration.jpg

HTML attributes

In addition to CSS, the following HTML attributes are available, which change the appearance of the menu:

• ui-style-override: Changes the operation mode of the menu, available values are default, icons and accordion

• use-captions: Displays captions underneath the icons

For example, the following html code displays an accordion menu with captions underneath the icons, the full example is found on github.

<cm-configurator-menu ui-style-override="accordion" use-captions="true" style="width: 100%"></cm-configurator-menu>

image.png