Customize Components

The Microsoft Graph Toolkit components support a variety of features to enable the developer to fully customize the experience. This includes, custom css properties, themes, templates, localization, and many more. Leveraging each specific feature requires specific syntax and structure, but are by no means required dependencies.

Localization

Localizing components enable the developer to designate strings that they wish to be localized for the user. Each component should have its own strings.ts file within the component's respective directory , e.g. mgt-login:

~packages/mgt-components/src/components/mgt-login/strings.ts

This file will contain key value pairs specific to the component that the developer wants to localize. The value provided will be the default value for that string, even if no localization is active.

export const strings = {
  signInLinkSubtitle: 'Sign In', //'Sign In' is default
};

Next, inside the component, you must import the strings from that file and declare:

//~src/components/mgt-login/mgt-login.ts

//import
import { strings } from './strings';

//declare
  <span aria-label="Sign In">
    ${this.strings.signInLinkSubtitle}
  </span>

TIPS:

• Be sure to check placeholders, they also need to be localized

Right to Left