Ich erstelle eine benutzerdefinierte Analyseseite und repliziere die Benutzeroberfläche der nativen Aktionsleiste in Salesforce1. Die Absicht ist, die Aktionsleiste am unteren Bildschirmrand zu fixieren. Es scheint gut in Android und Browser-Emulator zu funktionieren, aber nicht in iOS-App.Salesforce Visualforce CSS behoben div
CSS
#dashboard-utility-banner{
border-top:1px solid #999;
background-color:#eeeeee;
position:fixed;
bottom:0px;
height:74px;
}
#dashboard-utility-banner .utility-tools{
text-align: center;
font-size: 11px;
}
Bootstrap HTML
<div id="dashboard-utility-banner" class=" col-md-12 col-xs-12">
<div class = "col-md-4 col-sm-4 col-xs-4 customTextFontClass utility-tools" >
<a href="#" onClick="createNote();return false;">
<span class="slds-icon_container slds-icon_container--circle slds-icon-standard-performance">
<svg aria-hidden="true" class="slds-icon slds-icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS0102,'assets/icons/utility-sprite/svg/symbols.svg#note')}"></use>
</svg>
</span><br/><span class="">Create Note</span>
</a>
</div>
<div class = "col-md-4 col-sm-4 col-xs-4 customTextFontClass utility-tools" >
<a href="#" onClick="showPriceList();return false;">
<span class="slds-icon_container slds-icon_container--circle slds-icon-standard-topic">
<svg aria-hidden="true" class="slds-icon slds-icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS0102,'assets/icons/utility-sprite/svg/symbols.svg#cases')}"></use>
</svg>
</span><br/><span class="">Price List</span>
</a>
</div>
<div class = "col-md-4 col-sm-4 col-xs-4 customTextFontClass utility-tools" >
<a href="/apex/displaySiteAccounts?accountNumber={!accountNumber}&id={!accountID}">
<span class="slds-icon_container slds-icon_container--circle slds-icon-standard-account">
<svg aria-hidden="true" class="slds-icon slds-icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS0102,'assets/icons/utility-sprite/svg/symbols.svg#company')}"></use>
</svg>
</span><br/><span class="">Locations</span>
</a>
</div>
</div>
Ich habe einige weitere Details bezüglich der Aktionsleiste hinzugefügt. In Bezug auf die Browserkompatibilität wird die Seite nur über iOS angezeigt. Außerdem stammen die SVG-Größen aus der CSS-Bibliothek von Salesforce Lightning Experience. (Beachten Sie die Klassen auf dem Container). https://www.lightningdesignsystem.com/components/icons/ –