Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/YunYouJun/element-theme-ink
✒️ Element theme ink. (Support Element-Plus)
https://github.com/YunYouJun/element-theme-ink
element-plus element-ui theme
Last synced: 2 months ago
JSON representation
✒️ Element theme ink. (Support Element-Plus)
- Host: GitHub
- URL: https://github.com/YunYouJun/element-theme-ink
- Owner: YunYouJun
- License: mit
- Created: 2018-02-24T16:15:20.000Z (almost 7 years ago)
- Default Branch: dev
- Last Pushed: 2021-09-29T11:59:40.000Z (over 3 years ago)
- Last Synced: 2024-05-19T10:03:31.619Z (8 months ago)
- Topics: element-plus, element-ui, theme
- Language: SCSS
- Homepage: https://ink.elpsy.cn
- Size: 931 KB
- Stars: 20
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - YunYouJun/element-theme-ink - ✒️ Element theme ink. (Support Element-Plus) (SCSS)
- awesome - YunYouJun/element-theme-ink - ✒️ Element theme ink. (Support Element-Plus) (SCSS)
README
Element-Theme-Ink
# Ink
[](https://github.com/YunYouJun/element-theme-ink/actions/workflows/docs.yml)
> A dead simple element theme.
- [Docs](https://ink.yunyoujun.cn/)
- [New Docs(rewrite with vitepress)](https://ink.elpsy.cn/)
- GitHub: [element-theme-ink](https://github.com/YunYouJun/element-theme-ink)
- npm: [element-theme-ink](https://www.npmjs.com/package/element-theme-ink)
Base on [element](https://github.com/ElemeFE/element) & [element-theme-chalk](https://github.com/ElementUI/theme-chalk)
## Installation
### Install Element
可参见 Element 官方文档 [安装](http://element-cn.eleme.io/#/zh-CN/component/installation)
```sh
npm install element-ui -S
```
### Install Theme
```shell
npm i element-theme-ink -S
# or
yarn add element-theme-ink
```
## Usage
ElementUI 使用方法参见[官网](http://element.eleme.io/)，各組件使用方法与 [Element 2.3](http://element.eleme.io/2.3/#/zh-CN/component/installation) 版本一致，本项目仅对主题样式进行定制。
提供多种方式导入
### Stylesheet
- JSDelivr:
You can use unpkg directly.
```html
```
Or use css in node_modules.
```html
```
### Import in Sass
```scss
@import "element-theme-ink";
```
### Import in Javascript
#### Fully import
```javascript
// main.js
import "element-theme-ink";
```
#### Import on demand
```javascript
import "element-theme-ink/dist/input.css";
import "element-theme-ink/dist/select.css";
// ...
```
#### Import Scss
```js
import "element-theme-ink/src/index.scss";
```
## Example
```js
// 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),
});
```
## Dev
### Cache
```bash
gulp combine
# gulp build
```