Merge pull request #1581 from kintone-labs/develop

SSR-5043: release v1.19.0(Update some user guides)

docs/document/docs/components/desktop/tabs.md

@@ -26,10 +26,14 @@ Here is a list of properties that can be used for modifying the component:
 | id | string | ""  | Component id name | |
 | value | string | ""  | Selected value | <li>If the `value` is matched in the `items`, the tab will be displayed even if it’s disabled</li><li>The first visible tab will be displayed in the following cases:<ul><li>If the `value` is not matched in the `items`</li><li>If the `value` is matched in the `items`, but the tab is not visible</li></ul></li><li>Will result an error if the `value` is not string type</li> |
 | borderVisible | boolean | true  | Show/Hide the border surrounding the content | |
-| scrollButtons | boolean | false | Show/Hide the scroll buttons | |
+| scrollButtons *1 | boolean | false | Show/Hide the scroll buttons | If the `scrollButtons` is true, tabs can be scrolled horizontally and moved by clicking Scroll Buttons. |
 | visible | boolean | true | Show/Hide the component | |
 | items | Array\<[Item](#item)\> | [] | List of tabs to display | Will result an error if the value of `items` is not an array |
 
+:::info
+*1: When setting `scrollButtons` true, please wrap the Tabs component with a parent div element and set an appropriate max-width property. For example, when using the Tabs component within the [Header Menu Element](https://kintone.dev/en/docs/kintone/js-api/records/get-record-header-menu-element/), you can set like `max-width: 99vw`.
+:::
+
 #### Item
 
 | Name   | Type | Default | Description | Remark |

docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/tabs.md

@@ -26,10 +26,14 @@ import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 | id | string | "" | コンポーネントの id 名 ||
 | value | string | ""  | 選択されているタブ | <li>items 内に一致する value がある場合、disabled でもそのタブが表示される</li><li>以下の場合は最初の visible タブが表示される<ul><li>items 内に一致する value がない場合</li><li>items 内に一致する value があるが、そのタブが visible ではない場合</li></ul></li><li>value が文字列以外の場合、エラーを出力する</li> |
 | borderVisible | boolean | true  | 表示内容を囲う枠線の表示/非表示設定 | |
-| scrollButtons | boolean | false | スクロールボタンの表示/非表示設定 | |
+| scrollButtons *1 | boolean | false | スクロールボタンの表示/非表示設定 | scrollButtons が true の場合、タブの横スクロールまたはスクロールボタンのクリックで移動ができる |
 | visible | boolean | true | コンポーネントの表示/非表示設定 | |
 | items | Array\<[Item](#item)\> | [] | 表示するタブのリスト | items が配列以外の場合、エラーを出力する |
 
+:::info
+*1: `scrollButtons` を true に設定する場合、Tabs コンポーネントを親 div 要素で括り、適切な max-width プロパティを設定してください。 例えば、[メニューの上側の要素](https://cybozu.dev/ja/kintone/docs/js-api/record/get-record-header-menu-element/)内で Tabs コンポーネントを使用する場合、`max-width: 99vw` のように設定します。
+:::
+
 #### Item
 | Name   | Type | Default | Description | Remark |
 | :--- | :--- | :--- | :--- | :--- |

docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.19.0/components/desktop/tabs.md

@@ -26,10 +26,14 @@ import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 | id | string | "" | コンポーネントの id 名 ||
 | value | string | ""  | 選択されているタブ | <li>items 内に一致する value がある場合、disabled でもそのタブが表示される</li><li>以下の場合は最初の visible タブが表示される<ul><li>items 内に一致する value がない場合</li><li>items 内に一致する value があるが、そのタブが visible ではない場合</li></ul></li><li>value が文字列以外の場合、エラーを出力する</li> |
 | borderVisible | boolean | true  | 表示内容を囲う枠線の表示/非表示設定 | |
-| scrollButtons | boolean | false | スクロールボタンの表示/非表示設定 | |
+| scrollButtons *1 | boolean | false | スクロールボタンの表示/非表示設定 | scrollButtons が true の場合、タブの横スクロールまたはスクロールボタンのクリックで移動ができる |
 | visible | boolean | true | コンポーネントの表示/非表示設定 | |
 | items | Array\<[Item](#item)\> | [] | 表示するタブのリスト | items が配列以外の場合、エラーを出力する |
 
+:::info
+*1: `scrollButtons` を true に設定する場合、Tabs コンポーネントを親 div 要素で括り、適切な max-width プロパティを設定してください。 例えば、[メニューの上側の要素](https://cybozu.dev/ja/kintone/docs/js-api/record/get-record-header-menu-element/)内で Tabs コンポーネントを使用する場合、`max-width: 99vw` のように設定します。
+:::
+
 #### Item
 | Name   | Type | Default | Description | Remark |
 | :--- | :--- | :--- | :--- | :--- |

docs/document/versioned_docs/version-1.19.0/components/desktop/tabs.md

@@ -26,10 +26,14 @@ Here is a list of properties that can be used for modifying the component:
 | id | string | ""  | Component id name | |
 | value | string | ""  | Selected value | <li>If the `value` is matched in the `items`, the tab will be displayed even if it’s disabled</li><li>The first visible tab will be displayed in the following cases:<ul><li>If the `value` is not matched in the `items`</li><li>If the `value` is matched in the `items`, but the tab is not visible</li></ul></li><li>Will result an error if the `value` is not string type</li> |
 | borderVisible | boolean | true  | Show/Hide the border surrounding the content | |
-| scrollButtons | boolean | false | Show/Hide the scroll buttons | |
+| scrollButtons *1 | boolean | false | Show/Hide the scroll buttons | If the `scrollButtons` is true, tabs can be scrolled horizontally and moved by clicking Scroll Buttons. |
 | visible | boolean | true | Show/Hide the component | |
 | items | Array\<[Item](#item)\> | [] | List of tabs to display | Will result an error if the value of `items` is not an array |
 
+:::info
+*1: When setting `scrollButtons` true, please wrap the Tabs component with a parent div element and set an appropriate max-width property. For example, when using the Tabs component within the [Header Menu Element](https://kintone.dev/en/docs/kintone/js-api/records/get-record-header-menu-element/), you can set like `max-width: 99vw`.
+:::
+
 #### Item
 
 | Name   | Type | Default | Description | Remark |