标签: getuikit

我一直在将我的网站迁移到UIkit 3而不是Bootstrap 4.但是我已经被困在导航栏上一段时间了.现在,我的导航栏是在Bootstrap 4中构建的,看起来像这样:

https://jsfiddle.net/eztwL9p7/1/

<nav class="navbar navbar-toggleable-sm  sticky-top navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <a class="navbar-brand">brand</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link">Blog <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Projects</a>
      </li>
    </ul>
    <auth-partial>
      <ul class="nav navbar-nav">
        <li class="nav-item float-xs-right">
          <a href="#" class="nav-link">Log in</a>
        </li>
      </ul>
    </auth-partial>
  </div>
</nav>

所以它只是一个普通的导航栏,但当页面足够小时,会出现一个切换按钮,这些项目成为一个下拉列表.我一直在尝试将其迁移到UIKit,但我在他们的模板中没有看到任何选项.如果我理解正确,似乎我必须制作2个导航栏,一个用于普通视图,然后是一个较小的一个？

在导航栏的文件表明,.uk-navbar-toggle阶级和.uk-navbar-toggle-icon被添加像下面-导致切换图标-但没有一个可扩展菜单,也不能隐藏指定的菜单项引导可以做到.

<nav class="uk-navbar uk-navbar-container uk-margin">
    <div class="uk-navbar-left">
        <a …

我正在开发这个项目,其前端是React,UIkit用于用户界面.部件之间的集成看起来很难实现.我要解释原因.有一个Modal组件,类似于

export class Modal extends Component {
  static getByName = name => UIkit.modal(`[data-modal-name='${name}']`)

  static show = name => {
    const modal = Modal.getByName(name)
    if (modal) modal.show()
  }

  static hide = name => {
    const modal = Modal.getByName(name)
    if (modal) modal.hide()
  }

  render() {
    // a modal
  }
}

这是以这种方式使用的

export const LoginFormModal = props => (
  <Modal name="login-form" className="login-form-modal" hideClose>
    <LoginForm />
  </Modal>
)

在需要的地方以编程方式调用show/hide(甚至还原为redux)

Modal.hide("login-form")

这是一个Redux动作,就像这样

export const login = credentials => {
  return dispatch => { …

我无法在我的Web应用程序中使用UIkit上传组件.我已经包含了上传组件JS,占位符css和表单文件css.

直接来自文档中的示例的代码对我来说甚至都不起作用.(稍作修改)

HTML

<div id="upload-drop" class="uk-placeholder">
    <i class="uk-icon-cloud-upload uk-icon-medium uk-text-muted uk-margin-small-right"></i>
    <input class="uk-form-file" id="upload-select" type="file" accept="image/*">
</div>

JS

$(function(){
    var settings    = {
        action: 'app/components/Parts/upload.php'
    };

    var select = UIkit.uploadSelect($("#upload-select"), settings),
        drop   = UIkit.uploadDrop($("#upload-drop"), settings);
    });
});

upload.php的

<script>
    document.location.href = "/test/#/;
</script>

我需要使用Bootstrap 5DIV将一些s 放入其父容器中，无论它是body、表cell还是其他容器div，如附图所示：

如果DIVs 数量为偶数，则它们应占据可用宽度的 50%，并在单行中加上 2。或者，如果DIVs 数量为奇数，则最后一个应占用可用宽度的 100%，而所有先前的仍占用可用宽度的 50%，并按 2 放置在一行中。

最好能够更改DIVs 顺序（如移动视图示例）。

使用UIKit使用一些简单的代码来实现这一点没有问题，例如

<div class="uk-grid">
    <div class="uk-width-large-1-2">DIV 1 takes 50% of available width</div>
    <div class="uk-width-large-1-2">DIV 2 takes 50% of available width</div>
    <div class="uk-width-large-1-2">DIV 3 takes 100% of available width</div>
</div>

但无论我用 Bootstrap 的文档（以及 Stack Overflow）搜索什么，我仍然找不到解决方案。

我正在尝试将哈希值传递给 URL 以设置 UIkit 过滤器。

