ビューのスタイルを変更する

「どこでもView」のビューのCSSを使用してスタイルを変更することができます。ここでは、CSSを使用してビューのスタイルを変更する方法について説明します。

CSSのインターフェースについてはCSSクラスを参照してください。

構成

「どこでもView」のビューのスタイルは

  1. Prefix
    「どこでもView」のCSSクラスであることを示すために、プレフィックスとして “gcss”を使用します。

  2. Block
    Webコンポーネントと同じように、独立したページコンポーネントを表します。Blockは、動作(JavaScript)、テンプレートとスタイル(CSS)、およびその他の実装のテクノロジをカプセル化します。Blockは独立しているので、プロジェクトの開発とサポートプロセスを容易にするだけでなく、再利用も可能です。

  3. Element
    それ以外の場所では使用できないブロックの構成部分です。たとえば、メニュー項目はメニューブロックのコンテキスト以外では使用できないためElementになります。

  4. Modifier
    BlockまたはElementの外観と動作を定義します。Modifierの使用はオプションです。Elementは、本質的にはHTML属性と似ています。同じBlockでもModifierの使用によって異なって見えます。たとえば、メニューの外観は、メニューに使用されるModifierによって異なって見えることがあります。
    Modifierには名前と値の2つの部分があります。

命名規則

Block、ElementおよびModifierはBEMエンティティです。「どこでもView」では、これら3つの部分の命名規則として “block-name__elem-name_mod-name_mod-val”を使用します。

  • 名前は小文字のラテン文字を使用します。
  • 文字はハイフン(-)で区切られます。
  • Blockの名前はElementとModifierの名前空間を定義します。
  • Elementの名前はダブルアンダースコア(__)でBlockの名前と区切られます。
  • Modifierの名前はアンダースコア(_)でBlockまたはElementの名前と区切られます。
  • Modifierの値はアンダースコア(_)でModifierの名前と区切られます。
  • bool修飾子の場合は、値は名前に含まれません。

スタイルを設定する

Visualforceページでcssを使用して「どこでもView」のスタイルを変更できます。

次のコードはタイトルバーとオブジェクトパネルのスタイルを変更する例です。

<apex:page standardStylesheets="false" sidebar="false" lightningStylesheets="true" >

  <style>
    /* オブジェクトのボタンを非表示 */
    .gcss .gcss-titlebar__object-btn{
      display: none;
    }

    /* オブジェクトのパネルを非表示 */
    .gcss .gcss-object-pane{
      display: none;
    }

    /* タイトルバーのボタンのスタイルを変更 */
    .gcss .gcss-titlebar__btn{
      border-left: 1px solid gray;
      color: white;
      background-color: gray;
      margin: 0 !important;
    }

    /* タイトルバーのスタイルを変更 */
    .gcss .gcss-titlebar{
      background-color: white;
      color: black;
    }
    
    /* タイトルバーのロゴを非表示 */
   .gcss .gcss-titlebar__logo{
      display: none;
    }
    
    /* ビューの切り換えドロップダウンのアイコンのスタイルを変更 */
    .gcss-view-dropdown .slds-icon{
      fill: black;
    }
    
    /* フッターバーの成功アイコンを非表示 */        
    .gcss-footerbar__icon_success{
      display: none;
    }
</style>
    
  <div style="height:600px;width:100%;">
    <gcss:Spreadsheet showTitleBar="true"
      showToolbar="true"
      object="Contact"
      AllowFormatColumn="true"
      AllowAdd="true"
      AllowEdit="true"
      AllowExport="true"
      AllowFind="true"
      AllowFreezeColumn="true"
      AllowDelete="true"
      AllowDragFill="true"
      AllowDragAndDrop="true"
      AllowMassAddNote="true"
      AllowMassAddTask="true"
      AllowObjectActions="true"
      AllowPaste="true"
      AllowPinRecords="true"
      AllowReadingPane="true" 
      AllowResize="true"
      AllowRefresh="true"
      AllowUISort="true"
      AllowUIFilter="true"
      ShowFormulaBar="true"
      AllowEditFavorite="true"
      AllowManageView="true"
      AllowDesignView="true"
      AllowFormulaColumn="true"
      AllowWorkingColumn="true"
      AllowSummaryRow="true" />
  </div>
</apex:page>
Copyright © 2019 GrapeCity inc. All rights reserved.