Crestron Components Lib - Showcase App

ch5-video-switcher: displayScreenLabel

displayScreenLabel attribute

Default value true.
Enables or disables the display of all labels on screen.

<h5>displayScreenLabel: true</h5>
<ch5-video-switcher
		indexId="idx"
		numberOfSources="5"
		scrollbar="true"
		numberOfScreens="4"
		displayScreenLabel="true"
		numberOfScreenColumns="2">
		<ch5-video-switcher-source 
				iconClass="fa-solid fa-circle-play">
				<ch5-video-switcher-source-label>
						<template>
								Source-{{idx}}
						</template>
				</ch5-video-switcher-source-label>
		</ch5-video-switcher-source>
		<ch5-video-switcher-source 
				iconClass="fa-brands fa-youtube">
				<ch5-video-switcher-source-label>
						<template>
								Source-{{idx}}
						</template>
				</ch5-video-switcher-source-label>
		</ch5-video-switcher-source>
		<ch5-video-switcher-source 
				iconClass="fa-solid fa-film">
				<ch5-video-switcher-source-label>
						<template>
								Source-{{idx}}
						</template>
				</ch5-video-switcher-source-label>
		</ch5-video-switcher-source>
		<ch5-video-switcher-source 
				iconClass="fa-solid fa-camera">
				<ch5-video-switcher-source-label>
						<template>
								Source-{{idx}}
						</template>
				</ch5-video-switcher-source-label>
		</ch5-video-switcher-source>
		<ch5-video-switcher-source 
				iconClass="fa-solid fa-circle-play">
				<ch5-video-switcher-source-label>
						<template>
								Source-{{idx}}
						</template>
				</ch5-video-switcher-source-label>
		</ch5-video-switcher-source>
		<ch5-video-switcher-screen 
				alignLabel="left">
				<ch5-video-switcher-screen-label>
						<template>
								video-{{idx}}
						</template>
				</ch5-video-switcher-screen-label>
		</ch5-video-switcher-screen>
		<ch5-video-switcher-screen 
				alignLabel="right">
				<ch5-video-switcher-screen-label>
						<template>
								video-{{idx}}
						</template>
				</ch5-video-switcher-screen-label>
		</ch5-video-switcher-screen>
		<ch5-video-switcher-screen 
				alignLabel="center">
				<ch5-video-switcher-screen-label>
						<template>
								video-{{idx}}
						</template>
				</ch5-video-switcher-screen-label>
		</ch5-video-switcher-screen>
		<ch5-video-switcher-screen 
				alignLabel="center">
				<ch5-video-switcher-screen-label>
						<template>
								video-{{idx}}
						</template>
				</ch5-video-switcher-screen-label>
		</ch5-video-switcher-screen>
</ch5-video-switcher>
<br/><br/>
<h5>displayScreenLabel: false</h5>
<ch5-video-switcher
		indexId="idx"
		numberOfScreenColumns="2"
		numberOfSources="5"
		scrollbar="true"
		numberOfScreens="4"
		displayScreenLabel="false">
		<ch5-video-switcher-source 
				iconClass="fa-solid fa-circle-play">
				<ch5-video-switcher-source-label>
						<template>
								Source-{{idx}}
						</template>
				</ch5-video-switcher-source-label>
		</ch5-video-switcher-source>
		<ch5-video-switcher-source 
				iconClass="fa-brands fa-youtube">
				<ch5-video-switcher-source-label>
						<template>
								Source-{{idx}}
						</template>
				</ch5-video-switcher-source-label>
		</ch5-video-switcher-source>
		<ch5-video-switcher-source 
				iconClass="fa-solid fa-film">
				<ch5-video-switcher-source-label>
						<template>
								Source-{{idx}}
						</template>
				</ch5-video-switcher-source-label>
		</ch5-video-switcher-source>
		<ch5-video-switcher-source 
				iconClass="fa-solid fa-camera">
				<ch5-video-switcher-source-label>
						<template>
								Source-{{idx}}
						</template>
				</ch5-video-switcher-source-label>
		</ch5-video-switcher-source>
		<ch5-video-switcher-source 
				iconClass="fa-solid fa-circle-play">
				<ch5-video-switcher-source-label>
						<template>
								Source-{{idx}}
						</template>
				</ch5-video-switcher-source-label>
		</ch5-video-switcher-source>
		<ch5-video-switcher-screen>
				<ch5-video-switcher-screen-label>
						<template>
								video-{{idx}}
						</template>
				</ch5-video-switcher-screen-label>
		</ch5-video-switcher-screen>
		<ch5-video-switcher-screen>
				<ch5-video-switcher-screen-label>
						<template>
								video-{{idx}}
						</template>
				</ch5-video-switcher-screen-label>
		</ch5-video-switcher-screen>
		<ch5-video-switcher-screen>
				<ch5-video-switcher-screen-label>
						<template>
								video-{{idx}}
						</template>
				</ch5-video-switcher-screen-label>
		</ch5-video-switcher-screen>
		<ch5-video-switcher-screen>
				<ch5-video-switcher-screen-label>
						<template>
								video-{{idx}}
						</template>
				</ch5-video-switcher-screen-label>
		</ch5-video-switcher-screen>
</ch5-video-switcher>
displayScreenLabel: true


displayScreenLabel: false