Используйте разные размеры изображений профиля в Microsoft Graph Toolkit

В моей веб-части MGT React SharePoint WebPart я хотел бы, чтобы некоторые изображения профиля отображались с большим размером (48 пикселей), а другие изображения отображались со средним размером (36 пикселей).

Я знаю, что свойство avatarSize можно использовать, но оно поддерживает только Small, Large или Auto. А в классе css mgt-person я могу указать --avatar-size: 36px. Но поскольку этот класс css влияет на все компоненты человека на странице, все изображения профиля теперь имеют размер 36 пикселей. И нет поддержки для указания класса css для самого компонента person.

Вы знаете, можно ли этого добиться другим способом?

ОБНОВЛЕНИЕ: мне удалось решить эту проблему самостоятельно с помощью этой статьи: https://developer.microsoft.com/en-us/graph/blogs/a-lap-around-microsoft-graph-toolkit-day-4-customizing-components/

Используя следующие определения в моем scss-файле, он может регулировать размер аватара на основе, например, свойства WebPart:

  .personsmall mgt-person {
    --avatar-size: 24px;
  }
  .personmedium mgt-person {
    --avatar-size: 36px;
  }
  .personlarge mgt-person {
    --avatar-size: 48px;
  }

А в моем tsx-файле это выглядит так:

  public render(): React.ReactElement<IRolesProps> {
    let cf: CommonFunctions = new CommonFunctions();

    return (
      <div className={this._getAvatarSizeClass(this.props.roleSize)}>
        {this.props.roles && this.props.roles.map((val) => {
          return (
            <Stack className={styles.roleSpacing}>
              <Text className={styles.roleHeader} variant="xLarge">{val.role}</Text>
              <Person userId={val.person} view=PersonViewType.twolines fetchImage={true} showPresence={true}
                personCardInteraction={PersonCardInteraction.hover} line2Property="mail"></Person>
            </Stack>);
        })}
      </div>
    );
  }

  private _getAvatarSizeClass(avatarSize: AvatarSize): any {
    if (avatarSize) {
      switch (avatarSize) {
        case AvatarSize.Small:
          return styles.personsmall;
        case AvatarSize.Medium:
          return styles.personmedium;
        case AvatarSize.Large:
          return styles.personlarge;

        default:
          break;
      }
    }
  }

Надеюсь, это поможет кому-то еще бороться с этим.


reactjs sharepoint microsoft-graph-toolkit
person Frank-Ove Kristiansen    schedule 27.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Есть руководство по стилю: Руководство по стилю MGT

Вы можете просто создать правило CSS и вызвать нужный компонент. Пример из руководства по стилю

mgt-person {
  --avatar-size: 34px;
}

Таким образом, вы сможете комбинировать это с классом CSS, например:

mgt-person.my-avatar-size {
  --avatar-size:42px;
}

Поскольку все компоненты React предоставляют атрибут className, это должно работать:

<Person className='my-avatar-size'></Person>

ОБНОВЛЕНИЕ

Поскольку по какой-то причине атрибут className недоступен, почему бы вам не использовать вместо него атрибут data-:

mgt-person[data-cssclass='my-avatar-size']{
  --avatar-size:42px;
}

<Person data-cssclass='my-avatar-size'></Person>

Хакерский, но должен работать. Кроме того, вы можете посмотреть фактический сгенерированный HTML и использовать его.

person bashdx    schedule 27.11.2020
comment
Я пробовал это, но он жалуется, что Person не содержит этого свойства. Я пробовал className = my-avatar-size, class = my-avatar-size и className = {styles.my-avatar-size}. Ни один из них не работает. - person Frank-Ove Kristiansen; 28.11.2020
comment
К сожалению, это не сработало. Но я решил это и обновил свой первоначальный вопрос рабочим примером. Большое спасибо за Вашу помощь. - person Frank-Ove Kristiansen; 30.11.2020