レイヤー順序
レイヤー順序トークンは、コンポーネント・レイアウトのレイヤー順序を設定します。
CSSではz-indexを指しています。
前提
- 定義した抽象トークンの値は、ポータル（portal）として提供するUIコンポーネント※が、Dialogコンポーネントよりも背面に表示されないことを前提に定義しています。
- ポータル（portal）として提供されるコンポーネントを多重に表示することは想定していません（排他制御）。
※ DatePicker, Dialog, Dropdown, Tooltip などが対象
値の考え方
z-indexの値は外部サービスの値に合わせています。
レイヤー順序はz-indexのスタックレベルだけでなく、要素がもつスタッキングコンテキストによっても変動します。詳しい仕様は参考情報を確認してください。
セマンティックトークン
| トークン名 | 値 | 利用コンポーネント |
|---|---|---|
AUTO | auto | |
DEFAULT | 0 | |
FIXED_MENU | 100 | BottomFixedArea thead（ fixedHead={true}） |
| chatplus（外部サービス） | 9999 | ChatPlusが利用している値。root設置の前提で、この要素よりも上位レイヤーにコンポーネントを配置したい場合、9999以上の値を設定する。 |
OVERLAP_BASE | 10000 | Dropdown Dialog |
| ヘルプセンター（基本機能） | 10001 | 基本機能で使用されているヘルプセンターを表示するモードレスダイアログの値 |
OVERLAP | 10500 | DatePicker Tooltip |
FLASH_MESSAGE | 11000 | FlashMessage |
| intercom（外部サービス） | 2147483000 | ChatPlusから起動するオンラインチャットウィンドウの値 |
| karte（外部サービス） | 2147483640 | Karteで利用されている値 |
- （外部サービス）および（基本機能）と書かれているトークン名は、SmartHR UIの外部で定義された値です。