指南

Element-Theme-Ink

A dead simple element theme.

• Preview: element-theme-ink-preview (opens new window)
• GitHub: element-theme-ink (opens new window)
• npm: element-theme-ink (opens new window)
• unpkg: element-theme-ink (opens new window)

Base on element (opens new window) & element-theme-chalk (opens new window)

Installation

Install Element

可参见 Element 官方文档 安装 (opens new window)

npm install element-ui -S

Install Theme

npm i element-theme-ink -S
# or
yarn add element-theme-ink

Usage

ElementUI 使用方法参见官网 (opens new window)，各組件使用方法与 Element 2.3 (opens new window) 版本一致，本项目仅对主题样式进行定制。

提供多种方式导入

Stylesheet

You can use unpkg directly.

<link rel="stylesheet" href="https://unpkg.com/element-theme-ink" />

Or use css in node_modules.

<link
  rel="stylesheet"
  href="path/to/node_modules/element-theme-ink/dist/index.css"
/>

Import in Sass

@import "element-theme-ink";

Import in Javascript

Fully import

// main.js
import "element-theme-ink";

Import on demand

import "element-theme-ink/dist/input.css";
import "element-theme-ink/dist/select.css";
// ...

Import Scss

import "element-theme-ink/src/index.scss";

Example

// main.js
import Vue from "vue";
import ElementUI from "element-ui";
// 当您想要切换回 element 默认主题时，只需取消默认主题的注释，并注释 ink 主题的引入即可
// import 'element-ui/dist/theme-chalk/index.css'
import "element-theme-ink";
import App from "./App.vue";

Vue.use(ElementUI);

new Vue({
  el: "#app",
  render: (h) => h(App),
});