latest
latest
リストコントロールのCSS
本製品のリストコントロールに適用できるCSSの一覧をこちらに記載します。
これらのCSSは以下のコントロールに適用されます。
- リストコントロール（GcListBox）
- コンボコントロール（GcComboBox）のドロップダウンリスト
- タグボックスコントロール（GcTagBox）のドロップダウンリスト
- リストの1列目に表示するチェックボックス
全般
対象：リストコントロール、コンボコントロールのドロップダウンリスト、タグボックスコントロールのドロップダウンリスト
| CSSクラス（概要） | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim__listbox （コントロールの基本スタイル） |
境界線 | border, border-color |
| 角丸 | border-radius | |
| フォント | font-family, font-sizeなど | |
| 文字色 | color | |
| 背景（色、画像など） | background, background-color, background-imageなど | |
| .gcim__listbox .column-header .column-header__inner （ヘッダー部分のスタイル） |
フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景（色、画像など） | background, background-color, background-imageなど | |
| .gcim__listbox .column-header .column-header__sort-indicator[sort-state="asc"] div （昇順時のソートインジケータ） |
インジケータの画像 | background-image |
| .gcim__listbox .column-header .column-header__sort-indicator[sort-state="desc"] div （降順時のソートインジケータ） |
インジケータの画像 | background-image |
| .gcim__listbox .viewport .list-item （リストアイテムのスタイル） |
フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景（色、画像など） | background, background-color, background-imageなど | |
| .gcim__listbox .viewport .list-item:hover （ホバー中のリストアイテムのスタイル） |
フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景（色、画像など） | background, background-color, background-imageなど | |
| .gcim__listbox .viewport .list-item[focused="true"] （フォーカスがあるアイテムのスタイル） |
フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景（色、画像など） | background, background-color, background-imageなど | |
| .gcim__listbox .viewport .list-item[selected="true"] （選択されているアイテムのスタイル） |
フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景（色、画像など） | background, background-color, background-imageなど | |
| .gcim__listbox .footer_style （フッター部分のスタイル） |
フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景（色、画像など） | background, background-color, background-imageなど | |
| フッターの高さ | hight | |
| テキストの省略表示のスタイル | text-overflow（clip または ellipsis） | |
| .gcim__listbox .corner （リストコントロールの右下角のスタイル） |
背景色 | background-color |
| .gcim__listbox .corner[resize="true"] （リストコントロールのリサイズ可の場合の右下角のスタイル） |
背景（色、画像など） | background-color, background-image |
| .gcim__listbox .grid-line--bottom--right （リストコントロールのグリッド線のスタイル） |
線の色、線種、太さ | border-right, border-bottom |
| .gcim__listbox .resize-line （列のリサイズ線のスタイル） |
線の色、線種、太さ | border-left |
| .gcim__listbox .text-truncate-style （テキストが表示幅を超えた場合の表示方法） |
テキストの省略表示のスタイル | text-overflow（clip または ellipsis） |
| .list_overlay （コントロール無効時のスタイル） |
オーバーレイ（色、画像など） | background, background-color, background-image |
| 透過度 | opacity |
チェックボックス
対象：リストの1列目に表示するチェックボックス
| CSSクラス（概要） | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim_checkbox .checkbox-span （非チェック時のチェックボックスのスタイル） |
チェックボックスの枠 | border |
| 角丸 | border-radius | |
| サイズ | width, height | |
| .gcim_checkbox .checkbox:checked + .checkbox-span （チェック時のチェックボックスのスタイル） |
チェックボックスの枠 | border |
| 背景色 | background-color | |
| .gcim_checkbox .checkbox-span::after （チェックマークのスタイル） |
チェックの色 | border-color |
| チェックの太さ | border-width | |
| チェックの大きさ | width, height | |
| 表示位置 | top, left |