Getting Started
Install and render your first component
最短で導入するなら、まず nimble install tiara を実行してから tiara/components/toast を読み込みます。
nimble install tiara
Documentation
使い始めるための導線、コンポーネント探索、カスタマイズの入口を 1 ページにまとめています。 下の検索ボックスから、インストール方法やコンポーネントのトピックをすぐに絞り込めます。 さらにそのまま下へ進むと、主要コンポーネントの live demo も確認できます。
Install with Nimble
nimble install tiara
website、tests、docs、examples は配布物から除外されるため、
軽量に導入できます。
Search
Getting Started
最短で導入するなら、まず nimble install tiara を実行してから tiara/components/toast を読み込みます。
nimble install tiara
Component Guide
通知 UI の最小例です。SSR のレスポンスにそのまま差し込める構成になっています。
import tiara/components/toast
let myToast = renderToast(
message = "Ready to deploy!",
position = "bottom-right"
)
Docs Search
このページの検索ボックスでは、ガイド名・用途・キーワードを横断して絞り込めます。新しいユーザーが迷いにくい構成です。
Customization
tiara/components/defaultStyles.nim を起点に、ブランドカラーや UI トーンを段階的に置き換えられます。
Docs Source
/docsリポジトリの docs/getting-started.md と website の導線を揃えておくと、Nimble と GitHub の両方から理解しやすくなります。
No matching documentation sections.
Components
ここでは主要な demo を抜粋表示しています。完全な一覧と interactive showcase は /components にまとめています。
Component demo
CTA と補助アクション、状態バッジの組み合わせをそのまま確認できます。
import tiara/components
let toolbar = tc.joinHtml([
Tiara.button("Create project", attrs = @[("type", "button")]),
Tiara.button("Preview docs", color = "secondary", attrs = @[("type", "button")]),
Tiara.badge("Stable", tone = "success")
])Component demo
情報量が多い説明でも、本文と footer を分けて読みやすく配置できます。
Website docs, searchable guides, and install snippets now ship from the same Tiara package.
import tiara/components
let summary = Tiara.card(
title = "Release summary",
content = tc.el("p", tc.textNode("Docs and package output stay aligned.")),
footer = Tiara.button("Read getting started", attrs = @[("type", "button")]),
variant = "glass"
)Component demo
インストール手順やサンプルコードを terminal 風の見た目で見せられます。
nimble install tiara
nimble test
nim c -r examples/preview.nimimport tiara/components
let install = Tiara.codeBlock(
"nimble install tiara",
title = "install.sh",
chrome = "terminal"
)Component demo
完了通知や警告を軽量に差し込めます。docs では静的プレビューとして開いた状態を表示しています。
import tiara/components
let notice = Tiara.toast(
title = "Deployment ready",
message = "Static preview for the docs page.",
tone = "success"
)Install
ドキュメントの最上部にコマンドをコードブロックで見せることで、初回訪問時の次アクションが明確になります。
nimble install tiara