Crestron Components Lib - Showcase App

ch5-keypad: type

Type attribute

Possible values are danger, text, warning, info, success, default, primary, secondary

Overrides the appearance of each of the buttons inside the component with alternative CSS defined in classes defined with ch5-keypad--type where type is the value of the property. If no "type" is provided, the type of 'default' is used.

HTML
JS
CSS

<div class="flex">
	<div>
		<h4>rounded-rectangle w/o extra button</h4>
		<ch5-keypad 
		showExtraButton="false" 
		type="default" 
		shape="rounded-rectangle"></ch5-keypad>
	</div>
	<div>
		<h4>square w/o extra button</h4>
		<ch5-keypad     
		showExtraButton="false"
		type="warning" 
		shape="square"></ch5-keypad>
	</div>
	<div>
		<h4>circle w/o extra button</h4>
		<ch5-keypad 
		showExtraButton="false" 
		type="info" 
		shape="circle"></ch5-keypad>
	</div>
	<div>
		<h4>circle w/o extra button</h4>
		<ch5-keypad 
		showExtraButton="false" 
		type="danger" 
		shape="circle"></ch5-keypad>
	</div>
	<div>
		<h4>square w/o extra button</h4>
		<ch5-keypad 
		showExtraButton="false" 
		type="secondary" 
		shape="square"></ch5-keypad>
	</div>
	<div>
		<h4>rounded-rectangle with extra button</h4>
		<ch5-keypad 
		showExtraButton="true" 
		type="text" 
		shape="rounded-rectangle"></ch5-keypad>
	</div>
	<div>
		<h4>square with extra button</h4>
		<ch5-keypad 
		showExtraButton="true" 
		type="primary" 
		shape="square"></ch5-keypad>
	</div>
	<div>
		<h4>circle with extra button</h4>
		<ch5-keypad 
		showExtraButton="true" 
		type="success" 
		shape="circle"></ch5-keypad>
	</div>
</div>

.class-div {
	padding: 20px 0 20px 0;  
	border-bottom: solid 1px dimgray;
}
.flex {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.flex > div {
	flex-grow: 1;
	flex-basis: 0;
}