List Overview

Generic UI List component is in the early access phase.

Eat healthy breakfast7:30 AM
Clean the house10:00 AM
Have Lunch with Mark1:30 PM
Go to the movie theatre9:00 PM
list.component.ts
list.component.scss
data.ts
@Component({
	template: `
		<gui-list class="todo-list" [source]="source">
			<gui-list-item>
				<ng-template let-item="item">
					<span class="gui-list-item-color"></span>
					<span class="gui-list-item-title">{{item.title}}</span>
					<span class="gui-list-item-time">{{item.time}}</span>
				</ng-template>
			</gui-list-item>
		</gui-list>
	`,
	styleUrls: [`./list.component.css`]
})
export class ToDoListComponent {

	source = data;

}
.todo-list .gui-list-item-color {
	border-radius: 50%;
	background: green;
	display: inline-block;
	margin-right: 8px;
	height: 8px;
	width: 8px;
}

.todo-list .gui-list-item-title {
	font-size: 16px;
	display: inline-block;
}

.todo-list .gui-list-item-time {
	margin-left: auto;
	color: #666;
	font-size: 14px;
	display: inline-block;
}

.todo-list .gui-list-item div {
	display: flex;
	align-items: center;
}

.todo-list .gui-list-item {
	margin-bottom: 12px;
}
[
    {
        "time": "7:30 AM",
        "title": "Eat healthy breakfast",
        "status": "green"
    },
    {
        "time": "10:00 AM",
        "title": "Clean the house",
        "status": "green"
    },
    {
        "time": "1:30 PM",
        "title": "Have Lunch with Mark",
        "status": "red"
    },
    {
        "time": "9:00 PM",
        "title": "Go to the movie theatre",
        "status": "yellow"
    }
]

Advanced

The list component allows us to present data in a more complex way. At the example below you can see an example of a list presenting items as cards. The list component uses Angular template mechanism to render elements.

D
Design layout for the website
Website require small improvements
12:00 - 13:00
M
Meet with customer
Customer has many ideas...
14:00 - 14:30
D
Deploy new version of the system
Production branch is ready
16:00 - 18:00
G
Gather requirements
For new features
After 20:00
list.component.ts
list.component.scss
data.ts
@Component({
	template: `
		<div class="task-container">

			<gui-list
					[source]="source"
					class="task-list">

				<gui-list-item class="'list-item-task'">
					<ng-template let-item="item">

						<div class="task-item"
						[ngClass]="{'task-open': item.status === 'OPEN',
						'task-in-progress': item.status === 'IN PROGRESS',
						'task-closed': item.status === 'CLOSED',
						'task-postponed': item.status === 'POSTPONED'}">

							<div class="task-item-left">

								<div class="task-item-circle">
									<span>{{item.title[0]}}</span>
								</div>

							</div>

							<div class="task-item-info">
								<div class="task-item-title">{{item.title}}</div>
								<div class="task-item-desc">{{item.desc}}</div>
								<div class="task-item-time">{{item.time}}</div>
							</div>

						</div>

					</ng-template>
				</gui-list-item>
			</gui-list>

		</div>
	`,
	styleUrls: [`./list.component.css`]
})
export class AdvancedListComponent {

	source = data;

}
$task-gray: #f5f6fa;

$task-blue-light: #eff6ff;
$task-blue: #5f88fe;
$task-green: #2ae2bd;
$task-yellow: #feb721;
$task-red: #ff7e7d;

.task-container {
	background: #f6f5f4;
	padding: 20px 0;
}

.task-list {
	font-family: Roboto;

	.task-item {
		border-left: 3px solid #333;
		padding: 8px 8px 8px 0;
		display: flex;
	}

	.task-open {
		border-left-color: $task-blue;

		.task-item-circle {
			background: $task-blue;
		}

		.task-item-time {
			color: $task-blue;
		}
	}

	.task-in-progress {
		border-left-color: $task-red;

		.task-item-circle {
			background: $task-red;
		}

		.task-item-time {
			color: $task-red;
		}
	}

	.task-closed {
		border-left-color: $task-yellow;

		.task-item-circle {
			background: $task-yellow;
		}

		.task-item-time {
			color: $task-yellow;
		}
	}

	.task-postponed {
		border-left-color: $task-green;

		.task-item-circle {
			background: $task-green;
		}

		.task-item-time {
			color: $task-green;
		}
	}

	.task-item-left,
	.task-item-info {
		height: 100%;
	}

	.task-item-left {
		width: 72px;
	}

	.task-item-info {
		flex-grow: 1;
	}

	.task-item-circle {
		background-color: $task-blue;
		border-radius: 50%;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		margin: 0 auto;
		height: 42px;
		width: 42px;
	}

	.gui-list-item {
		background: white;
		border-radius: 8px;
		border: 0;
		box-shadow: 0 0 2px rgba(0,0,0, 0.1);
		cursor: pointer;
		margin: 0 auto 12px;
		transition: 0.2s background-color;
		width: 400px;

		.gui-list-item-container {
			padding: 16px 12px;
		}

		.task-item-title {
			color: #333;
			font-size: 17px;
			font-weight: bold;
		}

		.task-item-desc {
			color: #999;
			font-size: 14px;
			margin-top: 10px;
		}

		.task-item-time {
			font-size: 13px;
			font-weight: bold;
			margin-top: 20px;
		}

	}

}
[
    {
        "title": "Design layout for the website",
        "desc": "Website require small improvements",
        "status": "IN PROGRESS",
        "time": "12:00 - 13:00"
    },
    {
        "title": "Meet with customer",
        "desc": "Customer has many ideas...",
        "status": "OPEN",
        "time": "14:00 - 14:30"
    },
    {
        "title": "Deploy new version of the system",
        "desc": "Production branch is ready",
        "status": "CLOSED",
        "time": "16:00 - 18:00"
    },
    {
        "title": "Gather requirements",
        "desc": "For new features",
        "status": "POSTPONED",
        "time": "After 20:00"
    }
]

Paging

When you try to display a larger set of data it may cause some problems. It's hard to present thousands of elements on one screen. In order to do it you may use paging feature of angular list component.



Mark Ross - Team LeaderGenco Pura Olive Oil Company
Concepción King - CarpenterGlobex Corporation
Vanecia Green - PainterSoylent Corp
Samara Anderson - ElectricianInitech
Maxine Hamilton - SEO ManagerGekko & Co
Dan Lee - DirectorSterling Cooper
Paul Long - Web DeveloperHooli
Madonna Snyder - Product ManagerVehement Capital Partners
Oriole Perkins - Public RelationsMassive Dynamic
Ernest Jordan - CopywriterWonka Industries

Paging advanced



Card view

The list component can be used to displayed a list of cards instead of rows.



Card & List view



Searching



Searching Advanced











We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.