gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:54:36 24 4
gpt4 key购买 nike

我正在尝试在 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 -->

enter image description here

但是当我将代码复制到 CodePen 中时,输出看起来像缺少 css:

enter image description here

有什么办法可以解决?

最佳答案

您在设置中忘记了一些事情,即添加 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/

关于html - Carbon Design Systems UI Shell 组件在 Code Pen 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56334554/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com