# Framework7デザインシステム

## Framework7デザインシステムのインターフェースプレビュー

学習項目のネイティブなSwipeoutアクションを開き、スケッチ済みにして、フィルター後のリストを確認してください。

## Framework7デザインシステムのデザインリファレンス

Framework7 Core/Vue 9.2.0を明示的なiOSモードで使用。以下のテーマカラーは初期化後にレンダリング済みドキュメントで検証しました。リストとタイポグラフィの値は、同梱のiOSスタイルシートに基づいています。オリジナルのノート用イラストと外側のレイアウトは、別途示しています。

### 解決済みのiOSテーマカラー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --f7-theme-color | #007aff | 実際のiOSドキュメントで検証したデフォルトのプライマリカラー。 |
| --f7-theme-color-rgb | 0, 122, 255 | アルファ計算用のRGBチャンネル。 |
| --f7-theme-color-shade | #0066d6 | プライマリカラーから派生したシェード。 |
| --f7-theme-color-tint | #298fff | プライマリカラーから派生したティント。 |
| colors.green | #4cd964 | Swipeoutの完了状態に使われるデフォルトの名前付きグリーンカラー。 |
| colors.red | #ff3b30 | デフォルトの赤のロール参照。この例に破壊的なアクションはありません。 |
| --f7-text-color | #000 | ネイティブiOSのデフォルトテキスト。元のページの文章には #26343f を使用。 |
### ネイティブiOSのテキストとリストの寸法

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --f7-font-size | 14px | フレームワークの基本テキストサイズ。 |
| --f7-font-family | -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif | 同梱のiOSプラットフォームスタック。 |
| --f7-line-height | 1.4 | iOSの基本行の高さ。 |
| --f7-list-font-size | 17px | ネイティブiOSのリストテキスト。 |
| --f7-list-item-padding-vertical | 12px | ネイティブの行インセット。 |
| --f7-list-item-padding-horizontal | 16px | ネイティブの水平方向の内側余白。 |
| --f7-list-item-min-height | 52px | ネイティブiOSの最小行高。 |
| --f7-list-item-media-margin | 16px | ネイティブのメディア間隔。 |
| --f7-list-inset-border-radius | 24px | ネイティブなインセットリストの角丸参照。 |
| --f7-list-item-subtitle-font-size | 15px | デフォルト値。元の実例ではサブタイトルを11pxに上書き。 |
| --f7-list-item-text-font-size | 15px | デフォルト値。元の実例では説明文を12pxに上書き。 |
| --f7-list-item-text-line-height | 21px | ネイティブのデフォルトの説明文行高。 |
### オリジナルの埋め込み構成を明示

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Page title | 35px / 1.15; 29px narrow | オリジナルの階層構造。 |
| Advice title | Georgia, serif; 29px | オリジナルのエディトリアル見出し。 |
| Page/grid spacing | 32px page; 26px columns; 28px hero-to-grid | オリジナルのアプリケーション値。 |
| Main panel | 22px inset; 16px narrow; 16px radius | オリジナルのフレーミング。ネイティブなインセットリストのデフォルト値とは独立しています。 |
| Grid breakpoint | 780px | アドバイスパネルをスケッチリストの下に配置する。 |
| Artwork | 48×62px list thumbnails; 170px tall route illustration | オリジナルのCSS。マップや画像サービスは使用しません。 |
| Embedding reset | html/body/#app/.framework7-root height:auto; min-height:0 | 実例に合わせた明示的な調整であり、全画面アプリのガイダンスではありません。 |
## Framework7デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Framework7デザインシステムはコンポーネントだけでなく、アプリの動作も提供

### Framework7はコンポーネントだけでなく、アプリの動作も提供

> Framework7のVue連携は、コアのアプリケーションランタイム上で動作します。エントリーポイントではVueをマウントする前にFramework7へFramework7Vueをインストールし、f7-appがスワイプアウト動作を担うアプリケーションを初期化します。スタイル付きのVueラッパーをいくつかインポートするだけでは、このネイティブのインタラクション層は利用できません。

このサンプルは範囲を絞り、オリジナルのスケッチ用プロンプト3件、ネイティブのリストアクション、完了済みフィルター、リセット機能を備えています。ルーター、デバイスブリッジ、地図、永続化されるノートブックは設定していません。こうした幅広いアプリ機能は、モバイルらしいプレビューからあるものと思わせるのではなく、意図を持って追加してください。

