Trinity.css Components Reference

このページでは、Trinity.cssフレームワークで利用可能なすべてのコンポーネントを文書化しています。

メニュー項目をクリックすると、対応するコンポーネントにジャンプします。

Window

アプリケーションのUIのメインコンテナ。

サンプルウィンドウ

これはウィンドウのコンテンツです。

<div class="window">
  <div class="title-bar">
    <div class="title-bar-text">サンプルウィンドウ</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body">
    <div class="content-area">
      <p>これはウィンドウのコンテンツです。</p>
    </div>
  </div>
</div>

Title Bar

ウィンドウのタイトルとコントロールを表示するバー。

マイウィンドウタイトル

<div class="title-bar">
  <div class="title-bar-text">マイウィンドウタイトル</div>
  <div class="title-bar-controls">
    <button aria-label="Minimize"></button>
    <button aria-label="Maximize"></button>
    <button aria-label="Close"></button>
  </div>
</div>

Menu Bar

ウィンドウの上部に表示される水平メニュー。

<ul class="menu-bar">
  <li class="has-dropdown">
    <u>F</u>ile
    <ul class="dropdown">
      <li><u>N</u>ew</li>
      <li><u>O</u>pen...</li>
      <li class="separator"></li>
      <li><u>S</u>ave</li>
    </ul>
  </li>
  <li><u>E</u>dit</li>
  <li><u>H</u>elp</li>
</ul>

Tabs

タブパネルとして知られる、コンテンツのレイヤー化されたセクションのセットで、一度に1つずつ表示されます。

タブ 1
タブ 2

これはタブ 1 のコンテンツです。

<div class="tab-container">
  <ul class="tab-list">
    <li class="active">タブ 1</li>
    <li>タブ 2</li>
  </ul>
  <div class="tab-content">
    これはタブ 1 のコンテンツです。
  </div>
</div>

Progress Bar

タスクの進行状況を視覚的に示すインジケーター。

<div class="progress-bar">
  <div style="width: 45%;"></div>
</div>

Status Bar

アプリケーションの現在の状態に関する情報を表示するウィンドウ下部のバー。

ステータス: OK

アイテム 1/5

<div class="status-bar">
  <p class="status-bar-field">ステータス: OK</p>
  <p class="status-bar-field">アイテム 1/5</p>
</div>

Buttons

標準のプッシュボタン。

<button>標準ボタン</button>
<button class="default">OK</button>
<button disabled>無効ボタン</button>

Inputs

標準のテキストおよびパスワード入力フィールド。

テキスト入力:

パスワード:

<div class="field-row">
  <label for="text-input-ref">テキスト入力:</label>
  <input id="text-input-ref" type="text" placeholder="テキストを入力...">
</div>
<div class="field-row">
  <label for="password-input-ref">パスワード:</label>
  <input id="password-input-ref" type="password" value="password">
</div>

Select

ドロップダウンリスト。

オプションを選択:

<div class="field-row">
  <label for="select-ref">オプションを選択:</label>
  <select id="select-ref">
    <option>オプション 1</option>
    <option>オプション 2</option>
    <option>オプション 3</option>
  </select>
</div>

Textarea

複数行のテキスト入力コントロール。

コメントを入力:

<div class="field-row-stacked">
  <label for="textarea-ref">コメントを入力:</label>
  <textarea id="textarea-ref" rows="4"></textarea>
</div>

Checkbox & Radio Buttons

選択を行うためのコントロール。

機能を有効にする

選択肢 A

選択肢 B

<!-- チェックボックス -->
<div class="field-row">
  <input type="checkbox" id="checkbox-ref" checked>
  <label for="checkbox-ref">機能を有効にする</label>
</div>

<!-- ラジオボタン -->
<div class="field-row">
  <input type="radio" id="radio1-ref" name="radio-ref" checked>
  <label for="radio1-ref">選択肢 A</label>
</div>
<div class="field-row">
  <input type="radio" id="radio2-ref" name="radio-ref">
  <label for="radio2-ref">選択肢 B</label>
</div>

Group Box

関連するコントロールをグループ化するためのタイトル付きコンテナ。

オプショングループ

グループボックス内のいくつかのコントロール。

<fieldset class="group-box">
  <legend>オプショングループ</legend>
  <p>グループボックス内のいくつかのコントロール。</p>
</fieldset>

Slider

範囲から値を選択するためのコントロール。

音量:

<div class="field-row">
  <label for="slider-ref">音量:</label>
  <input type="range" id="slider-ref" min="0" max="100" value="50">
</div>

Tooltip

ユーザーが要素の上にマウスを置くと表示される小さなポップアップボックス。

<button data-tooltip="これはツールチップです！">マウスを上に置いてください</button>

List View

選択可能なアイテムのリスト。

名前サイズ
ファイル1.txt 10 KB
画像.png 125 KB
アーカイブ.zip 2.3 MB

<ul class="list-view">
  <li class="list-header">
    <span>名前</span>
    <span>サイズ</span>
  </li>
  <li class="active">
    <span>ファイル1.txt</span>
    <span>10 KB</span>
  </li>
  <li>
    <span>画像.png</span>
    <span>125 KB</span>
  </li>
  <li>
    <span>アーカイブ.zip</span>
    <span>2.3 MB</span>
  </li>
</ul>

Dialog

メインコンテンツの上に表示されるモーダルウィンドウ。

<!-- ダイアログをトリガーするボタン -->
<button id="show-dialog-btn-ref">ダイアログを表示</button>

<!-- ダイアログボックス -->
<div class="overlay" id="dialog-overlay-ref">
  <div class="window dialog">
    <div class="title-bar">
      <div class="title-bar-text">ダイアログタイトル</div>
      <div class="title-bar-controls">
        <button aria-label="Close" class="dialog-close-btn-ref"></button>
      </div>
    </div>
    <div class="window-body">
      <p>これはダイアログボックスです。</p>
      <div class="field-row" style="justify-content: center; margin-top: 15px;">
        <button class="dialog-close-btn-ref">閉じる</button>
      </div>
    </div>
  </div>
</div>

Toast

短時間表示される小さな非モーダル通知。

<!-- トーストをトリガーするボタン -->
<button id="show-toast-btn-ref">トーストを表示</button>

<!-- 通知トースト -->
<div class="toast" id="my-toast-ref">
  <p>これはトースト通知です！</p>
</div>

Spinner

ロード中または処理中の状態を示すアニメーションインジケーター。

<!-- スピナーをトリガーするボタン -->
<button id="show-spinner-btn-ref">スピナーを表示</button>

<!-- スピナー -->
<div class="spinner" id="my-spinner-ref">
  <div class="spinner-inner"></div>
</div>

Scrollbar

スクロールバーはWebKitおよびFirefoxブラウザ用に自動的にスタイルが設定されます。このスタイルは、メインボディを含むスクロール可能なすべての要素に適用されます。

/* カスタムスクロールバースタイル (WebKitブラウザ用) */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background-color: var(--tde-button-bg-end);
  border: 1px solid;
  border-color: var(--tde-3d-border-dark) var(--tde-3d-border-light) var(--tde-3d-border-light) var(--tde-3d-border-dark);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--tde-button-bg-start), var(--tde-button-bg-end));
  border: 1px solid;
  border-color: var(--tde-3d-border-light) var(--tde-3d-border-dark) var(--tde-3d-border-dark) var(--tde-3d-border-light);
}

/* Firefoxスクロールバー (限定的なスタイリング) */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--tde-button-bg-end) var(--tde-button-bg-start);
}

Card / Panel

関連コンテンツをグループ化するための汎用コンテナ。

カードタイトル

これはカード内のコンテンツです。

<div class="card">
  <h3>カードタイトル</h3>
  <p>これはカード内のコンテンツです。</p>
  <button>カードボタン</button>
</div>

Accordion / Collapsible

コンテンツを折りたたみ可能なセクションに整理します。

セクション 1 ヘッダー

セクション 1 のコンテンツ。

セクション 2 ヘッダー

セクション 2 のコンテンツ。

アイテム A
アイテム B

<div class="accordion-item">
  <div class="accordion-header">セクション 1 ヘッダー</div>
  <div class="accordion-content">
    <p>セクション 1 のコンテンツ。</p>
  </div>
</div>

Table

クリアなヘッダーと行で表形式データを表示します。

ヘッダー 1	ヘッダー 2	ヘッダー 3
データ 1A	データ 1B	データ 1C
データ 2A	データ 2B	データ 2C
データ 3A	データ 3B	データ 3C

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>ヘッダー 1</th>
        <th>ヘッダー 2</th>
        <th>ヘッダー 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ 1A</td>
        <td>データ 1B</td>
        <td>データ 1C</td>
      </tr>
    </tbody>
  </table>
</div>

Alert / Message Box

ユーザーに状況に応じたフィードバックメッセージを提供します。

これは**情報**アラートメッセージです。

これは**成功**アラートメッセージです。

これは**警告**アラートメッセージです。

これは**エラー**アラートメッセージです。

<div class="alert alert-info">これは<strong>情報</strong>アラートメッセージです。</div>
<div class="alert alert-success">これは<strong>成功</strong>アラートメッセージです。</div>
<div class="alert alert-warning">これは<strong>警告</strong>アラートメッセージです。</div>
<div class="alert alert-error">これは<strong>エラー</strong>アラートメッセージです。</div>

Taskbar

デスクトップの端に配置され、アプリケーションの起動と管理に使用されるパネル。

アプリケーション 1

アプリケーション 2

<div class="taskbar">
  <button class="taskbar-start-button">スタート</button>
  <div class="taskbar-item active">アプリケーション 1</div>
  <div class="taskbar-item">アプリケーション 2</div>
</div>

Desktop

ウィンドウやアイコンが配置されるメインの背景領域。

マイコンピュータ

ゴミ箱

<div class="desktop-demo">
  <div class="desktop-icon" style="top: 10px; left: 10px;">
    <img src="path/to/icon.png" alt="マイコンピュータ">
    <span>マイコンピュータ</span>
  </div>
  <div class="desktop-icon" style="top: 10px; left: 100px;">
    <img src="path/to/icon.png" alt="ゴミ箱">
    <span>ゴミ箱</span>
  </div>
</div>

Movable Window

ウィンドウはデスクトップ上でドラッグして再配置できます。

ドラッグしてください！

このウィンドウをタイトルバーでドラッグしてみてください。

<div class="window" id="my-draggable-window">
  <div class="title-bar">
    <div class="title-bar-text">ドラッグしてください！</div>
    <!-- コントロール -->
  </div>
  <div class="window-body">
    <!-- コンテンツ -->
  </div>
</div>
<!-- 対応するJavaScript -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const windowElement = document.getElementById('my-draggable-window');
    const titleBar = windowElement.querySelector('.title-bar');
    let isDragging = false;
    let xOffset, yOffset;

    titleBar.addEventListener('mousedown', dragStart);

    function dragStart(e) {
      if (e.button === 0) {
        isDragging = true;
        xOffset = e.clientX - windowElement.getBoundingClientRect().left;
        yOffset = e.clientY - windowElement.getBoundingClientRect().top;
        windowElement.style.transition = 'none';
        windowElement.style.cursor = 'grabbing';
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', dragEnd);
      }
    }

    function drag(e) {
      if (!isDragging) return;
      e.preventDefault();
      const newX = e.clientX - xOffset;
      const newY = e.clientY - yOffset;
      windowElement.style.left = `${newX}px`;
      windowElement.style.top = `${newY}px`;
    }

    function dragEnd() {
      isDragging = false;
      windowElement.style.transition = '';
      windowElement.style.cursor = 'grab';
      document.removeEventListener('mousemove', drag);
      document.removeEventListener('mouseup', dragEnd);
    }
  });
</script>