Getting Started with the Angular Dashboard Layout

Поделиться
HTML-код
  • Опубликовано: 9 июл 2024
  • Learn to create an Angular app and configure the Syncfusion Angular Dashboard Layout component within it. You will also learn how to add multiple panels and configure them in a structured layout. Finally, you will see how to drag and resize the panels dynamically.
    Angular Dashboard Layout is a grid-structured layout component that helps create static and dynamic dashboard layouts with panels. It is also referred to as the Angular Dashboard Layout Template. Dashboard panels are the basic building blocks of a dashboard and can be added programmatically or dynamically at runtime. The panels hold UI components and allow resizing, reordering, dragging and dropping, removing, and adding. Components can easily be placed at the desired positions within the grid layout.
    The Angular Dashboard Layout component has a floating support where the panels in the layout will automatically organize themselves by sliding upward to occupy any open spaces. This makes efficient use of the layout for positioning panels.
    The Angular Dashboard Layout is highly responsive, and optimized for desktops, touchscreens, and smartphones. It works well on all mobile phones that use iOS, Android, or Windows OS.
    Tutorial video: www.syncfusion.com/tutorial-v...
    Example Project: github.com/SyncfusionExamples...
    TRIAL LICENSE KEY
    --------------------------
    If you need a trial license key, start your Angular trial from your Syncfusion account and then obtain your trial license key from the downloads page:
    www.syncfusion.com/downloads/...
    Check if you are eligible for a free license for all Essential Studio products on our Community License page:
    www.syncfusion.com/products/c...
    BOOKMARK DETAILS
    -------------------
    [00:00] Introduction - Angular Dashboard Layout
    [00:44] Create an Angular application
    [01:26] Add the Angular Dashboard Layout Component
    [03:32] Add panel header and panel content
    [03:55] Add multiple panels
    [04:49] Create columns in the dashboard
    [05:46] Setting row positions for panels
    [06:14] Height and width of the panels
    [06:51] Dragging and resizing
    ANGULAR DASHBOARD LAYOUT
    -----------------------------------
    Product overview: www.syncfusion.com/angular-co...
    Examples: ej2.syncfusion.com/angular/de...
    Documentation: ej2.syncfusion.com/angular/do...
    Download free trial: www.syncfusion.com/downloads/...
    npmjs package: www.npmjs.com/package/@syncfu...
    SUBSCRIBE
    -----------------
    Syncfusion on RUclips: / syncfusioninc
    Sign up to receive email updates: www.syncfusion.com/account/em...
    SOCIAL COMMUNITIES
    -------------
    Facebook: / syncfusion
    Twitter: / syncfusion
    LinkedIn: / syncfusion
    Instagram: / syncfusion
    #angular #dashboard #layout
  • ХоббиХобби

Комментарии •