関連する仕様を確認する

## Framework7デザインシステム：指定したプラットフォームテーマが実際に適用されたか確認する

### リクエストしたプラットフォームテーマが実際に適用されたか確認する

このバージョンでは、f7-appにtheme="ios"を直接指定します。旧形式のparamsオブジェクトは、確認したコンポーネントで同等に機能するプロパティではなく、最初はデスクトップの自動判定によってMaterialモードになっていました。修正後の例では、適用済みのhtml.iosクラスと解決されたテーマ値を確認してから、iOSとして説明しています。

iOSモードが正しく適用されると、--f7-theme-colorは#007aff、shadeは#0066d6、tintは#298fffになります。テーマのシード値、プラットフォームの描画モード、生成されたMaterialのカラー役割は、それぞれ異なる概念です。初期化後に算出値を読み取れば、例で実際には表示されない色をドキュメントに記載せずに済みます。

関連する仕様を確認する

## Framework7デザインシステム：ネイティブのメディア行を使い、ローカルの文字スタイル上書きを明示する

### ネイティブのメディア行を使い、ローカルの文字スタイル上書きを明示する

リストにはf7-list media-listを使い、強い背景面とiOSの区切り線を適用しています。各行ではネイティブのlist-item APIを使ってタイトル、サブタイトル、本文を表示し、メディア領域にはオリジナルの小さなイラストを配置しています。iOSリストのデフォルトの最小高さは52ピクセルですが、複数行のメディアコンテンツを含む行は自然にそれより高くなります。

ネイティブのサブタイトルと説明文のデフォルトサイズは15ピクセルです。このサンプルでは、短い学習カードに合わせ、補足テキストに11ピクセルと12ピクセルを意図的に使用しつつ、タイトル行と説明文は折り返して表示しています。こうしたローカルの指定は公式の変数とは分けて記載しているため、デフォルトのスタイルもサンプルのスタイルも再現できます。

関連する仕様を確認する

## Framework7デザインシステム：スワイプアウトはアクションコンテナを持つリストアイテムの設定

### Swipeoutは、アクションコンテナを備えたリスト項目の設定

この行ではスワイプアウトを有効にし、右側にf7-swipeout-actionsを配置しています。f7-swipeout-buttonが操作可能な領域を提供し、起動後は表示された領域を閉じます。アプリではdeleteプロパティを有効にせず、ノートのdoneフラグを切り替えます。完了状態は取り消し可能で、レコードを保持する必要があるためです。

ネイティブのコアでは、ジェスチャーでも同じアクションを表示できます。また、表示されているActionsコントロールから、その行の安定したIDを指定してf7.swipeout.openを呼び出せます。これにより、隠れた横スワイプを探さなくても操作がわかるため、デスクトップやキーボードを使うユーザーにも利用しやすくなります。

1. River stepsのActionsを選択し、「スケッチ済みにする」を選びます。

2. 「スケッチ済み」に切り替え、River stepsだけが表示されることを確認します。

3. もう一度アクションを開いて取り消すか、リスト全体をリセットします。

関連する仕様を確認する

## Framework7デザインシステム：削除した要素ではなくモデルで完了状態を管理する

### 完了状態は、削除された要素ではなくモデルで管理する

3件すべてのノートオブジェクトをVue配列に保持します。「スケッチ済み」セグメントが選択されているときだけ算出コレクションで絞り込み、別の算出値で完了済みの学習項目数を数えます。安定したIDによって、絞り込み後も各ネイティブアクションの起動ボタンを正しい行に対応づけます。

完了済みのノートでは、アクションのラベルが「スケッチ済みにする」から「スケッチを取り消す」に変わります。長いドラッグの後に意図せずアクションを実行するオーバースワイプのショートカットはなく、アプリケーションモデルを更新せずに要素を削除する自動削除もありません。不完全なデータからレコードを作り直すことなく、同じレコードを未完了のリストに戻せます。

関連する仕様を確認する

## Framework7デザインシステム：フィルターの空状態で次の操作を案内する

### フィルター結果が空の場合は、次の操作を案内する

「スケッチ済み」にレコードがない場合、まだスケッチ済みの学習項目がないことを説明し、「すべての学習項目を表示」を提示します。このコントロールはセグメントボタンと同じフィルターモデルを変更します。行き先のない飾りの空状態イラストではなく、実際に再開できる手段です。

リセットすると、すべての完了フラグを解除し、「すべての学習項目」に戻って、3件すべてが再び利用可能であることを通知します。ステータステキストには、個別のアクション後にどのノートが変更されたかを正確に示します。このプレビューはノートブックをデバイスやサーバーに保存しないため、再読み込みすると元のサンプルデータに戻ります。

関連する仕様を確認する

## Framework7デザインシステム：コンテンツの高さに合わせて埋め込む場合はフルアプリ向けフレームワークを慎重に調整する

### コンテンツの高さに合わせて埋め込む場合はフルアプリ向けフレームワークを慎重に調整する

Framework7は通常、全画面のアプリレイアウトとページコンテナに対応しています。このサンプルにはルーティングされたページがなく、コンテンツに応じてiframeの高さを決めるため、ルートのドキュメントの高さとオーバーフローを意図的に上書きしています。ビューポート高の最小値を維持すると、子ドキュメントに合わせてiframeのサイズを変更する親との間で、フィードバックループが発生します。

ネイティブのリストは、初期化済みのアプリルート内に維持します。元の2カラムのスケッチ／アドバイスレイアウトは780pxで縦積みに切り替わり、さらに狭い画面では説明文の折り返しを維持しながらサムネイルの幅を縮小します。通常のルーティングされたモバイルアプリでは、Framework7のページスクロールモデルを利用するため、こうした埋め込み向けの設定をそのまま適用しないでください。

関連する仕様を確認する

## Framework7デザインシステム：ジェスチャー操作には明示的なコントロールも用意する

### ジェスチャー操作には明示的なコントロールも用意する

表示されるアクション起動ボタンでは、「River stepsのActions」のように対象の行を示します。セグメントの選択状態は押下状態として示され、結果はステータス領域に表示されます。オリジナルのアートワークは装飾として扱います。ユーザーはタッチジェスチャーを使わずに同じアクションを確認でき、その後どのノートが変更されたかも把握できます。

ローカルテストでは、表示されている起動ボタンで実際のネイティブスワイプアウト領域を開き、River stepsをスケッチ済みにして、リストを絞り込んだ後、モデルに紐づく行が1件残ることを確認しました。また、描画されたiOSテーマと280px幅のレイアウトも確認しました。swipeout CSSがあるだけでは、これらの動作はいずれも保証されません。

- アクション起動ボタンには、対象レコードの名前をラベルとして付けます。

- DOMだけを削除するのではなく、取り消し可能なモデル上の操作にします。

- ネイティブアクションの後に、絞り込まれたコレクションとステータスをテストします。

関連する仕様を確認する

## Framework7デザインシステム：CoreとVueのバージョンを一致させてインストール

### CoreとVueのバージョンを揃えてインストールする

エントリでは、framework7/bundle から Framework7、framework7-vue から Framework7Vue、およびバンドルのスタイルシートをインポートします。このバンドルには、この例で必要な Swipeout モジュールが含まれています。アプリ全体を含むSFCを createApp でマウントする前に、Framework7.use(Framework7Vue) を実行します。

どちらのパッケージもバージョン 9.2.0 に固定されています。完全なSFCと元のスタイルシートが上記に用意されており、Viteのセットアップにあるルートの HTML には、想定どおりアプリのマウント先が設定されています。表示されている元のイラストにアイコンパッケージは必要ありません。フレームワークのコア CSS には、小さな内部アイコンフォントが組み込まれています。

関連する仕様を確認する

## Framework7デザインシステムのコンポーネント例

### ネイティブSwipeoutを使ったスケッチブック一式

f7App、セグメントボタン、メディアリストの行、ネイティブのSwipeoutアクションを使用し、Vueのモデル状態を保持します。

