Skip to content

Commit

Permalink
TabBarから「下線を省略できない」の表記を削除
Browse files Browse the repository at this point in the history
  • Loading branch information
MasafumiKabe committed Dec 26, 2024
1 parent 73f175e commit f819273
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 6 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 9 additions & 6 deletions src/content/articles/products/components/tab-bar.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,20 @@ import ComponentStory from '@/components/article/ComponentStory.astro'
### 同じオブジェクトの異なる状態を切り替えて表示する目的に使用しない
TabBarは異なるオブジェクトやビューを切り替えるために使用してください。同じオブジェクトについて異なる状態を切り替えたい場合は[SegmentedControl](/products/components/segmented-control/)の使用を検討してください。

### 下線なし(`bordered=false`)のTabBarは非推奨
タブとして操作できるか認知がしにくく、ビューへの影響範囲が不明瞭なため、下線なしのTabBarは非推奨です
### ビューへの影響範囲を明確にする
TabBarを使用する際は、影響するビューの範囲を明確にしてください

### 下線によって影響範囲を明示する
TabBarは、下線によって影響するビューの範囲を明示して使用してください。
基本的には、下線を設けることで影響するビューの範囲が明確になります。

![スクリーンショット: 標準のTabBar](./images/smarthr-tab-bar-bordered-true.png)

下線が他のコンポーネントと競合する場合、最低限TabBarItemがある範囲までは下線が必要です
下線が他のコンポーネントと競合する場合、最低限TabBarItemがある範囲までは下線を設けてください

![スクリーンショット: 下線なしのTabBar](./images/smarthr-tab-bar-bordered-minimum.png)
![スクリーンショット: 下線をTabBarItemの範囲に限定したTabBar](./images/smarthr-tab-bar-bordered-minimum.png)

下線がなくても影響範囲が明確だと判断できる場合、下線を省略(`bordered=false`)できます。

![スクリーンショット: 下線を省略したTabBar](./images/smarthr-tab-bar-without-border.png)

## レイアウト

Expand Down

0 comments on commit f819273

Please sign in to comment.