スタイルテンプレート
h2 相当のタイトル
文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。
h3 相当のタイトル
文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。
h4 相当のタイトル
文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。
h5 相当のタイトル
文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。
箇条書き
- 箇条書き1
- 箇条書き2
- 箇条書き3
- 順番箇条書き
- 順番箇条書き
- 順番箇条書き
プレビュー
コード(ライブコード)
基本的に、1コード1コンポーネントで利用してください。
コード
<Button variant="primary">Primary</Button><Button>Secondary</Button><Button variant="danger">Danger</Button><Button variant="skeleton">Skeleton</Button><Button variant="text">Text</Button>
コード(インライン)
TEXT_BLACK
Markdown テーブル
SmartHR UI テーブル
thead | thead | thead |
---|---|---|
cell | cell | |
cell | cell |
レイアウト
SmartHR UI Layoutコンポーネントを使用できます。
Cluster
- 入れ子にして
align
やjustify
を組み合わせるとメディアクエリを使用せずに柔軟なレイアウトを作れます。 - 幅を狭めて収まり切らなくなると折返します。
gap
に使える値はXXS
,XS
,S
,M
,L
,XL
、他1
,0.5
などの数値です。詳しくはsmarthr-uiのドキュメントを参照してください。
LineUp
align-items
やjustify-content
などFlexbox
に準じたプロパティを渡せます。gap
に使える値はXXS
,XS
,S
,M
,L
,XL
、他1
,0.5
などの数値です。詳しくはsmarthr-uiのドキュメントを参照してください。
Stack
- 等間隔に隙間を保ち、積み重ねるレイアウトが作れます。
- 各要素の間隔は
1rem
が標準です。 gap
に使える値はXXS
,XS
,S
,M
,L
,XL
、他1
,0.5
などの数値です。詳しくはsmarthr-uiのドキュメントを参照してください。
Color パレット
プライマリーカラー(プロダクトの印象を司る箇所に使用)
コンポーネントの背景色(Base コンポーネントなど)
画像
画像はcontent配下の指定ディレクトリに格納できます。
Markdown形式の画像設置
Markdown形式の画像Pathは相対パス
で読み込めます。また属性値を以下のような指定で設定できます。

表示例
Component内の画像設置
.mdx
ファイル内で、SmartHR UIなどのコンポーネントとともに画像(imgタグ)を使いたい場合は、利用したい画像をimport
し、StaticImage
コンポーネントのsrc
にそのpath
を設定してください。
import { StaticImage } from '@Components/StaticImage'
import { Cluster } from 'smarthr-ui'
import imageUrl from './images/sample.jpg';
<Cluster gap="XS">
<StaticImage src={imageUrl} width="200" alt="Image Sample" />
<StaticImage src={imageUrl} width="200" alt="Image Sample" />
</Cluster>
表示例


ファイルのリンク
静的な巨大ファイルは/static
フォルダから直接リンクできます。
絵文字
Shortcut codes
🚀 😈 👿 💀 ☠️ 💩 🤡 👹 👺 👻 👽 👾
Unicode
👍🥳👏💃🌵🥑🌶️🌮🌯🍸🍻🏜️🎈🎊🎵🎶 🎸🇲🇽🇺🇸
Do And Don't

