PitaCSS(α)
PitaCSS(α)

目次

更新日：2025年6月19日

JavaScript

PitaCSSのJavaScriptはバニラJSで記述されているため、フレームワーク、ライブラリへの依存がなく、なおかつ軽量です。

プログレスローダー

progress.gif

ページのローディングを監視して、整合性の取れたローディングプログレスバーをページ上部に表示します

JavaScriptの設定は不要です

CSSで以下のような設定をしてください。設定しないと初期状態では一部スタイルがついていおらず、不格好な表示になります。

heightなど、値はカスタマイズ可能です。

#progress {
    height: 4px;
    z-index: 1000;
    width: 100%;
}

無効化

インポート構文の前に無効化コードを書いてください。

window.progressLoader = { disabled: true }

Vue

onMounted(async () => {
    window.progressLoader = { disabled: true }

    await import('pita-css/js')
});

ナビゲーション

ナビゲーション系のJavaScriptは無効にできません。

ドロップダウンメニュー

以下のような、aside直下のネストされたリストが「ドロップダウンメニュー」になります。

<aside>
  <div class="aside-header">
  <!-- ヘッダー要素 -->
  </div>

  <ul>
    <li>
      <!-- ネストされたメニュー -->
      <ul>
        <li>ドキュメント</li>
      </ul>
    </li>
  </ul>
</aside>

s3.png

JavaScript、CSSともに設定は完全に不要です。

ハンバーガーメニュー(Toggle menu)

JavaScriptでサイドバーのナビゲーションをレスポンシブ化します。そのためには以下の要素が必要です

<div>
        <!-- 必須 BEGIN -->
        <button class="nav-toggle">☰</button>

        <div class="nav-overlay"></div>

        <!-- END -->

        <aside>
            <!-- ナビヘッダー -->

            <!-- メニューリスト -->
        </aside>
</div>

ハンバーガーメニューが表示されている端末だと、ページを開いたら自動でメニューをクローズしてくれる機能があります。(Auto Close) SPA(CSR)にも対応しております

テーマ切り替え(ダークテーマ)

JavaScript、CSSともに設定は完全に不要です。

ダークテーマとライトテーマを切り替えられます。 標準はシステムのテーマです。

ローカルストレージに前回どのテーマを選択したか保存されます。次回アクセス時はその保存されたテーマが適応されます。

使い方

ボタンで切り替える場合。(自動でトグルになります)

theme-toggle.gif

<button data-theme-toggle >🔄</button>

セレクトボックスの場合、data-theme-selectをselect要素につけ、 option要素のvalue属性に下のコードのように入力してください。

<select data-theme-select >
  <option value="auto">💻 システム設定</option>
  <option value="light">☀️ ライト</option>
  <option value="dark">🌙 ダーク</option>
</select>

無効化

インポート構文の前に無効化コードを書いてください。

window.pitaTheme = { disabled: true };

Vue

onMounted(async () => {
    window.pitaTheme = { disabled: true };

    await import('pita-css/js')
});

タブコンポーネント (Tabs)

JavaScript、CSSともに設定は完全に不要です。

activeクラスが付いてる場合、そのタブがアクティブになります。 このactiveクラスはtabs-nav内のボタンを押下することで自動で制御されます。

例

test2

コード

<div class="tabs">
  <div class="tabs-nav">
    <button class="tab-button active" aria-selected="true">タブ1</button>
    <button class="tab-button" aria-selected="false">タブ2</button>
    <button class="tab-button" aria-selected="false">タブ3</button>
  </div>
  <div class="tabs-content">
    <div class="tab-panel active" aria-hidden="false">
      <p>ここにタブ1の内容が入ります。</p>
    </div>
    <div class="tab-panel" aria-hidden="true">
      <p>ここにタブ2の内容が入ります。</p>
    </div>
    <div class="tab-panel" aria-hidden="true">
      <p>ここにタブ3の内容が入ります。</p>
    </div>
  </div>
</div>

Vueコンポーネント化

<template>
    <div class="tabs">
        <div class="tabs-nav">
            <button v-for="(tab, index) in tabs" :key="index" class="tab-button"
                :class="{ active: activeTab === index }" :aria-selected="activeTab === index"
                @click="setActiveTab(index)">
                {{ tab.title }}
            </button>
        </div>
        <div class="tabs-content">
            <div v-for="(tab, index) in tabs" :key="index" class="tab-panel" :class="{ active: activeTab === index }"
                :aria-hidden="activeTab !== index">
                <slot :name="`tab-${index}`" :tab="tab">
                    <h3>{{ tab.title }}</h3>
                    <p>{{ tab.content }}</p>
                </slot>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    tabs: {
        type: Array,
        default: () => [
            { title: 'タブ1', content: 'ここにタブ1の内容が入ります。' }
        ]
    },
    defaultTab: {
        type: Number,
        default: 0
    }
})

const activeTab = ref(props.defaultTab)

const setActiveTab = (index) => {
    activeTab.value = index
}
</script>

Vueコンポーネント(使用時)

<template>
  <div>
    <Tabs :tabs="tabsData" :default-tab="0">
      <template #tab-0>
        <pre><code>
test0
        </code></pre>
      </template>
  
      <template #tab-1>
        <pre><code>
        test2
        </code></pre>
      </template>
    </Tabs>
  </div>
</template>

<script setup>
const tabsData = [
  { title: 'test0' },
  { title: 'test1' },
]
</script>

無効化

インポート構文の前に無効化コードを書いてください。

window.pitaTabs = { disabled: true };