<div uk-filter="target:.js-filter">
    <ul>
        <li class="uk-active" uk-filter-control><a href="#">All</a></li>
        <li uk-filter-control="filter:[data-color='blue'];"><a href="#"></a></li>
        <li uk-filter-control="filter:[data-color='white'];"><a href="#"></a></li>
    </ul>
    <ul class="js-filter">
        <li data-color="blue"></li>
        <li data-color="white"></li>
    </ul>
</div>

因此，例如，如果我访问http://example.com/#white，该内容仅显示白色项目（并且“白色”过滤器控件处于活动状态）。

我找不到任何关于如何使用 UIkit 3 实现这一目标的明确示例（这是关于 UIkit 2 的）。对于像我这样的菜鸟来说，文档似乎不清楚，因为不清楚target和selActive选项所指的是什么。但是，我正在尝试以下操作：

<script>
document.addEventListener("DOMContentLoaded", function(event){
    hash = document.location.hash;
    console.log("Hash: " + hash);

    if ( hash !== "" ) {
        var filter = document.querySelector('.js-filter');

        UIkit.filter( filter, {
            target: 'li [data-color:' + hash + ']',
            selActive: true,
        });
    } …

我正在使用 UIKit 框架，它们的模式如下所示：

<div id="modal-id" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Modal Title</h2>
        </div>
        <div class="uk-modal-body">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="uk-modal-footer uk-text-right">

            <button class="uk-button uk-button-primary" type="button">Ok</button>
        </div>
    </div>
</div>

它通过一个按钮正常打开：

<a id='open-modal' uk-toggle="target: #modal-id" href="#">Open</a>

我想将其链接到按键，因此当按下 H 时，它会切换模态：

document.body.onkeyup = function(e){
    if(e.keyCode === 72){
        console.log('H key pressed');
         // Toggle Modal
    }
}

我在模态按钮 id 上使用 .trigger('click') 与 Bootstrap 一起工作，但它不适用于 UIKIT

我有Vue 2 + UIKit自动完成的问题.

UIKit自动完成模板是以下代码

<script type="text/autocomplete" v-pre>
    <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results">
        {{~items}}
            <li data-value="{{ $item.name }}">
                <a>{{ $item.name }}[{{$item.id}}]</a>
            </li>
        {{/items}}
    </ul>
</script>

但是Vue 2似乎删除了标签内的任何标签script.

那么,我该如何解决这个问题呢？

我一直在尝试向按钮添加工具提示，该提示仅在满足某些条件时显示。我正在使用uikit@3.0.0-beta.35。根据文档，我应该在beforeshow事件返回false 。

UIkit.tooltip($element, { pos: 'top' });

$element.on('beforeshow', function(){
  return false;
});

if(condition){
 UIkit.tooltip($element).show();
}

问题在于该beforeshow函数由于某种原因永远不会触发。我什至尝试了UIkit文档中提到的这种语法：

UIkit.util.on($element, 'beforeshow', function () {
  return false;
});

不幸的是，这些方法都不适合我。

我有一个简单的对话框，如下所示：

<div class="uk-modal-body">
    <h2 class="uk-modal-title">Title</h2>
    <p>Some Text....</p>
    <p class="uk-text-right">
    <button id="information-button" class="uk-button uk-button-default uk-modal-close" type="button">More Information</button>
    <button id="agree-button" class="uk-button uk-button-primary uk-modal-close" type="button">Agree</button>
    </p>
</div>

我调用它以下列方式呈现：

UIkit.modal.dialog(Popup, { 'bg-close' : false });

该对话框工作并呈现得很好，但是没有传递选项。我也试过bg-close在不同的地方传递HTML，但没有运气。

我正在尝试在 React 项目中使用 UIKit 图标。但是，它们根本不显示。我正在使用 npm 并运行以下代码：

import '../node_modules/uikit/dist/css/uikit.min.css';
import '../node_modules/uikit/dist/js/uikit.min.js';
import '../node_modules/uikit/dist/js/uikit-icons.min.js';

<span data-uk-icon="social" className="uk-text-large"/>