Name: Keen UI
Author: 羊先生

快速了解

完整资料

资料已展开

关于 Keen UI

一个拥有简单 API 的 Vue.js UI 库，灵感来自 Google 的 Material Design，不是一个 CSS 框架。因此，它不包括网格系统、字体等的样式。相反，重点是需要 Javascript 的交互式组件。你应该能够在任何页面布局、结构或 CSS 框架中使用 Keen UI

安装

js 复制代码

npm install keen-ui --save

用法

在使用 Keen UI 之前，请确保将以下 CSS 重置应用于您的站点。

css 复制代码

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

可以将 reset 添加到样式表(在其他样式之前)。如果您使用的是 CSS 框架，请检查该框架是否已经包含重置(大多数 CSS 框架都包含重置)。在 < html > 上设置的根字体大小可以定制为全局调整组件的大小

ES6

作为 Vue 插件使用(全局注册所有组件) :

js 复制代码

import Vue from 'vue';
import KeenUI from 'keen-ui';
import 'keen-ui/dist/keen-ui.css';

Vue.use(KeenUI);

new Vue({
    components: {
        // all Keen UI components already registered
    }
});

使用单独的组件:

js 复制代码

import Vue from 'vue';
import { UiAlert, UiButton } from 'keen-ui';

new Vue({
    components: {
        UiAlert,
        UiButton
    }
});

浏览器引入

首先，在 dist/Keen-UI 中添加一个样式表链接到 Keen UI CSS 文件。Min.css.然后，添加指向 dist/keen-ui 的脚本标记。在添加了 Vue 之后使用 min.js。

如果 Keen UI 检测到全局 Vue 对象，则所有组件将自动注册。这些组件也将通过窗口在全球范围内提供。基尼

html 复制代码

<!-- Place this in <head> -->
<link rel="stylesheet" href="path/to/keen-ui.min.css">

<!-- Place this in <body> -->
<div id="app">
    <ui-button>Hello world!</ui-button>
</div>

<script src="path/to/vue.js"></script>
<script src="path/to/keen-ui.min.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {
            // all Keen UI components already registered
        }
    });
</script>

适合的使用方向

安装

一个拥有简单 API 的 Vue.js UI 库，灵感来自 Google 的 Material Design，不是一个 CSS 框架

用法

因此，它不包括网格系统、字体等的样式

ES6

相反，重点是需要 Javascript 的交互式组件

收录线索

Node.jsuiUI框架Material DesignKeen UI库 / 框架

资料说明

内容根据公开资料整理；版本、兼容性与服务状态请以官网最新说明为准。