Skip to content

Instantly share code, notes, and snippets.

@tyoshikawa1106
Created March 11, 2014 13:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tyoshikawa1106/9485818 to your computer and use it in GitHub Desktop.
Save tyoshikawa1106/9485818 to your computer and use it in GitHub Desktop.
VisualStrap Demo ⑤
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:outputPanel styleClass="btn-group" layout="block">
<apex:commandButton value="Action" styleClass="btn-danger" action="{doAction}" />
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<apex:outputPanel styleClass="caret"></apex:outputPanel>
&nbsp;
</button>
<ul class="dropdown-menu" role="menu">
<li>
<apex:commandLink value="Do Action 1" action="{doAction1}" />
</li>
<li>
<apex:commandLink value="Do Action 2" action="{doAction2}" />
</li>
<li>
<apex:commandLink value="Do Action 3" action="{doAction3}" />
</li>
</ul>
</apex:outputPanel>
</vs:visualstrapblock>
</apex:form>
</apex:page>
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<center>
<vs:pageheader icon="home" title="User Dashboard" subtitle="VisualStrap Site Guest User"/>
</center>
</vs:visualstrapblock>
</apex:form>
</apex:page>
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<vs:progressbar type="primary" value="10"/>
<vs:progressbar type="success" value="20"/>
<vs:progressbar type="info" value="30"/>
<vs:progressbar type="warning" value="40"/>
<vs:progressbar type="danger" value="50"/>
<hr/>
<hr/>
<vs:progressbar type="primary" striped="true" value="60"/>
<vs:progressbar type="success" striped="true" value="70"/>
<vs:progressbar type="info" striped="true" value="80"/>
<vs:progressbar type="warning" striped="true" value="90"/>
<vs:progressbar type="danger" striped="true" value="100"/>
<hr/>
<hr/>
<vs:progressbar type="primary" animated="true" value="90"/>
<vs:progressbar type="success" animated="true" value="80"/>
<vs:progressbar type="info" animated="true" value="70"/>
<vs:progressbar type="warning" animated="true" value="60"/>
<vs:progressbar type="danger" animated="true" value="50"/>
</vs:visualstrapblock>
</apex:form>
</apex:page>
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<ul class="list-group-item">
<li class="list-group-item active">This is active</li>
<li class="list-group-item">This is item 1</li>
<li class="list-group-item">This is item 2</li>
<li class="list-group-item">This is item 3</li>
<li class="list-group-item">
<vs:glyph icon="calendar"/> I can also have a glyph
</li>
</ul>
</vs:visualstrapblock>
</apex:form>
</apex:page>
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<vs:tooltip text="Hey I have a tooltip">
<apex:commandButton value="Button" styleClass="btn-primary"/>
</vs:tooltip>
<vs:tooltip text="Hey I am a inputText">
<apex:inputText />
</vs:tooltip>
</vs:visualstrapblock>
</apex:form>
</apex:page>
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:commandButton value="Launch My Modal Popup" html-data-toggle="modal" html-data-target="#myModal" styleClass="btn-primary brn-lg"/>
<!--modal that will be displayed to the user-->
<vs:modal title="My Modal" id="myModal">
My Modal Popup
<apex:outputPanel layout="block" styleClass="modal-footer">
<apex:commandButton value="Close" styleClass="btn-warning" html-data-dismiss="modal"/>
<apex:commandButton value="Save Changes" styleClass="btn-success" />
</apex:outputPanel>
</vs:modal>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment