【Salesforce】Lightning Design Systemで色々なボタンを作る

3853 ワード
button LightningDesignSystem Salesforce button テキストリンク

ボタン

以下が基本的なボタンのサンプルコードです。
各ボタンにLightning Design Systemのクラスを追加することで、ボタンのスタイルを変更できます。

<apex:page title="Test" showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0">
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="ja">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <apex:slds />
    </head>

    <body style="padding: 8px;">
      <button class="slds-button slds-button_brand">保存</button>
      <button class="slds-button slds-button_destructive">削除</button>
      <button class="slds-button slds-button_neutral" disabled="true">無効</button>
      <button class="slds-button slds-button_neutral">キャンセル</button>
    </body>
  </html>
</apex:page>

以下のボタンを作成しました。
・保存（主要なアクション）
・削除（破壊的なアクション）
・無効（無効なアクション）
・キャンセル（普通のアクション）

ボタンのクラス名一覧

クラス名 備考
slds-button_brand 主要なアクションで使われる
slds-button_destructive 破壊的なアクションで使われる
slds-button_neutral 普通のアクションで使われる

参考

■Buttons
https://lightningdesignsystem.com/components/buttons/