菜单

高级
高级用户的使用

自定义管道

导入Gulp任务 (Importing Gulp Tasks)

你不需要使用 我们的 gulp 管道,直接把任务导入你自己的 gulpfile 就可以。

你可以通过 这个例子 来看如何将 Semantic UI 任务导入到你项目中。

var gulp = require('gulp'), watch = require('./semantic/tasks/watch'), build = require('./semantic/tasks/build') ; // import task with a custom task name gulp.task('watch ui', watch); gulp.task('build ui', build);

Semantic.json 设置

自动安装 (Auto-Install)

正常运行 npm install 能使用一个交互式的安装,不使用交互式安装需要在你的 semantic.json 文件中添加 autoInstall: true

{ // install will now automatically build your project files without user interaction "autoInstall": true, // these settings may be different "base": "", "paths": { "source": { "config": "src/theme.config", "definitions": "src/definitions/", "site": "src/site/", "themes": "src/themes/" }, "output": { "packaged": "dist/", "uncompressed": "dist/components/", "compressed": "dist/components/", "themes": "dist/themes/" }, "clean": "dist/" }, "permission": false, "rtl": false, }

右到左(RTL)语言 (Right-to-left (RTL) Languages)

包含标签 rtl:true 将对 Semantic UI 用 RTLCSS 进行编译。

使用标签 rtl: 'both' 能得到 LTR 和 RTL 两个版本。

{ // builds both LTR and RTL version "rtl": "both", // these settings may be different "base": "", "paths": { "source": { "config": "src/theme.config", "definitions": "src/definitions/", "site": "src/site/", "themes": "src/themes/" }, "output": { "packaged": "dist/", "uncompressed": "dist/components/", "compressed": "dist/components/", "themes": "dist/themes/" }, "clean": "dist/" }, "permission": false, }

原型 (Prototyping with Semantic UI)

图形文件 (Sketch Files)

如果你正在寻找原型布局,请使用 Semantic UI 的Sketch,查看 Semantic UI Sketch Files

单组件

CDN发布 (CDN Releases)

单组件可以在 jsDelivr 获得。

查看所有 CDN 文件

标签发布 (Tagged Releases)

组件是在 NPM 上发布的,标签(tagged)是在 GitHub 上发布的。

在 GitHub 中查看Semantic Org

每一个组件的发布都会自动更新,同时伴随更新细节。

npm install semantic-ui-component

服务端 (Server-Side Rendering)

单组件包含 自动生成index.js 文件,来简化 NodeJS 服务端或者是Browserify依赖

npm install semantic-ui-dropdown
var dropdown = require('semantic-ui-dropdown') ; foo.dropdown();

导入LESS

LESEE仅仅发布 (LESS Only Distribution)

一个特殊的发布 Semantic-UI-LESS 能使得项目自定义整合,而不需要使用我们的构建工具。

LESS 源文件没有前缀,在使用前需要通过 autoprefixer 来运行。

导入Semantic (Importing Semantic)

semantic.less 在所有发布版本都是存在的,它是作为从其他LESS文件导入多个组件的入口。

/* Import all components */ @import 'src/semantic';

导入组件 (Importing Components)

如果你需要导入单个组件,你需要注意每个组件的作用范围,防止引起无端的继承问题。

/* Import specific components with scope */ & { @import 'src/definitions/elements/button'; } & { @import 'src/definitions/elements/list'; }

本地运行文件

下载文件服务器 (Download Docs Server)

获取 Semantic UI 文档 最简单的方法是克隆。

git clone https://github.com/Semantic-Org/Semantic-UI-Docs.git

安装依赖 (Install Dependencies)

Semantic UI 的文档是在 Docpad 中写的,这是一个惊人的在 NodeJS 建立的静态网站生成器。

cd docs/ npm install

关于路径的注释 (A Note About Paths)

Semantic UI 的 构建工具 包含两个对文档使用的特殊命令: build-docsserve-docs。这将把 ui/ 文件夹下的更新直接转到服务器。

这些 gulp 任务包含两个同级文件夹:

ui/
来自 semantic ui 中的文件
docs/
来自 docs 中的文件

构建UI (Build UI)

第一次运行文档的时候需要对整个项目进行一次构建

cd ui/ gulp build-docs

运行服务 (Run Docpad Server)

Docpad

cd docs/ # initial build may take several minutes docpad run

提交UI (Serve UI to Docs)

然后,你可以继续修改UI和“提交(serve)”这些文件到文档实例,就能立即看到你的更改了。

cd ui/ gulp serve-docs

托管文档 (Hosted Docs)

如果你在管理你的文档,你可以使用一个叫做 docpad gh-pages 的插件来自动提交到 GitHub 页面上。

更多信息可以查看 docs on GitHub

docpad deploy-ghpages --env static

自定义文档路径 (Custom Docs Paths)

文档任务路径在 tasks/config/docs.js 中,可以修改到你项目需要的任何位置。