レイヤー順序

レイヤー順序トークンは、コンポーネント・レイアウトのレイヤー順序を設定します。

CSSではz-indexを指しています。

前提

DatePicker, Dialog, Dropdown, Tooltip などが対象

値の考え方

  • z-indexの値は外部サービスの値に合わせています。
  • レイヤー順序はz-indexのスタックレベルだけでなく、要素がもつスタッキングコンテキストによっても変動します。詳しい仕様は参考情報を確認してください。
  • 現状プリミティブトークンは提供していません。

セマンティクストークン

トークン名利用コンポーネント
AUTOauto
DEFALUT0
FIXED_MENU100BottomFixedArea
RightFixedNote
zendesk(外部サービス)1040Zendeskのポップアップダイアログで利用されている値
OVERLAP_BASE9000Dropdown
Dialog
chatplus(外部サービス)9999ChatPlusが利用している値。root設置の前提で、この要素よりも上位レイヤーにコンポーネントを配置したい場合、9999以上の値を設定する。
OVERLAP10000DatePicker
Tooltip
FLASH_MESSAGE11000FlashMessage
intercom(外部サービス)2147483000ChatPlusから起動するオンラインチャットウィンドウの値
karte(外部サービス)2147483640Karteで利用されている値
  • (外部サービス)と書かれているトークン名は外部サービス上で定義された値です。SmartHR UIでは定義していません。
  • IntercomやKarteはどの画面よりも全面に表示することを想定しています。

[WIP]コード

© 2021, SmartHR, Inc.