Aurelia 和 Semantic UI - 自定义主题

Question

我正在使用 TypeScript 构建一个 Aurelia 应用程序，并决定试用 Semantic UI。我关注了这个问题 ()，它帮助我将 Semantic 安装到 Aurelia 中。似乎已经安装了默认主题。有没有一种方法可以将语义安装到 Aurelia TypeScript 应用程序中，然后添加一些自定义 gulp 任务以根据我自己的 theme.config 构建？我还想覆盖一些变量，如颜色、字体大小等。构建后，我想在 Aurelia 视图模型 (TypeScript) 和我的视图中使用构建版本。我怎样才能做到这一点？

Answer 1

这是我解决这个问题的方法：

使用 npm
将语义文件夹和 semantic.json 复制到 Web 应用程序根文件夹（因此语义文件夹位于我拥有 node_modules 和 jspm_packages 的级别）
在 semantic.json 中，我指定了要包含在我的应用程序中的组件列表
在 semantic.json 中，我修改了 "output" 和 "clean" 路径以匹配我提供文件的文件夹。

semantic.json:

{
    "base": "semantic",
    "paths": {
        "source": {
            "config": "src/theme.config",
            "definitions": "src/definitions/",
            "site": "src/site/",
            "themes": "src/themes/"
        },
        "output": {
            "packaged": "../dist/semantic",
            "uncompressed": "../dist/semantic/components/",
            "compressed": "../dist/semantic/components/",
            "themes": "../dist/semantic/themes/"
        },
        "clean": "../dist/semantic"
    },
    "permission": false,
    "autoInstall": false,
    "rtl": false,
    "version": "2.2.4",
    "components": [
        "button",
        ...
        "site"
    ]
}

在 Aurelia 的 gulp 定义中，我添加了语义构建任务

build/tasks/build.js:

var buildSemantic = require('../../semantic/tasks/build');
gulp.task('build-semantic', buildSemantic);
...
gulp.task('build-layout', function (callback) {
    return runSequence(
        'build-html',
        'build-semantic',
        'build-less',
        callback
    );
});

编码时，我进入语义 src（例如 semantic\src\themes\default\globals\site.variables）并修改其中的内容
运行 gulp build-layout
输出已添加到我的 dist 文件夹中，我可以在我的视图中使用它

至于视图模型，我创建了一些辅助组件用作 aurelia 属性，例如语义工具提示：

import {customAttribute, inject} from 'aurelia-framework';
import * as $ from 'jquery';
import '../semantic/semantic.min.js';

@customAttribute('semantic-tooltip')
@inject(Element)
export class SemanticTooltip {
    constructor(private element: HTMLElement) {
    }

    attached() {
        $(this.element).popup();
    }
}

用法：

<i class="info circle icon" data-content="Sample tooltip" semantic-tooltip></i>

Aurelia 和 Semantic UI - 自定义主题

Aurelia and Semantic UI - custom theme

semantic-ui

aurelia