Question

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

Answer 1

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

使用npm
将语义文件夹和semantic.json复制到Web应用程序根文件夹（因此语义文件夹位于我node_modules和jspm_packages）的级别
内部semantic.json我指定了要包含在我的应用中的组件列表
内部semantic.json我修改了＆＃34;输出＆＃34;和＆＃34;清洁＆＃34;路径以匹配我提供文件的文件夹。

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 - 自定义主题

1 个答案: