本日のゴール
今回はヘッダー、左ナビゲーション用のCSS、JavaScriptを作成し、ヘッダーを完成させます。
【完成イメージ】
ヘッダー用カスタムコントロールを作成する
| 1 | ヘッダーと左ナビゲーションは下記URLのCSSを参考に作成している。 【参考URL】 https://themesberg.github.io/simple-bootstrap-5-dashboard/ 【解説】 作り方としては、HTML、CSS、ファイル構造などをローカルPC上に作り、理想の形をデザイン、動きを確認した上で、XPageに移植します。 |
 |
||||||||||
| 2 | 【ヘッダーと左ナビゲーションを構成するcssを作成する】 リソース＞スタイルシートを選択し、 「新規スタイルシート」 ボタンをクリックする。 |
 |
||||||||||
| 3 | スタイルシートに名前をつけ、OKボタンをクリックする。
※拡張子は自動的に追加されるため、名前には拡張子をつけない |
 |
||||||||||
| 4 | スタイルシートに横幅を設定するためのクラスを入力し、保存する。 ソースは、【dashboard5CSJS】を参照。 ※navbarクラス、nav-linkクラスなどはBootstrapのクラスを上書きする形になることを理解しておく。(Bootstrap標準の表示にならない) |
 |
||||||||||
| 5 | 【ヘッダー用カスタムコントロールを作成する】 カスタムコントロールをクリックし、 「新規カスタムコントロール」 ボタンをクリックする。 |
 |
||||||||||
| 6 | カスタムコントロールに名前をつけ、OKボタンをクリックする。
【解説】 |
 |
||||||||||
| 7 | ソースタブを開き、<xp:view>タグの内側にヘッダー用のHTMLタグを追加する。 ソースは、【ヘッダーひな形HTML】を参照。 |
 |
||||||||||
| 8 | 【ヘッダーの背景色を定義する】 ヘッダー用HTMLには背景色を定義していないので、オリジナルCSSに定義する。 リソース＞スタイルシートから「css/original.css」を開く。 |
 |
||||||||||
| 9 | バックカラーを指定するクラスを追加する。 ソースは、【オリジナルCSSクラス⑦】を参照。 |
 |
||||||||||
| 10 | ナビゲーションタグ<nav>のクラスに追加した 「org_bg_gray」 を追加する。 |
 |
||||||||||
| 11 | 【ヘッダーにデータベース名を表示する】 左メニューのコントロールタブから 「ラベル」コントロール を、<div class=”navbar-brand”>の下にドロップする。 |
|
||||||||||
| 12 | ラベルにデータベース名を表示するために、プロパティ＞ラベルをクリックする。 ラベルの横にある◇をクリックし、値の計算を選択する。 |
 |
||||||||||
| 13 | 左の参照タブをクリックし、ライブラリで「@functions」を選択する。 SSJSで使える@式の一覧から 「@DbTitle()」 をクリックし、右側の式ウィンドウに書き込み、OKボタンをクリックする。 |
 |
||||||||||
| 14 | 【データベース名の前にアイコンを表示する】 先ほど定義したラベルタグ<xp:label>の前にBootstrapアイコンを表示するアイコンタグを追加する。 <i class=“bi bi-window ms-2 me-3”></i>
|
 |
||||||||||
【dashboard5CSJS】
/*
* bootstrap5 dashboard
*/
/* color variable */
:root{
--active_color :darkorange;
--hover_color :orange;
--main_color :darkorange;
}
.sidebar{
position:fixed;
top:0;
bottom:0;
left:0;
z-index:100;
padding:90px 0 0;
box-shadow:inset -1px 0 0 rgba(0,0,0,.1);
z-index:99;
}
@media(max-width: 767.98px) {
.sidebar{
top:11.5rem;
padding:0;
}
}
.navbar{
box-shadow:inset 0 -1px 0 rgba(0,0,0,.1);
}
@media(min-width: 767.98px) {
.navbar{
top:0;
position:sticky;
z-index:999;
}
}
.sidebar .nav-link{
color:#333;
}
.sidebar .nav-link.active{
color:white;
background-color:var(--active_color);
}
.nav-link:hover{
background-color:var(--hover_color);
}
.nav{
display:block;
}
ul{
list-style:none;
}
.navbar .navbar-toggler{
top:.25rem;
right:1rem;
}【ヘッダーひな形HTML】
<nav class="navbar navbar-dark p-2">
<div class="d-flex col-12 col-md-3 col-lg-2 mb-2 mb-lg-0 flex-wrap flex-md-nowrap justify-content-between">
<div class="navbar-brand">
</div>
<button class="navbar-toggler d-md-none collapsed mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-12 col-md-5 col-lg-8 d-flex align-items-center justify-content-md-end mt-3 mt-md-0">
<div class="me-3 mt-1">
</div>
</div>
</nav>
【オリジナルCSSクラス⑦】
/* header background color */
.org_bg_gray{
background-color:#6c757d;
}
ビュー用XPageにヘッダー用カスタムコントロールを組み込む
|
1 |
【ナビゲーション用のスタイルシートを読み込む】 作成したXPage(subjectsort_vw)を開き、BootstrapのCSSクラスを読み込んだ後に、ナビゲーション用のCSSクラスを読み込むタグを追加する。 ソースは、【リソースファイルの読み込み④】を参照。 |
 |
|
|
2 |
左メニューのコントロールタブから、 カスタムコントロール「ccHeaderNavigation」コントロール を、<div>Header</div>の下にドロップする。 |
|
|
|
3 |
【ガイド用の文字を削除する】 ガイド用文字「<div>Header</div>」を削除し、XPageを保存する。 |
 |
|
|
4 |
ブラウザでプレビューし、表示内容を確認する。 |
 |
|
【リソースファイルの読み込み④】
<xp:styleSheet href="css/dashboard5.css"></xp:styleSheet>
