Microsoft Graph Toolkit コンポーネントのローカライズ

ローカライズは、さまざまな言語要件を持つユーザーをグローバルにサポートするためのアプリケーション開発の重要な側面です。

Microsoft Graph Toolkit コンポーネントをローカライズして、UI がターゲット言語を反映するようにすることができます。

LocalizationHelper を使用して、ローカライズされた文字列を追加する

ツールキット内の文字列はローカライズされませんが、独自のローカライズされた文字列を提供し、アプリのローカライズに使用するのと同じプロセスを使用して異なる言語を管理できます。 ローカリゼーションを容易にするために、ツールキットはLocalizationHelper静的クラスを公開します。

次の例は、いくつかのコンポーネントをローカライズする方法を説明しています。

import { LocalizationHelper } from "@microsoft/mgt-element";

LocalizationHelper.strings = {
  noResultsFound: "لم نجد أي قنوات",
  _components: {
    "login": {
      signInLinkSubtitle: "login",
      signOutLinkSubtitle: "خروج",
    },
    "people-picker": {
      inputPlaceholderText: "ابدأ في كتابة الاسم",
      noResultsFound: "لم نجد أي قنوات", // will overwrite globally defined noResultsFound in people-picker component
      loadingMessage: "...جار التحميل",
    },
    "teams-channel-picker": {
      inputPlaceholderText: "حدد قناة",
      noResultsFound: "local NoResultsFound Example",
      // loadingMessage: is default string "Loading..." for this example since not defined globally or locally
    },
    "tasks": {
      removeTaskSubtitle: "delete",
      cancelNewTaskSubtitle: "canceltest",
      newTaskPlaceholder: "newTaskTest",
      addTaskButtonSubtitle: "addme",
    },
    "person-card": {
      sendEmailLinkSubtitle: "ارسل بريد الكتروني",
      startChatLinkSubtitle: "ابدأ الدردشة",
      showExpandedDetailsButton: 'Show expanded details',
      showMoreSectionButton: "أظهر المزيد", // global declaration
    },
    "person-card-contact": {
      contactSectionTitle: "اتصل",
    },
    "person-card-organization": {
      reportsToSectionTitle: "تقارير ل",
      directReportsSectionTitle: "تقارير مباشرة",
      organizationSectionTitle: "منظمة",
      youWorkWithSubSectionTitle: "انت تعمل مع",
      userWorksWithSubSectionTitle: "يعمل مع",
    },
  },
};

の strings プロパティ LocalizationHelper が割り当てられると、すべてのコンポーネントで新しい文字列が自動的に取得され、再レンダリングされるため、文字列を動的に変更できます。

文字列は、グローバル レベルで、またはコンポーネントごとに (_components:プロパティを使用して) 設定できます。

文字列

ログイン

"login": {
  signInLinkSubtitle: "Sign In",
  signOutLinkSubtitle: "Sign Out"
}

ユーザー ピッカー

"people-picker": {
  inputPlaceholderText: "Start typing a name",
  noResultsFound: `We didn't find any matches.`,
  loadingMessage: "Loading..."
}

Teams チャネル ピッカー

"teams-channel-picker": {
  inputPlaceholderText: "Select a channel",
  noResultsFound: `We didn't find any matches.`,
  loadingMessage: "Loading..."
}

タスク

"tasks": {
  removeTaskSubtitle: "Delete Task",
  cancelNewTaskSubtitle: "cancel",
  newTaskPlaceholder: "Task...",
  addTaskButtonSubtitle: "Add"
}

Tasks-Base

"tasks-base": {
  removeTaskSubtitle: "Delete Task",
  cancelNewTaskSubtitle: "cancel",
  newTaskPlaceholder: "Task...",
  addTaskButtonSubtitle: "Add"
}

Todo

"todo": {
  removeTaskSubtitle: "Delete Task",
  cancelNewTaskSubtitle: "cancel",
  newTaskPlaceholder: "Task...",
  addTaskButtonSubtitle: "Add"
}

個人カード

"person-card": {
  sendEmailLinkSubtitle: "Send email",
  startChatLinkSubtitle: "Start chat",
  showMoreSectionButton: "Show more"
}

個人カード連絡先

"person-card-contact": {
  contactSectionTitle: "Contact"
}

個人カード組織

"person-card-organization": {
  reportsToSectionTitle: "Reports to",
  directReportsSectionTitle: "Direct reports",
  organizationSectionTitle: "Organization",
  youWorkWithSubSectionTitle: "You work with",
  userWorksWithSubSectionTitle: "works with"
}

個人カードメッセージ

"person-card-messages": {
  emailsSectionTitle: "Emails"
}

個人カードファイル

"person-card-files": {
  filesSectionTitle: "Files",
  sharedTextSubtitle: "Shared"
}

個人カードプロファイル

"person-card-profile": {
  SkillsAndExperienceSectionTitle: "Skills & Experience",
  AboutCompactSectionTitle: "About",
  SkillsSubSectionTitle: "Skills",
  LanguagesSubSectionTitle: "Languages",
  WorkExperienceSubSectionTitle: "Work Experience",
  EducationSubSectionTitle: "Education",
  professionalInterestsSubSectionTitle: "Professional Interests",
  personalInterestsSubSectionTitle: "Personal Interests",
  birthdaySubSectionTitle: "Birthday",
  currentYearSubtitle: "Current"
}

File

'file': {
  modifiedSubtitle: 'Modified',
  sizeSubtitle: 'Size'
};

File-List

"file-list": {
  showMoreSubtitle: 'Show more items'
}