Movatterモバイル変換

[0]ホーム
URL:

CoreUI Angular Logo
Framework:
Getting startedIntroductionSupport CoreUICustomizeSassOptionsCSS VariablesLayoutBreakpointsContainersGridColumnsGuttersFormsOverviewAutocompletePRODate PickerPRODate Range PickerPROForm ControlSelectMulti SelectPROChecks & RadiosPassword InputPRORangeRange SliderPRORatingPROStepperPROInput GroupFloating LabelsLayoutTime PickerPROValidationComponentsAccordionAlertAvatarBadgeBreadcrumbButtonButton GroupCalendarPROCalloutCardCarouselClose buttonCollapseDropdownFooterHeaderImageList GroupLoading ButtonPROModalNavNavbarOffcanvasPaginationPlaceholderPopoverProgressSmart PaginationPROSmart TablePROSidebarSpinnerTableTabsNewToastTooltipWidgetsIconsChartsTemplatesNewAdmin & DashboardDownloadInstallationCustomizeContentMigrationv4 → v5v3 → v4Angular version
DownloadHire UsGet CoreUI PRO
On this page

CoreUI 4 Angular Migration

Track and review changes to the CoreUI Angular components to help you migrate from v3 to v4.

CoreUI for Angular is the Angular version of CoreUI components library, so before read the following guide, please check alsoCoreUI 3 to 4 migration guide.

Project structure

Template project structure remains mostly unchanged.

coreui-angular-admin-template├── src/│   ├── app/|   │   ├── containers/|   │   ├── icons/|   │   ├── views/|   │   └── app.module.ts│   ├── assets/│   ├── scss/│   ├── ...│   ├── main.ts│   └── index.html│├── ...├── tsconfig.json├── angular.json└── package.json

Template layout

src/app/containers/default-layout/

CoreUI v3

─ c-sidebar  ├─ c-sidebar-brand  └─ c-sidebar-nav─ c-sidebar aside─ c-wrapper  ├─ c-header fixed  ├─ c-toggler  ├─ ...  ├─ c-subheader  │  └─ c-breadcrumb  ├─ c-body  │  └─ main  │     └─ c-container fluid  │        └─ router-outlet  └─ c-footer

CoreUI v4

─ c-sidebar  ├─ c-sidebar-brand  ├─ c-sidebar-nav  └─ c-sidebar-toggler─ c-sidebar #aside─ div  ├─ c-header  │  ├─ c-container fluid  │  ├─ c-header-divider  │  └─ c-container fluid  │     └─ c-breadcrumb-router  ├─ div  │  └─ c-container  │     └─-router-outlet  └─ c-footer

Styles

See:src/scss/style.scss

Components

Accordion

v3v4
c-accordionc-accordion
c-accordion-group-
-c-accordion-item
-cAccordionButton

Alert

v3v4
c-alertc-alert
-cAlertHeading
-cAlertLink

c-alert

v3v4
Input
closeButtondismissible
showvisible
iconHtml-
timeout-
Output
dismissedvisibleChange
timer-

Avatar

v3v4
-c-avatar

Badge

v3v4
c-badgec-badge

c-badge

