Pages UI
v5.0.1 - Pages Angular
v5.0.1 - Pages Angular
  • Getting Started
  • Layouts
  • Routing
  • Styles
  • Layout Components
    • Header
    • Menu Items
    • Sidebar
    • Horizontal Menu
    • Secondary Sidebar
    • Quick View
    • Overlay Search
  • Directives
    • Parallax
    • Retina Image
  • Bootstrap Components
  • Forms
    • Checkbox and Radio
    • Form Group
    • Input Helpers
    • Switch Toggle
    • Select
    • Select FX
    • Typeahead
    • Date Picker
    • Time Picker
    • Quill Editor
    • File Uploader
  • UI Components
    • Progress Bar
    • List View
    • Cards
    • Social Cards
    • Collapse
    • Tabs
    • Tree View
    • Sliders
    • Notifications
  • Tables / Datatables
  • Maps
  • Session and other pages
  • Service
  • Dashboards
  • Widgets
  • Charts
  • Change log
Powered by GitBook
On this page

Styles

Pages Angular is build using SCSS and you can find it in src/app/@pages/styles. This folder contains all modules with vendor / 3rd party plugin styles.

Its important to notice that each demo page / layout will have different modules included on runtime.

How each page / layout has its own styles included

Pages depend on layouts which are found in src/app/@pages/layouts. Layouts differ from the each route you have set in your main src/app/app.routing.ts

example login and other session pages will not have most of the style modules included in other pages like progress bar & charts

{
    path: 'condensed',
    component: BlankComponent,
    children: [{
      path: 'session',
      loadChildren: './session/session.module#SessionModule'
    }]
  },

the layout used in this is called "BlankComponent" if you visit @pages/layout/blank/blank.component.scss imported from styles folder.

Likewise each layout will have its own .scss file having its own module.

PreviousRoutingNextHeader

Last updated 6 years ago