Creating friendly and intuitive UI is paramount in web development.

Here is a tip for an angular App that uses bootstrap.ui (angular directives for bootstrap) and bootstrap:

 

Accordion

 

The above UI uses this easy CSS for styling that number:

 

.number {
    background: #69C8C7;
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    line-height: 25px;
    margin-right: 8px;
}

 

And html for the controller and a route contains this markup:

 

<accordion >
	<accordion-group >
	<accordion-heading>
	<p><span class="number">1</span>
		<span class="fa fa-check-circle" ng-show='false'></span> Headline</p>

	</accordion-heading>
	Fill out some information
</accordion-group>

<accordion-group >
<accordion-heading>
<p><span class="number">2</span>
	<span class="fa fa-check-circle" ng-show='false'></span> More options</p>

</accordion-heading>
Fill out some information and select options.
</accordion-group>

</accordion>

 

Notice the check circle can be replaced ¬†when for example you’ve filled out all the data indicating to the user they are done with that section. Implemention and logic is up to you.

 

For more information on Bootstrap UI (these are directives for your angular app)

 

 

 

 

 

Share This:

Leave a Reply