v3v4
Input
shapeshape
`colorcolor
-position
-size
-textColor

Breadcrumb

v3v4
c-breadcrumbc-breadcrumb
-c-breadcrumb-item
cBreadcrumbRouterc-breadcrumb-router

You can compose breadcrumbs with items, or use default active route basedc-breadcrumb-router component.

Button

v3v4module
cButtoncButton
c-button-groupc-button-groupButtonGroup
cButtonRadio-
cButtonRadioGroup-
c-button-toolbarc-button-toolbarButtonGroup
-cButtonClose

cButton

v3v4
Input
block-
shapeshape
variantvariant
sizesize
colorcolor
-type
tabindex-
disableddisabled
pressedactive

c-button-group

v3v4
Input
-role
sizesize
verticalvertical

c-button-toolbar

v3v4
Input
-role
justify-

Callout

v3v4
c-calloutc-callout

Card

v3v4
c-cardc-card
c-card-bodyc-card-body
c-card-footerc-card-footer
c-card-groupc-card-group
c-card-headerc-card-header
c-card-header-actions-
-cCardImg
-cCardLink
-cCardText
-cCardTitle
-cCardSubtitle

c-card

v3v4
Input
colorcolor
textColortextColor
accentColor-
align-
borderColor-

c-card-body, c-card-header, c-card-footer

v3v4
Input
align-
borderColor-
color-
textColor-

c-card-group

v3v4
Input
deck-
column-

Carousel

v3v4
c-carouselc-carousel
c-carousel-captionc-carousel-caption
c-carousel-controlc-carousel-control
c-carousel-indicatorsc-carousel-indicators
c-carousel-innerc-carousel-inner
c-carousel-itemc-carousel-item

Collapse

v3v4
cCollapsecCollapse

cCollapse

v3v4
Input
duration-
transition-
animate-
showvisible
navbarnavbar
horizontal

Dropdown

v3v4
cDropdownc-dropdown
cDropdownTogglecDropdownToggle
-cDropdownClose
cDropdownHeadercDropdownHeader
cDropdownItemcDropdownItem
-cDropdownItemPlain
cDropdownMenucDropdownMenu
cDropdownDividercDropdownDivider

c-dropdown

v3v4
Input
cDropdowndirection
cDropdownAlignalignment

cDropdownToggle

v3v4
Input
cDropdownCaretcaret,split

Form

See:Forms

v3v4
cFormcForm
c-form-checkc-form-check
-cFormCheckInput
-cFormCheckLabel
c-form-feedbackc-form-feedback
-cFormFloating
c-form-group-
c-form-textcFormText
cInputcFormControl
c-input-groupc-input-group
c-input-group-append-
c-input-group-prepend-
c-input-group-textcInputGroupText
cLabelcLabel
cSelectcSelect
cTextareacFormControl

cForm

v3v4
Input
inline-
wasValidatedvalidated

c-form-check

v3v4
Input
custom-
disabled-
variant-

cInput

v3v4
Input
custom-

cSelect

v3v4
Input
custom-

cLabel

v3v4
Input
hidden-
variant-
custom-

c-input-group

v3v4
Input
sizesizing

Grid

v3v4
c-containerc-container
cRowcRow
c-rowc-row
cColcCol
c-colc-col
-[gutter]

c-row

v3v4
Input
noGutters-
alignV-
alignH-

Image

v3v4
cImgcImg

List Group

v3v4
cListGroupcListGroup
cListGroupItemcListGroupItem

cListGroup

v3v4
Input
horizontalhorizontal
accent-
flushflush

cListGroupItem

v3v4
Input
accent-
action-
activeactive
colorcolor
divider-

Modal

v3v4
c-modalc-modal
#modalBodyc-modal-body
#modalFooterc-modal-footer
#modalHeaderc-modal-header
-cModalTitle
-cModalToggle

c-modal

v3v4
Input
color-
closeOnBackdropbackdrop

Nav

v3v4
c-navc-nav
c-nav-itemc-nav-item
cNavLinkcNavLink

c-nav

v3v4
Input
filllayout
justifiedlayout
vertical-
inCard-
variantvariant

cNavLink

v3v4
Input
tabindex-

Navbar

v3v4
c-navbarc-navbar
c-navbar-brandcNavbarBrand
c-navbar-navc-navbar-nav
c-navbar-textc-navbar-text
-cNavbarToggler

c-navbar

v3v4
Input
lightcolorScheme
colorcolor
fixedplacement
stickyplacement
expandableexpand

Offcanvas

v3v4
-c-offcanvas
-c-offcanvas-body
-c-offcanvas-header
-cOffcanvasTitle
-cOffcanvasToggle

Pagination

v3v4
-c-pagination
-cPageLink
-cPageItem
-c-page-item

Placeholder

v3v4
-cPlaceholder
-cPlaceholderAnimation

Popover

v3v4
-cPopover

Progress

v3v4
c-progressc-progress
c-progress-barc-progress-bar

c-progress

v3v4
Input
size-

c-progress-bar

v3v4
Input
stripedvariant
precision-
min-
max-

Sidebar

v3v4
c-sidebarc-sidebar
c-sidebar-navc-sidebar-nav

c-sidebar

v3v4
Input
fixed-
unfoldableunfoldable
overlaidoverlaid
minimize-
breakpoint-
mobile-
showvisible
aside-
hideOnMobileClick-

Shared Module

v3v4
cHtmlAttrcHtmlAttr
-cTemplateId

Spinkit → Spinner

v3v4
c-spinkitc-spinner
v3v4
Input
center-
name-
growvariant

Switch → Form Check

v3v4Module
c-switchc-form-checkswitchForm

Table

v3v4
-cTable
-cTableActive
-cTableColor

Tabset → Tabs

v3v4
c-tabset-
c-tab-pane-
c-tablist-
c-tab-content-
c-tab-
-c-tab-content
-cTabContent
-c-tab-pane

Toast

v3v4
c-toastc-toast
c-toast-bodyc-toast-body
c-toast-headerc-toast-header
c-toasterc-toaster
cToasterHostcToasterHost
cToastClosecToastClose

c-toast

v3v4
Input
showvisible
index-
Output
shownvisibleChange
hiddenvisibleChange

Tooltip

v3v4
-cTooltip

Utilities

v3v4
-cAlign
-cBgColor
-cBorder
-cRounded
-cTextColor

Layout

v3v4module
c-bodydiv
c-footerc-footerFooter
c-headerc-headerHeader
c-subheader-
c-header-brandc-header-brandHeader
-c-header-dividerHeader
-c-header-navHeader
-c-header-textHeader
-cHeaderTogglerHeader
c-wrapperdiv

c-header

v3v4
Input
colorScheme-
fixedposition

c-header-brand

v3v4
Input
minimized-

c-footer

v3v4
Input
fixedposition

Embed

See:https://coreui.io/docs/helpers/ratio/

Media

See:https://coreui.io/docs/utilities/flex/#media-object

CoreUI for Angular is Open Source UI Components Library for Angular.

Currently v5.5.17 Code licensed MIT, docs CC BY 3.0 .
CoreUI PRO requires acommercial license.
[8]ページ先頭
©2009-2025 Movatter.jp