Visualforce 開発者ガイド
jSLDS を使用した Salesforce アプリケーション用の Visualforce ページの作成
最近アクセスされた取引先を表示する Visualforce ページを作成し、Lightning Design System (SLDS) でスタイル設定して、モバイルナビゲーションメニューに追加しましょう。
- まず、Visualforce ページを作成しましょう。
- 開発者コンソールを開き、 をクリックします。ページ名に「SLDSPage」と入力します。
-
エディタで、任意のマークアップを次のように置き換えます。
- <apex:slds /> タグを使用すると SLDS スタイルシートにアクセスできます。このコンポーネントは、SLDS を静的リソースとしてアップロードして Visualforce ページで使用するための簡単な代替方法です。
- SLDS でスタイル設定したコンテンツは <div class="slds-scope"> ラッパーで囲む必要があります。SLDS スタイルは、この内部に含まれる要素にのみ適用されます。
- このページはモバイルにも対応します。ページを Salesforce モバイルナビゲーションメニューに追加しましょう。
-
モバイルアプリケーション用のページを有効にします。
- [設定] から、[クイック検索] ボックスに「Visualforce ページ」と入力し、[Visualforce ページ] を選択します。
- リストで [SLDSPage] Visualforce ページの横にある [編集] をクリックします。
- [Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能] を選択します。
- [保存] をクリックします
-
Visualforce ページのタブを作成します。
- [設定] から、[クイック検索] ボックスに「タブ」と入力し、[タブ] を選択します。
- [Visualforce タブ] セクションで、[新規] をクリックします。
- [Visualforce ページ] ドロップダウンリストで、「SLDSPage」を選択します。
-
[タブの表示ラベル] 項目に、「SLDS Page」(SLDS ページ) と入力します。
[タブ名] 項目は自動的に入力されます。
-
[タブスタイル] 項目をクリックして [ダイアモンド] スタイルを選択します。
このスタイルのアイコンは、Salesforce モバイルナビゲーションメニューのページのアイコンとして表示されます。
- [次へ] をクリックし、[次へ] をクリックしてから [保存] をクリックします。
-
タブをモバイルナビゲーションメニューに追加します。
- [設定] から、[クイック検索] ボックスに「モバイルアプリケーション」と入力し、[Salesforce ナビゲーション] を選択します。
-
[SLDS Page (SLDS ページ)] タブを選択し、[追加] をクリックします。
SLDS 項目が [選択済み] リストの最後に追加されます。
- [保存] をクリックします。