```
<script setup>
import {ref,computed} from 'vue';
import {f7App,f7List,f7ListItem,f7SwipeoutActions,f7SwipeoutButton,f7Button,f7Segmented,f7} from 'framework7-vue';
const filter=ref('all'),message=ref('');
const notes=ref([{id:'river',title:'River steps',place:'North bank · 12-minute study',description:'Look for the rhythm between the stone edges and reflected lines.',done:false},{id:'market',title:'Market awning',place:'Old square · 8-minute study',description:'Use three values to separate canvas, shade and open sky.',done:false},{id:'window',title:'Window shadows',place:'Library wall · 10-minute study',description:'Follow the long diagonal before adding the smaller window shapes.',done:false}]);
const visible=computed(()=>notes.value.filter(n=>filter.value==='all'||n.done));const done=computed(()=>notes.value.filter(n=>n.done).length);
function actions(id){f7.swipeout.open('#note-'+id,'right')}
function toggle(note){note.done=!note.done;message.value=`${note.title} ${note.done?'marked as sketched':'returned to your sketch list'}.`}
function reset(){notes.value.forEach(n=>n.done=false);filter.value='all';message.value='All three studies are ready to sketch again.'}
</script>
<template><f7-app name="Field sketchbook" theme="ios"><main class="sketch-shell"><header><p class="eyebrow">FIELD SKETCHBOOK · THREE SMALL STUDIES</p><h1>A walk worth looking at.</h1><p>Keep a short list of things to draw. Swipe a study left, or use its Actions button, to mark it as sketched.</p></header><div class="sketch-layout"><section class="sketch-list"><div class="list-heading"><h2>Today's studies</h2><span>{{done}} / 3 sketched</span></div><f7-segmented strong><f7-button type="button" :active="filter==='all'" @click="filter='all'" :aria-pressed="filter==='all'">All studies</f7-button><f7-button type="button" :active="filter==='done'" @click="filter='done'" :aria-pressed="filter==='done'">Sketched</f7-button></f7-segmented><f7-list media-list strong dividers-ios class="study-list"><f7-list-item v-for="note in visible" :id="'note-'+note.id" :key="note.id" swipeout :title="note.title" :subtitle="note.place" :text="note.description"><template #media><div class="study-art" :class="note.id" aria-hidden="true"><i></i><b></b></div></template><template #after><f7-button type="button" small @click="actions(note.id)" :aria-label="'Actions for '+note.title">Actions</f7-button></template><f7-swipeout-actions right><f7-swipeout-button role="button" @keydown.space.prevent="$event.currentTarget.click()" close color="green" @click="toggle(note)">{{note.done?'Undo sketch':'Mark sketched'}}</f7-swipeout-button></f7-swipeout-actions></f7-list-item></f7-list><div v-if="!visible.length" class="empty"><strong>No studies marked yet.</strong><p>Return to All studies and mark one after you finish drawing.</p><f7-button type="button" @click="filter='all'">Show all studies</f7-button></div><p class="result" role="status">{{message||'Your list changes only in this local preview.'}}</p><f7-button type="button" outline @click="reset">Reset sketch list</f7-button></section><aside><div class="route-art" aria-hidden="true"><i></i><b></b><span></span><em></em></div><p class="eyebrow">A SIMPLE DRAWING ROUTINE</p><h2>Look. Reduce. Draw.</h2><ol><li><strong>Look for one relationship.</strong><span>Choose an edge, a shadow or a repeated shape.</span></li><li><strong>Reduce the scene.</strong><span>Keep only three values before adding detail.</span></li><li><strong>Stop at the time limit.</strong><span>A small finished study teaches more than an unfinished page.</span></li></ol><p class="aside-note">Original sample locations and prompts. No map, location service or real-world itinerary is connected.</p></aside></div></main></f7-app></template>
```

コードリファレンス

- このバージョンでは、theme="ios" は f7-app に直接指定するプロパティです。

- 表示されているActionsコントロールは、ネイティブの swipeout.open API を呼び出します。

- 完了状態を切り替えるとVueオブジェクトが変更されます。DOMの行は削除されません。

### 元のレイアウトを完全な形で再現

コンテンツの高さの上書き、狭い行幅での折り返し、元のスケッチイラスト。

