Skip to content

Customize Components

Jump to bottom
Nicolas Vogt edited this page Apr 13, 2021 · 11 revisions

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.

Requirements:

  • strings.ts file
  • protected import statement
  • string declaration in component file

How to:

  1. 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
};
  1. Next, make sure to import the strings from that file:
//~src/components/mgt-login/mgt-login.ts

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


export class MgtLogin extends MgtTemplatedComponent {
//inside the class
  protected get strings() {
    return strings;
  }
  1. Finally, you must declare the specific string:
//~src/components/mgt-login/mgt-login.ts

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

TIPS:

  • Be sure to check placeholders, they also need to be localized
  • Please document any new strings to be localized

Right to Left

Components are designed to be responsive, however certain languages may require more discreet handling. In this case, you can add additional css which is only rendered dependent upon directionality.

Requirements:

  • html direction property
  • component css using [dir='rtl']selector

How to:

Developers typically declare RTL (right-to-left) implementation through use of dir attribute on the document html or body tag to rtl:

<body dir="rtl"></body>

The BaseComponent will automatically pick this up and dynamically update the specific component to utilize the rtl css selector:

// ~/src/components/mgt-login/mgt-login.scss
[dir='rtl'] {
 --popup-padding: 24px 24px 16px 48px;
}

TIPS:

  • check for overflows, often aren't automatically flipped
  • some text might inherit direction

Contributing

Resources

Clone this wiki locally