Label Control Container

Label/Control containers are used in conjuction with a Rounded Control Panel to provide rows of labels and controls as seen in applications such as Calendar and Contacts.

To use a Label/Control container you first create a <div> with the data-bb-type="label-control-container" attribute. You then create a <div> with the data-bb-type="label-control-horizontal-row" attribute for each row you want to add to the container. You then create another <div> for your label with the attribute data-bb-type="label" and the contents of this <div> are displayed as the text of the label. The control is then added by adding another <div>. In this example we are using a button and input box. More on buttons later.

<div data-bb-type="screen">
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Font Setting</div>
		<div data-bb-type="label-control-container">
			<div data-bb-type="row">
			   <div data-bb-type="label">Settings:</div>
			   <div data-bb-type="button" onclick="openEditScreen()">Edit</div>
		   </div>
		   <div data-bb-type="row">
			   <div data-bb-type="label">Your Name:</div>
			   <input type="text" value="Hello World"/>
		   </div>
		</div>
	</div>
</div>