标签: bulma

我与vue和vue-bulma-tabs有这个奇怪的错误.

Project is running at http://localhost:8081/
webpack output is served from /dist/
404s will fallback to /index.html
crypto.js:74
  this._handle.update(data, encoding);
               ^

TypeError: Data must be a string or a buffer
    at TypeError (native)
    at Hash.update (crypto.js:74:16)
    at HarmonyExportImportedSpecifierDependency.updateHash (/Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/dependencies/HarmonyExportImportedSpecifierDependency.js:144:8)
    at /Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/DependenciesBlock.js:33:5
    at Array.forEach (native)
    at NormalModule.DependenciesBlock.updateHash (/Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/DependenciesBlock.js:32:20)
    at NormalModule.Module.updateHash (/Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/Module.js:162:41)
    at NormalModule.updateHash (/Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/NormalModule.js:327:30)
    at modules.forEach.m (/Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/Chunk.js:253:31)
    at Array.forEach (native)

我认为与webpack有关,但我不知道问题是什么或如何解决它.

重现它,就这样做

vue init webpack-simple example1
cd example1
npm i
npm i -S bulma vue-bulma-tabs

然后将其添加到main.js文件中

import {Tabs, TabPane} from 'vue-bulma-tabs' …

我尝试使用Bulma css框架实现select2插件,但在前端看起来很乱.我尝试使用bootstrap,是的,没有问题,因为select2具有bootstrap兼容性.

HTML:

<div class="field">
  <label class="label">Role</label>
     <p class="control">
         <span class="select is-fullwidth">
            <select2 v-model="form.role"
                    placeholder="Select Role"
                    name="role"
                    :value="form.role"
                    :multiple="false"
             >
                <option></option>
                 <option v-for="role in roles" :value="role.id">{{ role.display_name }}</option>
         </select2>

     </span>
   </p>
</div>

我将 Angular 4 与bulma css 框架一起使用，我想知道如何每第三列添加一个新行（或列类）。

打印出 0,1,2 0,1,2 等的索引变量是我在使用引导程序时查看代码段时。

注意到一些关于也许我可以使用模板语法的评论，但也没有让它起作用。

<div class="columns">
    <div class="column is-one-third" *ngFor="let item of items | async; let index = index">
      <app-item-details [item]='item '></app-item-details>
      {{ index % 3 }}
    <div class="is-clearfix" *ngIf="index % 3 == 0"></div>
  </div>
</div>

如何使用布尔玛组件制作滑动垂直导航栏？我在布尔玛文档中找不到一个。我相信它们通常被称为“非画布”菜单或“汉堡”菜单。

有一个水平的，但我更喜欢这样的垂直，左侧样式：

https://www.sitepoint.com/pure-css-off-screen-navigation-menu/

所以我使用 CSS 框架 Bulma.io。通常，没有它，当做 body { background: black; } 背景变黑时。但是当我使用 Bulma.io 时，只有文字背后的背景变黑，而网站的其余部分保持白色。那么有人知道如何让整个网站变黑，就像通常没有框架一样吗？

我使用时使用Bulma和VueJS v-for,所有列都在一行上,我试图添加is-4,然后列宽更改但它们仍然在一行

<div class='columns'>
<div class='column' 
v-for='item in weatherData.list' 
v-bind:key='item.data'>

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
     </figure>
    </div>
   <div class="card-content">
               ...
    </div>
   </div>
   </div>
   </div>

任何人都可以向我解释它是如何工作的？

谢谢!

编辑

html输出:https://jsfiddle.net/6rfo3dvL/2/

我正在为项目使用Bulma框架,并且移动菜单被激活为最大宽度1024px.我想只在屏幕宽度为769px或更低时激活移动菜单.我花了几个小时挖掘sass文件,但无法找到如何覆盖默认行为.

我很难找出调整移动文本大小的最有效方法。我知道根据文档，使文本大小响应屏幕非常简单，只需将is-size-*-mobile类添加到元素中即可将*移动设备的文本大小重置为(1-7)的值。什么元素是最好的地方呢？例如，我希望能够在移动设备上将屏幕上的所有文本更改为 7 大小，但到目前为止，我不得不将该is-size-7-mobile类添加到页面上的几乎每个文本容器中。虽然这并非不可能，但它似乎违背了通过 CSS 提供这样一个类的目的。

任何提示将非常感谢。

所以我通过 CDN 使用 Bulma，有一个<h2>标签，<button>其中包含一个标签：

<h2 class="title is-size-2-mobile is-3 has-text-white">Step 1: Pick which Cards and/or Cheatsheets youwant to learn from the <button class="button mt-10 has-background-success has-text-info has-text-centered is-vcentered ml-10 mr-10">Cheatsheets</button> in the menu.</h2>

但这就是它呈现的内容：

我需要按钮上的哪些类才能使其与文本垂直对齐？

我有几个 HTML 表隐藏在手风琴面板中，我需要搜索所有表才能找到一行，我是否错过了部署相应面板并突出显示相应行的内容？

这是我的代码：

function testSearch(){
        console.log("testresearch")
        let input = document.getElementById('searchbar').value
        input=input.toLowerCase();
        let x = document.getElementsByClassName('panel');
          
        for (i = 0; i < x.length; i++) { 
            if (!x[i].innerHTML.toLowerCase().includes(input)) {
                x[i].style.display="none";
            }
            else {
                x[i].style.display="list-item";                 
            }
        }
    
    }

<input
    id="searchbar"
    onkeyup="testSearch()"
    type="text"
    name="search"
    placeholder="..."
  /><br />
  <button class="accordion button is-light">A</button>
  <div class="panel" style="">
    <table class="dataframe table is-hoverable is-fullwidth clickable-table">
      <tbody>
        <tr>
          <td>A</td>
          <td>A</td>
          <td>A</td>
        </tr>
      </tbody>
    </table>
  </div>

  <button class="accordion button is-light">B</button>
  <div class="panel" style="">
    <table class="dataframe table is-hoverable is-fullwidth clickable-table">
      <tbody> …