new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

IBM Carbon · all subjects

ui-shell

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

UI Shell module imports in Angular

To use Carbon UI Shell components, import UIShellModule and IconModule from 'carbon-components-angular' in app.module.ts and include them in the imports array of @NgModule decorator.

UI Shell header template structure

The header component uses ibm-header as the root element with name attribute, ibm-header-navigation for navigation items, and ibm-header-global containing ibm-header-action elements with icons. Template example: <ibm-header name="Carbon Tutorial Angular"><ibm-header-navigation ariaLabel="Carbon Tutorial Angular"><ibm-header-item href="/repos">Repositories</ibm-header-item></ibm-header-navigation><ibm-header-global><ibm-header-action title="action"><svg ibmIcon="notification" size="20"></svg></ibm-header-action></ibm-header-global></ibm-header>

Apply cds--header class to header component

Use @HostBinding decorator in the header component TypeScript file to apply the 'cds--header' class: @HostBinding('class.cds--header') headerClass = true; This adds proper padding below the header.

Vue tutorial: UI Shell header with skip to content

When creating a navigation header with Carbon's UI Shell components, include a Skip to content link so keyboard users can skip navigation items and go directly to main content. Use cv-skip-to-content component with an href pointing to the main content element.

Vue tutorial: UI Shell component structure requirement

When using Carbon's UI Shell components, CvHeader and CvContent need to be rendered as consecutive sibling elements (not nested) for the UI Shell to render properly. CvHeader should contain navigation, and CvContent should follow it to wrap page content.

Vue UI Shell navigation: Use 'to' instead of 'href'

When using Carbon's cv-header-name and cv-header-menu-item components with vue-router, use the 'to' attribute instead of 'href'. The @carbon/vue library automatically handles converting these to router-link components internally.

Give your agent this brain