html - Carbon Design Systems UI Shell 组件在 Code Pen 中不工作

Question

我正在尝试在 CodePen 中使用 Carbon Design 的 UI Shell 组件.

组件的代码是here用户界面如下所示:

<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/

第一个例子和你的codepen一样制作了一个header，不同的是他们使用了他们的cloud header

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

我建议您 fork 一个现有的代码笔，这样您就可以使用他们的设置来运行您想要的任何其他测试。

在此示例中，您可以看到他们的 header 中确实有一个汉堡包。 https://codepen.io/team/carbon/pen/LedzoM

我个人使用这样的布局，它已经实现了汉堡包组件。 https://vuetifyjs.com/en/examples/layouts/googleContacts

我也经常使用这些久经考验的模板。它们都是用 HTML 和 CSS 完成的。这个人是个天才。 https://html5up.net/