Странности CSS с библиотеками Office UI Fabric

Я работаю над проектом надстройки Word 2016, и у меня возникают некоторые трудности с использованием библиотек Office UI Fabric.

По сути, я хотел бы придать моей надстройке официальный внешний вид Office, поэтому я подумал, что Office UI Fabric будет лучшим выбором в сочетании с компонентами JavaScript Fabric, такими как раскрывающиеся меню и т. Д.

Я установил эти два пакета NuGet: OfficeUIFabric 2.6.3 и OfficeUIFabricJS 1.4.0, а затем добавил некоторые компоненты на страницу, используя эти классы css: "ms-Dropdown "," ms-ChoiceField "и некоторые классы значков, например" ms-Icon - Настройки ".

Вот (нечетные) результаты, которые у меня есть:

  • OfficeUIFabric и OfficeUIFabricJS поставляют две разные версии одного и того же файла «fabric.components.css», поэтому конечный результат зависит от порядка, в котором установлены эти два пакета.

  • с "fabric.components.css" из OfficeUIFabric 2.6.3 все значки отсутствуют, но ChoiceField имеет правильный стиль.

  • с "fabric.components.css" из OfficeUIFabricJS 1.4.0 значки видны, но раскрывающаяся кнопка отображается за пределами прямоугольного текстового поля, а стиль ChoicheField неправильный (ярлыки и флажки являются стандартным элементом управления HTML).

У вас есть опыт работы с этими библиотеками? Я собираюсь перейти на более удобный фреймворк, например Bootstrap или аналогичный ...


office365-apps office-ui-fabric office-js
person jeanie77    schedule 16.03.2017    source источник

Ответы (3)


arrow_upward
4
arrow_downward

У вас есть опыт работы с этими библиотеками?

Да;) Если это ваш вопрос.

Это (нечетные) результаты, которые у меня есть ...

Я удивлен, что вы вообще получаете какие-то результаты. Проблема с некорректным использованием библиотек OfficeUIFabric. Позвольте мне прояснить, как разработчики планировали использование этих библиотек ...

  • Fabric 2.6.1 (текущая последняя версия - 2.6.3) последняя известная (стабильная) версия пакета, в которой основная часть (CSS) и компоненты (JS-компоненты) находятся вместе. Обычно, когда вы устанавливаете эту версию, вы будете использовать ее как есть. Никаких других пакетов не требуется. Фактически вы не можете установить сверху другую версию ядра или версию JS, вы нарушите целостность пакета (что вы наблюдаете)
  • Следующая разработка и основной выпуск были совершенно другими. Пакет отделяет «компоненты JS» и становится «Office UI Fabric Core». . этот пакет - не что иное, как набор стилей CSS, чтобы ваше пользовательское приложение выглядело как сам Office. Текущий базовый пакет следует использовать отдельно (в основном у вас есть стили ms_ для использования по вашему усмотрению) или в паре с "Office UI Fabric JS".
  • Наконец, новый пакет «Office UI Fabric JS» представляет собой набор компонентов JS. (который раньше входил в пакет 2.6.1) следует использовать, когда вы хотите иметь "стилизованные" компоненты, которые будут выглядеть как собственные компоненты Office. Fabric JS 1.4.0 использует Fabric Core 5.0.1. Наверное, ваш следующий вопрос: почему это происходит? Старый пакет 2.6.1 имеет компонентную часть, основанную на JQuery; новый 1.4.0 (странно, ага? версия ниже) не зависит от каких-либо сторонних пакетов, написанных с помощью TypeScript.

Надеюсь, это кое-что прояснит для вас или кого-то, кто тоже озадачился. Мы работаем с пакетом Fabric, который, я думаю, начиная с первой версии, пробуем как 2.6.1, так и новый 1.4.0 + 5.0.1. Есть много проблем, слишком много неисправностей. Мы не можем позволить себе тратить столько времени только на то, чтобы выглядеть по-новому. В основном с некоторыми настройками мы остановились на версии 2.6.1 и не пойдем с новой Fabric, по крайней мере, на данный момент. Если бы у меня была роскошь вернуться и снова выбрать пакет пользовательского интерфейса, я бы не стал использовать Fabric, вместо этого я бы использовал JQuery UI или JQuery Mobile. Не в обиду команде Microsoft, но команда Fabric похожа на кучку подростков, которые стараются изо всех сил, но удача опыта все портит. Это не программное обеспечение мирового класса, как мы привыкли видеть в Microsoft.

