ページごとに1つの小さな広告しか表示しないことをお約束します。ご心配なく、このメッセージを非表示にすれば、二度と煩わされることはありません。
カスタムパイプライン
Gulpタスクのインポート
私たちのgulpパイプラインを使用する必要はありません。タスクを独自のgulpfileにインポートするだけです。
Semantic UIタスクをプロジェクトにインポートする方法の例については、このサンプルプロジェクトをフォークしてください。
var gulp = require('gulp'), watch = require('./semantic/tasks/watch'), build = require('./semantic/tasks/build') ; // カスタムタスク名でタスクをインポート gulp.task('watch ui', watch); gulp.task('build ui', build);
Semantic.jsonの設定
自動インストール
通常npm installを実行するとインタラクティブインストーラーが起動しますが、このインストーラーをユーザーの操作なしで実行できるようにするには、semantic.jsonファイルに特別なフラグautoInstall: trueを含めます。
{ // インストールはユーザーの操作なしで自動的にプロジェクトファイルをビルドするようになります "autoInstall": true, // これらの設定は異なる場合があります "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）言語
フラグrtl:trueを含めると、RTLCSSを使用してSemantic UIがビルドされます。
LTRとRTLの両方のバージョンをビルドするには、フラグrtl: 'both'を使用します。
{ // LTRとRTLの両方のバージョンをビルドする "rtl": "both", // これらの設定は異なる場合があります "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, }
Semantic UIでのプロトタイピング
単一コンポーネント
タグ付きリリース
コンポーネントリポジトリはNPMでリリースされ、GitHubでタグ付きリリースとしてリリースされます。
GitHubのSemantic Orgで利用可能なリポジトリのリストを確認してください。
各コンポーネントのリリースノートは、メインリリースからのそのコンポーネントに関連するノートで自動的に更新されます。
npm install semantic-ui-component
サーバーサイドレンダリング
個々のコンポーネントリポジトリには、NodeJSでのサーバーサイドレンダリングやBrowserifyでのrequireの使用を簡素化するために、自動生成されたindex.jsファイルが含まれています。
npm install semantic-ui-dropdown
var dropdown = require('semantic-ui-dropdown') ; foo.dropdown();
LESSのインポート
LESSのみのディストリビューション
カスタム統合を使用し、ビルドツールを必要としないプロジェクト向けに、特別なディストリビューションSemantic-UI-LESSが利用可能です。
Semanticのインポート
semantic.lessは、他のLESSファイルから複数のコンポーネントをインポートするためのエントリポイントとして、すべてのリリースで利用可能です。
/* すべてのコンポーネントをインポート */ @import 'src/semantic';
コンポーネントのインポート
個々のコンポーネントをインポートする必要がある場合は、継承の問題を回避するために各インポートをスコープする必要があります。
/* スコープ付きで特定のコンポーネントをインポート */ & { @import 'src/definitions/elements/button'; } & { @import 'src/definitions/elements/list'; }
ドキュメントをローカルで実行する
ドキュメントサーバーをダウンロード
Semantic UIドキュメントを入手する最も簡単な方法は、リポジトリをクローンすることです。
git clone https://github.com/Semantic-Org/Semantic-UI-Docs.git
依存関係をインストール
Semantic UIのドキュメントは、NodeJSで構築された素晴らしい静的サイトジェネレーターであるDocpadで書かれています。
cd docs/ npm install
パスに関する注意
Semantic UIのビルドツールには、ドキュメントで使用するための2つの特別なコマンドbuild-docsとserve-docsが含まれています。これにより、ui/フォルダーからの変更がライブドキュメントサーバーに直接渡されます。
これらのgulpタスクは、2つの兄弟フォルダーを想定しています。
ui/
semantic uiリポジトリからのファイル
docs/
docsリポジトリからのファイル
UIをビルド
初めてドキュメントを実行する場合は、プロジェクト全体を一度ビルドする必要があります。
cd ui/ gulp build-docs
Docpadサーバーを実行
Docpad
cd docs/ # 初回のビルドには数分かかる場合があります docpad run
UIをドキュメントに提供
その後、UIに継続的に変更を加え、これらのファイルをライブドキュメントインスタンスに「提供」して、変更をすぐに確認できます。
cd ui/ gulp serve-docs
ホストされたドキュメント
ドキュメントを管理している場合は、組み込みのdocpad gh-pagesプラグインを使用してGitHub Pagesに自動的にデプロイできます。
GitHub Pagesの詳細については、GitHubのドキュメントを確認してください。
docpad deploy-ghpages --env static
カスタムドキュメントパス
ドキュメントタスクのパスは、ファイルtasks/config/docs.jsで指定されており、プロジェクトに必要なフォルダーセットアップを使用するように調整できます。