Компонент оболочки пользовательского интерфейса Carbon Design Systems не работает в Code Pen

Question

Я пытаюсь использовать компонент оболочки пользовательского интерфейса Carbon Design в CodePen .

Код для компонента здесь и пользовательский интерфейс выглядит следующим образом:

<header class="bx--header" role="banner" aria-label="IBM Platform Name" data-header>
 <a class="bx--skip-to-content" href="#main-content" tabindex="0">Skip to main content</a>
  <button class="bx--header__menu-trigger bx--header__action" aria-label="Open menu" title="Open menu"
data-navigation-menu-panel-label-expand="Open menu" data-navigation-menu-panel-label-collapse="Close menu"
data-navigation-menu-target="#navigation-menu-fthewlqilpo">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 20 20"><path d="M2 14.8h16V16H2zm0-3.6h16v1.2H2zm0-3.6h16v1.2H2zM2 4h16v1.2H2z"></path></svg>
</button>
... 
<!-- the rest of the code can be seen in Code Pen -->

Но когда я копирую код в CodePen, вывод выглядит так, что отсутствует css:

Как это исправить?

Answer 1

Вы забыли несколько вещей в настройке, а именно добавление CDN и настройку препроцессоров CSS и javascript.

Подробнее о том, как добавить CDN, вы можете прочитать здесь. https://www.carbondesignsystem.com/getting-started/developers/vanilla

Что круто, хотя эта компания уже сделала кучу кодов для тестирования. Это может помочь!

https://codepen.io/collection/XqRbEz/

Первый пример создает заголовок так же, как ваш кодовый блок, разница в том, что они используют свой облачный заголовок

<nav class="bx--cloud-header">

Я бы посоветовал вам разветвить один из существующих кодов, чтобы вы могли использовать их настройки для запуска любых других тестов, которые вам нужны.

В этом примере вы можете видеть, что у них есть гамбургер в заголовке. https://codepen.io/team/carbon/pen/LedzoM

Лично я работаю с такими раскладками, в которых уже есть реализованный компонент бургера. https://vuetifyjs.com/en/examples/layouts/googleContacts

Я также много работаю с этими проверенными и проверенными шаблонами. Все они сделаны в HTML и CSS. Этот человек гений. https://html5up.net/