小编RGL*_*LSV的帖子

我需要创建如下图所示的内容:

哪里:

• 黑色背景表示页面上的元素,header例如
• 青色背景代表黑色背景下的整体背景
• 黑色背景元素必须像单个元素一样对待,因为它上面会有一个图案叠加,它必须保持在黑色元素的边框内,并且不会出现在它的外面

只使用一些黑色元素来创建黑色元素将非常容易,:pseudo-elements但是它上面的模式已经使整个事物陷入停顿.

我一直在读clip-path道具.但我不确定我是否能够像这样创建一个复杂的剪辑(或者对我来说似乎很复杂).

整个过程将在iOS应用程序上使用,到目前为止,这个剪辑路径属性似乎与它兼容.另外要提到的是,黑色元素将具有固定的高度,但必须是其父级的100%宽度.我认为我会svg反而使用它,但因为它需要一个固定的高度,它看起来像它的拉伸扭曲.

更新: 右侧必须保持相同的宽度,我想可能在<g>标签内使用两个svgs 并绝对定位它们,一个是流体,另一个是固定宽度.但是,我不确定是否filter会覆盖它们,或者是否filter可以在<g>svg内部对标签应用

以下SVG示例:

body {
  background: cyan;
}
svg {
  min-width: 100%;
  height: 80px;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 452 170" preserveAspectRatio="none">
  <rect x="1" y="14" width="438" height="142" />
  <path d="M0 0v170h452V0H0zM448 166H4V4h444V166z" />
  <rect y="14" width="438" height="142" />
</svg>

任何提示或指示非常感谢!

我想将我的gulpfile.js assets或src变量拆分成单独的文件,以便我可以更好地管理它们.例如:

....

var scripts = ['awful.js', 'lot.js', 'of.js', 'js.js', 'files.js']

....(somewhere down the line)

gulp.task('vendorjs', function() {
    return gulp.src(scripts)

        .pipe(concat('vendor.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest(paths.root + 'dist'))
        .pipe(notify({ message: 'vendorjs task completed' }));
});

所以我真的很感兴趣,如果有一种方法可以实际移动到一个单独的文件scripts变量,并能够从中访问它gulpfile.js.

我一直在寻找类似的东西:

require("fs").readFile('gulp/test.js', function(e, data) {
   //(test.js would be the file that holds the scripts var)
});

Howerver虽然它确实读取了文件的内容,但我仍然无法从中访问它gulpfile.js.任何提示或想法都非常感谢.

我正在开发某种类似花哨的菜单,但似乎无法理解当前面临的问题.这是一张图片来说明问题:

整个过程是使用一个带有li子项的ul的nav标签构建的.

基本上,右边的盒子必须始终保持在顶行,右边缘,当窗口缩小或缩小时,这个位置/行为必须保持,而其他常规菜单项应该在第二行折叠.

2个方框必须维护一个顺序:左边的那个是第一个li元素,右边的那个是最后一个li元素

这是我到目前为止所尝试的:

- 位置绝对不会削减它,因为它确实会保持在右侧,但它可能会或可能不会覆盖其他元素(当前情况);

- 浮动它,可能会与下一行的其他元素一起崩溃

- 添加一个填充到nav或ul标签,将工作,但是,其他菜单项将始终有一个右边距,不允许他们永远落在正确的四四方方的东西;

这是问题的一个小问题(缩小结果窗口):菜单问题

我愿意接受任何想法,甚至改变整个标记,如果这是解决方案,或者如果它的工作有些奇特的js.谢谢!

使用的标记:

<nav class="secondary-navigation main-section">
<ul class="align-left secondary-navigation-list">
    <li class="menu-item-block">

    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li class="menu-item-block menu-last-item-block"> …

我已经使用启动项目创建了一个 stenciljs web 组件，并且我试图通过package.jsondependentecy 将其抓取到另一个 stenciljs 项目中，该项目指向 git 存储库。

Web 组件已导入，但当我尝试在 tsx stenciljs 项目中运行该组件时，我注意到以下内容：

• props没有传入，css我可以看到它被应用，但内容丢失
• 如果我在页面上添加一些额外的内容，例如字符或其他内容，开发服务器会呈现 Web 组件（也尝试构建项目，相同的行为）
• Web 组件还包含一些.svgs推送到.tsx文件中的 return 语句，即使在页面上添加字符后，这些图标仍然不会呈现

不确定我在这里是否做错了什么，奇怪的是，只要我在页面上添加其他内容（除了该 Web 组件之外），它就会正确呈现。

我通过以下方式将 Web 组件导入到 stenciljs 项目内的组件中：

import 'my-component-from-git' <-- 指向node_modules文件夹中的webcomponent文件夹

stenciljs web 组件配置：

plugins: [
    sass()
  ],
namespace: 'my-component',
outputTargets: [
  {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements-bundle',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],

stenciljs 项目配置：

globalStyle: 'src/global/app.css', …