person Slava Ivanov    schedule 16.03.2017
comment
Иванов, я полностью согласен с вами по поводу тканевого хаоса. То, что вы объясняете, не так ясно на сайтах Fabric и Fabric-distribution (в описании проекта NuGet для OfficeUIFabricJS говорится, что нет зависимостей, хотя оказывается, что это зависит от Core!), Спасибо, что указали мне правильное направление. Но мне это еще не совсем понятно. Согласно тому, что вы объяснили, мой проект должен ссылаться только на полный пакет OfficeUIFabric. Но если я это сделаю, все значки и выпадающие элементы исчезнут. Так что не все так полно ... - person jeanie77; 20.03.2017
comment
@ jeanie77 Вы не совсем ясно сказали, чем будете пользоваться? Это 2.6.3 вместе или JS 1.4.0 + Core 5.0.1? В любом случае, вы снова смешиваете эти решения. 1. если вы используете 1.4.0 + 5.0.1, все значки и элементы управления должны быть на своих местах. Если нет, обратитесь к документации или документации, включенной в каждый компонент. 2. Если вы в конечном итоге используете только версию 2.6.3, очистите свое решение от ранее установленных пакетов и установите его с нуля. Для использования стилей обращайтесь ТОЛЬКО к документам, включенным в компоненты, и загруженным CSS. Интернет-ресурс не действует для версии 2.6.3 вер. - person Slava Ivanov; 20.03.2017
comment
Я пробовал использовать только OfficeUIFabric 2.6.3, сначала очистив все библиотеки Fabric, а затем добавив только 2.6.3 (не из CDN, я использовал пакет NuGet). И у меня было зарегистрированное поведение: все значки и раскрывающийся список исчезли. - person jeanie77; 20.03.2017
comment
Позвольте мне добавить некоторые дополнительные сведения, поскольку содержимое пакетов NuGet Fabric отличается от того, что вы писали о трех библиотеках. Пакет OfficeUIFabric 2.6.3 не включает fabric.js, поэтому он не может включать функции javascript. Пакет OfficeUIFabricJS 1.4.0 включает стили из Office UI Fabric Core 5.0.1, поэтому нет необходимости устанавливать Core как отдельный пакет. - person jeanie77; 20.03.2017
comment
@ jeanie77 Хорошо, вы хотите использовать 2.6.3 и установили его из NuGet. Превосходно! это то, что вам нужно, больше ничего. Ваш файл js, включенный в эту библиотеку, называется jquery.fabric.js, см. Его в разделе Сценарии. Не связывайтесь с другими пакетами. Просто забудьте, что они существуют. Прочтите документацию, поставляемую с этим пакетом (вам может потребоваться загрузить весь пакет с GitHub, распаковать его и найти примеры). Например, чтобы отобразить значок галочки: '‹i class = ms-Icon ms-Icon - check› ‹/i› » - person Slava Ivanov; 20.03.2017
comment
fabric.Dropdown не является конструктором, потому что он включен только в fabric.js, а не jquery.fabric.js. Я решил, удалив OfficeUIFabric 2.6.3 и оставив только OfficeUIFabricJS 1.4.0. Спасибо за помощь! :) - person jeanie77; 21.03.2017
comment
@ jeanie77 Я несколько раз упоминал, что вы не можете использовать онлайн-документацию для версии 2.6.3, вместо этого вам нужно использовать документацию, поставляемую с пакетом. Внутри вы найдете пример элемента $ .fn.Dropdown. В этой версии нет такой вещи, как fabric.Dropdown (это стало доступно в версии JS 1.0). Если вы хотите использовать онлайн-примеры и документацию, вам необходимо установить Fabric JS 1.4.0 + Core 5.01. Надеюсь, я ответил на все ваши вопросы. Кто-то еще может получить пользу от обсуждения, если вы отметите это как ответ. - person Slava Ivanov; 21.03.2017
comment
К вашему сведению, office-ui-fabric пакет npm устарел. Рекомендуемый способ - использовать office-ui-fabric-core (для базовые стили без компонентов) или office-ui-fabric-react (не повезло для ребят из Angular). Чистая библиотека JS office-ui-fabric-js все еще доступна, но включает старую версию office-ui-fabric-core. - person Alex Klaus; 30.10.2018

arrow_upward
1
arrow_downward

То, что описал Слава, правильно.

В качестве альтернативы, можете ли вы ссылаться на Fabric из CDN в своем проекте? Если ссылка на CDN является для вас вариантом (вместо установки пакетов NuGet), следуйте этой теме, чтобы ссылаться на Fabric из CDN: Использовать Office UI Fabric в надстройках Office

Файлы в CDN были собраны вместе, так что номера версий совпадают. Кроме того, поскольку Fabric JS использует Fabric Core, правильная версия Fabric Core развертывается вместе с файлами Fabric JS. Таким образом, вам не нужно угадывать, какую версию Fabric Core следует использовать с более новой версией Fabric JS.

person Reeza Ali - MSFT    schedule 16.03.2017
comment
Я не могу использовать онлайн-версию, так как создаю компонент, который должен работать без внешних ресурсов. В любом случае, проблема все еще заключается в понимании того, какую библиотеку следует использовать для просмотра значков и других компонентов js ... и включает ли Fabric JS Core или зависит от него. Онлайн-версия должна соответствовать тем же спецификациям, что и офлайн, возможно, они разные в версиях ... но не более того. - person jeanie77; 20.03.2017

arrow_upward
1
arrow_downward

Я хотел бы поделиться своим недавним опытом работы с JS-библиотеками надстроек Office.

ATM, существует два способа разработки интерфейсной части надстройки Office 365:

  • Приложение ReactJS с использованием библиотеки office-ui-fabric-react. Это рекомендуемый способ создания надстроек, так как это современный проект со всеми подходящими стилями и хорошими компонентами.
  • Ваше собственное приложение со стилями CSS / SASS из office-ui-fabric-core (только базовые стили, без компонентов). Стили хорошо документированы (см. Раздел «dist / documentation» проекта) и могут быть хорошей заменой фреймворков Bootstrap / Material UI, учитывая, что внешний вид надстройки должен соответствовать официальные правила.

Я НЕ рекомендую использовать библиотеку office-ui-fabric-js в сочетании с JS-фреймворки (например, Angular, Vue), даже если на первый взгляд они могут показаться привлекательными (имеют некоторые компоненты и приятные стили). Это непрофессионально созданная библиотека (см. этот список проблем) с CSS из старой версии office-ui-fabric-core, и кажется, что от нее отказались.

Что касается других способов, официально рекомендовано:

  • Библиотека AngularJS (ng-officeuifabric) официально называется "в режиме архива". Никаких признаков поддержки Angular.
  • Проект iOS не обновлялся два года (хотя и не не показывала много жизни раньше).
person Alex Klaus    schedule 30.10.2018