```
html,body,#app,.framework7-root{height:auto!important;min-height:0!important;overflow:visible!important;position:relative!important}body{margin:0;background:#f1f3f6;color:#26343f}*{box-sizing:border-box}.sketch-shell{max-width:1120px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;color:#6b7882}h1{font-size:35px;line-height:1.15;max-width:680px;margin:12px 0}header>p:last-child{font-size:15px;line-height:1.6;max-width:650px;color:#687986}.sketch-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:26px;margin-top:28px}.sketch-list{background:white;border:1px solid #dce3e9;border-radius:16px;padding:22px;min-width:0}.list-heading{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.list-heading h2{font-size:20px;margin:0}.list-heading span{font-size:12px;color:#6d7b84}.study-list{margin:24px -22px}.study-list .item-title-row{flex-wrap:wrap;gap:7px}.study-list .item-title{white-space:normal;overflow:visible}.study-list .item-after{margin-left:0}.study-list .item-subtitle{white-space:normal;font-size:11px;color:#72808a}.study-list .item-text{font-size:12px;line-height:1.5;max-height:none;-webkit-line-clamp:unset}.study-list .item-media{align-self:flex-start;padding-top:17px}.study-art{width:48px;height:62px;background:#e0e9ef;border-radius:7px;position:relative;overflow:hidden}.study-art i,.study-art b{position:absolute;display:block}.river i{width:55px;height:28px;top:30px;left:0;background:#8eaebe;transform:rotate(-18deg)}.river b{width:24px;height:40px;left:0;top:0;background:repeating-linear-gradient(#c5c1b6 0 8px,#a7a295 8px 10px)}.market{background:#ecdcbf}.market i{width:60px;height:24px;left:-5px;top:12px;background:repeating-linear-gradient(90deg,#bc735f 0 10px,#f9e9d1 10px 20px);transform:rotate(8deg)}.market b{width:26px;height:35px;left:11px;top:37px;background:#7b8072}.window{background:#ece9df}.window i{width:25px;height:29px;left:9px;top:9px;border:5px solid #617381}.window b{width:28px;height:55px;left:22px;top:25px;background:#b1b9b9;transform:skew(25deg)}.result{font-size:12px;line-height:1.6;color:#4f6a79;min-height:38px}.empty{padding:30px 12px;text-align:center;font-size:13px;line-height:1.6}.sketch-layout aside{padding:0 4px;min-width:0}.route-art{height:170px;border-radius:14px;background:#dce8df;position:relative;overflow:hidden;margin-bottom:24px}.route-art i{position:absolute;width:190px;height:190px;border:21px solid #aac6b4;border-radius:50%;left:55px;top:34px}.route-art b{position:absolute;width:90px;height:190px;border:15px solid #f4eed9;border-radius:50%;left:23px;top:-17px;transform:rotate(-25deg)}.route-art span,.route-art em{position:absolute;width:13px;height:13px;border:3px solid white;background:#537b70;border-radius:50%;left:67px;top:111px}.route-art em{left:167px;top:52px}.sketch-layout aside h2{font-family:Georgia,serif;font-size:29px;font-weight:400}.sketch-layout ol{padding-left:20px}.sketch-layout li{padding:0 0 20px;font-size:13px;line-height:1.6}.sketch-layout li strong,.sketch-layout li span{display:block}.sketch-layout li span{color:#71808a;font-size:12px;margin-top:5px}.aside-note{font-size:11px;line-height:1.6;color:#7b8790}@media(max-width:780px){.sketch-layout{grid-template-columns:minmax(0,1fr)}.sketch-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.sketch-shell{padding:14px}.sketch-list{padding:16px}.study-list{margin:20px -16px}.study-art{width:34px}.study-list .item-media{--f7-list-item-media-margin:10px}.study-list .item-inner{min-width:0}.study-list .item-title{font-size:15px}}
```

コードリファレンス

- このリセットは埋め込み用の見本を対象としており、ルーティングを備えた全画面アプリのシェル向けではありません。

- リストのサブタイトルと説明に対する上書きを明示しています。

## Framework7デザインシステムのエージェント設定

### 実装の出発点

互換性が確認された Framework7/Core Vue 9.2.0。これはコンテンツの高さを上書きした初期化済みのコンポーネント見本であり、ルーティングを備えたモバイルアプリ一式ではありません。

```
// npm create vite@latest field-sketchbook -- --template vue
// cd field-sketchbook && npm install
// npm install framework7@9.2.0 framework7-vue@9.2.0
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import Framework7 from 'framework7/bundle';
import Framework7Vue from 'framework7-vue';
import 'framework7/css/bundle';
import './style.css';
import App from './App.vue';
Framework7.use(Framework7Vue);
createApp(App).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
```

### あなたのプロジェクト向けプロンプト

