# タブストリップ
## Content
SpreadJSでは、タブストリップとその要素の動作を制御するために多数のオプションが提供されています。 **Workbook.options** フィールドのプロパティを使用することで、シート名の変更、シートの色の設定、シートの並べ替え、タブストリップの幅の設定など、さまざまな操作を実行できます。
### シート名の編集
シート名を編集するには、シート名をダブルクリックします。編集を終了するには、タブの外部をクリックするか、［Esc］または［Enter］キーを押します。
ユーザーがシート名を編集できるかどうかを指定するには、 **options.tabEditable** プロパティを使用します。このプロパティのデフォルト値はtrueです。
```JavaScript
// falseに設定すると、編集不可になります。trueに設定すると、 編集可能になります。
spread.options.tabEditable = false;
```
### シートタブの並べ替え
タブストリップ内のシートタブを並べ替えるには、シートタブを選択し、移動先となるシートの間にドラッグします。次の図に示すように、ドラッグ中はインジケータが表示されます。マウスを離すと、タブの移動が完了されます。
シートタブの並べ替えを許可するには、 **options.allowSheetReorder** プロパティをtrueに設定します。
```JavaScript
// trueに設定すると、 有効になります。falseに設定すると、無効になります。
spread.options.allowSheetReorder = true;
```
[SheetMoving](/spreadjs/api/classes/GC.Spread.Sheets.Events#sheetmoving) イベントは、シートをドラッグして移動する直前に発生します。また、[SheetMoved](/spreadjs/api/classes/GC.Spread.Sheets.Events#sheetmoved) イベントは、シートをドラッグし、移動が完了した直後に発生します。シートの移動をキャンセルするには、[SheetMoving](/spreadjs/api/classes/GC.Spread.Sheets.Events#sheetmoving) クラスの引数の cancel パラメータをtrueに設定します。
### タブの色の設定
シートのタブの色を設定するには、 **options.sheetTabColor** プロパティを使用します。また、最初に表示するシートを設定するには、[startSheetIndex](/spreadjs/api/classes/GC.Spread.Sheets.Workbook#startSheetIndex) メソッドを使用します。
```JavaScript
spread.setSheetCount(3);
spread.startSheetIndex(0);
spread.getSheet(0).options.sheetTabColor = "red";
spread.getSheet(1).options.sheetTabColor = "#FFFF00";
spread.getSheet(2).options.sheetTabColor = "Accent 4";
```
### シートタブのスタイルの設定
シートタブの状態に基づいて、テキストスタイル、背景色、アイコンなどのシートタブのスタイルを設定できます。シートタブのスタイルを設定するには、[Workbook ](/spreadjs/api/classes/GC.Spread.Sheets.Workbook)クラスの `sheetTabStyles` または `defaultSheetTabStyles` プロパティを使用します。
`sheetTabStyles` プロパティは各シートタブに特定の状態スタイルを適用しますが、`defaultSheetTabStyles` プロパティはすべてのシートタブのデフォルトの状態スタイルを設定します。
次の図は、シートタブの異なる状態の背景色、前景色、アイコンを設定します。
次のサンプルコードは、シートタブの異なる状態スタイルを設定する方法を示します。
```javascript
// 「Sheet1」の通常状態に新しいスタイルを設定します。
spread.sheetTabStyles.add(GC.Spread.Sheets.SheetTabState.normal, {
icons: [{ src: '../images/img.png', width: 20, height: 20 }],
foreColor: 'red',
font: 'bolder',
backColor: 'green',
}, ['Sheet1']);
// すべてのシートタブの保護状態のデフォルトスタイルを設定します。
spread.options.defaultSheetTabStyles = {
[GC.Spread.Sheets.SheetTabState.protected]: {
icons: [{ src: '../images/lock.jpg', width: 20, height: 20 }],
foreColor: 'blue',
backColor: 'orange',
}
};
```
デザイナでは、［**設定**］タブを使用してシートタブのスタイルをカスタマイズすることができます。
**シートタブのスタイルを管理するには、**
1. ［**設定**］タブをクリックして、［**シート**］グループ内の［**全般**］ボタンをクリックします。
2. ［**シートタブ**］タブを選択して、特定のシートタブの状態の色とスタイルを定義します。
3. ［**スタイルの管理**］ボタンをクリックして、タブの状態スタイルを設定します。
4. ［**状態スタイルのリスト**］から変更する状態を選択し、その状態の［**編集**］アイコンをクリックします。
5. ［**シートタブのスタイル設定**］ダイアログでは、選択した状態に必要なフォントのスタイル、背景色、およびアイコンを適用します。
6. ［**OK**］ボタンをクリックします。
上記の手順に従うと、変更がシートタブに適用されます。
**デフォルトのシートタブのスタイルを管理するには:**
1. ［**設定**］タブをクリックして、［**Spread 設定**］グループ内の［**タブストリップ**］ボタンをクリックします。「**Spread 設定**」ダイアログが開きます。
2. ［**スタイルの管理**］オプションを選択して、シートタブの状態スタイルを設定します。
3. ［**状態スタイルのリスト**］から状態を選択し、その状態の［**編集**］アイコンをクリックします。
4. ［**OK**］ボタンをクリックします。
上記の手順に従うと、変更がすべてのシートタブに適用されます。
### シートタブの表示で角丸スタイルに対応
シートタブの境界線のスタイルは、組み込みで用意されているCSSクラスのborder-radiusスタイルを使ってカスタマイズできます。
* シートタブの位置ごとに、スタイルの定義に対応するCSSクラスがあります。
```css
.sjs-tab-strip-bottom-tab{
border-radius: value;
}
.sjs-tab-strip-left-tab{
border-radius: value;
}
.sjs-tab-strip-right-tab{
border-radius: value;
}
.sjs-tab-strip-top-tab{
border-radius: value;
}
```
* **sjs-tab-strip-[position]-tab**クラスの**border-radius**プロパティは、角丸の半径をピクセル単位の値で受け付けます。値は0以上である必要があります。すべての**border-radius**値を0に設定すると、シートタブの角丸スタイルが無効になります。
また、各コーナー（左上、右上、左下、右下）ごとに個別に角丸のスタイルを設定することができます。
例：
1. border-radiusに1つの値を指定すると、すべての角がその値で角丸になります。
```css
.sjs-tab-strip-bottom-tab{ border-radius: 4px; }
```
2. border-radiusに2つの値を指定すると、1つ目の値が左上と右下、2つ目の値が右上と左下の角丸になります。
```css
.sjs-tab-strip-bottom-tab{ border-radius: 0px 5px; }
```
3. border-radiusに3つの値を指定すると、1つ目の値が左上、2つ目の値が右上と左下、3つ目の値が右下の角丸を表します。
```css
.sjs-tab-strip-bottom-tab{ border-radius: 0px 0px 4px; }
```
4. border-radiusに4つの値を指定すると、左上、右上、右下、左下の角丸をそれぞれ表します。
```css
.sjs-tab-strip-bottom-tab{ border-radius: 4px 4px 0px 0px; }
```
>type=note
> 1. シートタブのボーダー半径スタイルは、Excel 2007のテーマには対応していません。
> 2. シートタブの幅や高さの制約があるため、半径を大きくしすぎないよう注意してください。
### ［新規］タブボタンの表示
［新規］タブボタンを表示または非表示にするには、 **options.newTabVisible** プロパティを使用します。 このボタンはデフォルトで表示されます。
```JavaScript
// falseに設定すると、非表示になります。trueに設定すると、表示されます。
spread.options.newTabVisible = true;
```
### ナビゲーションボタンの表示
ワークブックにナビゲーションボタンを表示するかどうかを指定するには、 **options.tabNavigationVisible** プロパティを使用します。
```JavaScript
// falseに設定すると、非表示になります。trueに設定すると、表示されます。
spread.options.tabNavigationVisible = false;
```
### タブストリップの表示
タブストリップ全体を非表示にするには、 **options.tabStripVisible** プロパティを使用します。
```JavaScript
spread.options.tabStripVisible = true; // trueに設定すると、表示されます。falseに設定すると、非表示になります。
spread.options.tabStripRatio = 0.5; // タブストリップに割り当てられている水平のスペースを指定するパーセンテージ値。
```
### 位置と幅の設定
ワークブックに対するタブストリップの位置を設定するには、 **tabstripPosition** ワークブックオプションを使用します。位置がleft, right, or top（左、右、または上）に設定すると、タブストリップはスクロールバーから分離して表示されます。この位置は、タッチデバイスとすべてのSpreadJSテーマでサポートされています。
| 位置 | スクリーンショット |
| --- | --------- |
| Bottom (default) |  |
| Left |  |
| Right |  |
| Top |  |
> **注意：** 水平スクロールバーのサイズ変更ボタンは、タブストリップの位置が「bottom」（下）に設定されている場合にのみ表示されます。また、位置が上、左、または右に設定されている場合、 **tabStripRatio** プロパティは無視されます。
シート位置が「左」または「右」に設定され、シート名が長すぎて表示できない場合は、シート名が切り取られ、省略記号が表示されます。ただし、 **options.tabStripWidth** プロパティを使用することで、タブストリップの幅を変更してシート名全体を表示できます。このプロパティのデフォルト値と最小値は80です。
> **注意：** タブストリップの位置がブックの「left」 （左）または「right」（右）に設定されていない場合、 **options.tabStripWidth** プロパティは無視されます。
次のサンプルコードは、タブストリップの位置と幅を設定します。
```JavaScript
// ワークブックを作成するときにタブストリップの位置を変更します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {tabStripPosition: GC.Spread.Sheets.TabStripPosition.top});
// または、ワークブックのオプションでタブストリップの位置を変更します。
spread.options.tabStripPosition = GC.Spread.Sheets.TabStripPosition.top;
// ワークブックを作成するときにタブストリップの幅を変更します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {tabStripWidth: 200});
// または、ワークブックのオプションでタブストリップの幅を変更します。
spread.options.tabStripWidth = 200;
```
### ［すべてのシート］ボタン
SpreadJSでは、タブストリップに［すべてのシート］ボタンが提供され、ワークブック内の特定のシートにすばやく移動することができます。このボタンは、利用可能なすべてのシートを表示するドロップダウンリストを開きます。
タブストリップにすべてのシートが完全に表示できない場合は、［すべてのシート］ボタンが自動的に表示されます。また、このボタンはバーのサイズを変更してシートを非表示にすることでも表示できます。
［すべてのシート］ボタンを表示するかどうかを設定するには、「hide」、「show」、「auto」（デフォルト）などの[AllSheetsListVisibility](/spreadjs/api/enums/GC.Spread.Sheets.AllSheetsListVisibility)列挙体のオプションを使用して、 **allSheetsListVisible** オプションを設定します。
```JavaScript
// ［すべてのシート］ボタンを自動的に表示または非表示にします。（デフォルト）
function AutoButton(spread) {
spread.options.allSheetsListVisible = GC.Spread.Sheets.AllSheetsListVisibility.auto;
}
// ［すべてのシート］ボタンを表示します。
function ShowButton(spread) {
spread.options.allSheetsListVisible = GC.Spread.Sheets.AllSheetsListVisibility.show;
}
// ［すべてのシート］ボタンを非表示にします。
function HideButton(spread) {
spread.options.allSheetsListVisible = GC.Spread.Sheets.AllSheetsListVisibility.hide;
}
```
> **メモ：** ［すべてのシート］ボタンの位置は、allSheetsListVisibleオプションの設定に関係なく保持されます。
次の表は、［すべてのシート］ボタンに関連するさまざまなシナリオとその例を示します。
| シナリオ | 例 |
| ---- | --- |
| ［すべてのシート］ダイアログで、アクティブなシートとホバーしたシートが強調表示されます。 |  |
| マウスオーバーで［すべてのシート］ボタンの色が変わります。 |  |
| ［すべてのシート］ダイアログで、選択したすべてのアクティブなシートが強調表示されます。 |  |
| タブストリップに選択したシートが表示されない場合、［すべてのシート］ダイアログからタブストリップに表示されます。 |  |
| ［すべてのシート］ダイアログには、非表示のシートが表示されません。
たとえば、図に示すように、Sheet4、Sheet6、およびSheet7は非表示にしたシートです。 |  |
| 「すべてのシート」ダイアログでは、ユーザーが検索ボックスに入力を開始すると、一致するシートのみが表示され、リストの最初に一致したシートが自動的に選択されます。（大文字・小文字は区別しません） |  |
| ワークブックのサイズが小さすぎて「すべてのシート」ダイアログが完全に表示できない場合、検索ボックスは自動的に非表示になります。 |  |
>type=note
> 検索機能はキーボード操作にも対応しています。
>
> * **↑/↓キー**: 選択を上下に移動します。
> * **Enterキー**: 選択中のワークシートをアクティブシートに設定します。
> * **ESCキー**: 「すべてのシート」ダイアログを閉じます。