```
Framework7 Core/Vue 9.2.0を使用し、付属のFieldスケッチブック、明示的な theme="ios"、ネイティブのメディアリスト形式のSwipeout構造を組み合わせます。3つのスケッチ課題、元に戻せる完了フラグ、All/Sketchedの絞り込みを維持します。表示されるActionsボタンから f7.swipeout.open を呼び出します。完了状態は行を削除せず、モデルの状態を切り替えて表現します。f7-button の type="button" と、SwipeoutコマンドのボタンとしてのセマンティクスおよびSpaceキー対応を維持します。埋め込み時のコンテンツ高さの設定 CSS、絞り込み結果が空の場合の復帰手段、リセットも維持します。旅程や位置情報サービスは必要ありません。
```

## Framework7デザインシステムの情報源と対象範囲

Framework7 Core/Vue 9.2.0と、動作確認済みのiOSモード。元のスケッチ課題と装飾用アートワークを使用します。完了状態は元に戻せるローカル状態であり、地図、位置情報サービス、端末ストレージ、ルーティングを備えたアプリには接続されていません。

- Vueのインストール Core/Vueの連携。

- Appコンポーネント テーマとアプリのプロパティを直接指定。

- Swipeout アクションコンテナ、ネイティブの開閉、削除の動作。

- リスト項目 メディアスロット、タイトル、説明のAPI。

- セグメント グループ選択の表示。

- CSS変数 プラットフォームに応じたタイポグラフィと形状。

- カラーテーマ テーマの役割と名前付きカラー。

- アプリのレイアウト 通常の全画面アプリの境界。

## Framework7デザインシステムの関連リソース

### gluestack UI

gluestack の実際のコア Button と Input クリエーター、明示的な v5 セマンティックカラー、完全な React Native Web ソースを使って、フィールドキットのチェックリストを作成してください。入力検証、キーボード操作、安定した項目識別、ローカルデータから算出されるパッキングの進捗を確認してください。

### Headless UI

Headless UIは、ダイアログ、リストボックス、スイッチ向けに、スタイルを適用しないReactのインタラクションコンポーネントを提供します。このガイドでは、書類共有のフローを例に、標準的なCSSと組み合わせて、ネイティブのフォーカス、選択、ポップアップの動作を実現する方法を紹介します。

### HeroUI

HeroUI v3のリファレンスです。実際のセマンティックなCSS変数、複合Reactコントロール、ライトとダークの背景レイヤーに加え、画像を書き出す手順も紹介しています。


- [実装リファレンス](https://framework7.io/vue/swipeout.html)
- [ソース](https://framework7.io/docs/color-themes)
- [ソース](https://framework7.io/docs/css-variables)
- [ソース](https://framework7.io/vue/app-layout.html)
- [関連する仕様を確認する](https://framework7.io/vue/initialize-app.html)
- [関連する仕様を確認する](https://framework7.io/vue/app.html)
- [関連する仕様を確認する](https://framework7.io/vue/list-item.html)
- [関連する仕様を確認する](https://framework7.io/vue/swipeout.html)
- [関連する仕様を確認する](https://framework7.io/vue/segmented.html)
- [関連する仕様を確認する](https://framework7.io/vue/app-layout.html)
- [関連する仕様を確認する](https://framework7.io/vue/installation.html)
- [コードリファレンス](https://framework7.io/vue/swipeout.html)
- [コードリファレンス](https://framework7.io/docs/css-variables)
- [Vueのインストール Core/Vueの連携。](https://framework7.io/vue/installation.html)
- [Appコンポーネント テーマとアプリのプロパティを直接指定。](https://framework7.io/vue/app.html)
- [Swipeout アクションコンテナ、ネイティブの開閉、削除の動作。](https://framework7.io/vue/swipeout.html)
- [リスト項目 メディアスロット、タイトル、説明のAPI。](https://framework7.io/vue/list-item.html)
- [セグメント グループ選択の表示。](https://framework7.io/vue/segmented.html)
- [CSS変数 プラットフォームに応じたタイポグラフィと形状。](https://framework7.io/docs/css-variables)
- [カラーテーマ テーマの役割と名前付きカラー。](https://framework7.io/docs/color-themes)
- [アプリのレイアウト 通常の全画面アプリの境界。](https://framework7.io/vue/app-layout.html)