Containers
4Containers are responsible for shaping the layout and creates structure to the views. Almost everything described in the elements chapter should be housed inside a container. There are different kinds of containers that all have different applications, what they do however have in common is the ability to house flex grids and/or elements. When building a new view, start by picking one or several containers and a flex layout that fits with your views content.
Note: Con-flex elements are marked by a dashed outline in the styleguide for structure and layout clarification, these should not be visible in the project.
Note: Layout rows and flex elements can be nested if needed. However, avoid putting panels/containers inside other panels/containers.
Note: In all modals and panels the footer links should be buttons, not <a/> tags.
-
Layout
4.1The default layout grid is a flex-row that splits its width evenly among the number of flex-items inside it (i.e one flex-item will take 100%, two flex-items will take 50%, four flex-items will take 25% and so on). The default layout will keep its flex-items in a row until the screen gets small enough that it gives each flex-item 100% width;
| Class | Description |
|---|---|
| con-row | A flex container for con-flex boxes |
| con-flex | When inside a con-row it will divide its with with the number of con-flex siblings |
| x2 | Will use the same space as two con-flex containers |
| x3 | Will use the same space as three con-flex containers |
-
Show
Hide
markup
<div class="con-row">
<div class="con-flex">100%</div>
</div>
<div class="con-row">
<div class="con-flex">50%</div>
<div class="con-flex">50%</div>
</div>
<div class="con-row">
<div class="con-flex">33%</div>
<div class="con-flex">33%</div>
<div class="con-flex">33%</div>
</div>
<div class="con-row">
<div class="con-flex">25%</div>
<div class="con-flex">25%</div>
<div class="con-flex">25%</div>
<div class="con-flex">25%</div>
</div>
<div class="con-row">
<div class="con-flex x3">75%</div>
<div class="con-flex">25%</div>
</div>
<div class="con-row">
<div class="con-flex x2">50%</div>
<div class="con-flex">25%</div>
<div class="con-flex">25%</div>
</div>
100%
50%
50%
33%
33%
33%
25%
25%
25%
25%
75%
25%
50%
25%
25%
Fluid layout
4.2A fluid layout will wrap the flex-items into columns instead of dividing the width evenly depending on the number. It is important to remember that if the items have different height, the tallest item will set the height for the whole row.
-
Show
Hide
markup
<div class="con-fluid-row">
<div class="con-fluid-flex" ng-repeat="item in bigList">
(<span ng-bind="item.id"></span>) Default to 1/3
</div>
</div>
() Default to 1/3
Fluid layout (dense)
4.3A more dense version of the fluid layout for smaller elements.
-
Show
Hide
markup
<div class="con-fluid-row dense">
<div class="con-fluid-flex" ng-repeat="item in bigList">
(<span ng-bind="item.id"></span>) Default to 1/5
</div>
</div>
() Default to 1/5
Panel
4.4The panel is the main container and the most versatile. It can house most elements and can be configured in a number of layouts. If needed it can have a context menu or a footer for more actions. Since a panel is a raised piece of material, avoid using other raised elements on top of it, unless they are floating (like a action button or context menu) The panel can have a footer with a number of actions, try to keep this number as small as possible. The most important action should be to the far right and if it is the primary action it should have a wfm-btn-invis-primary class.
-
Show
Hide
markup
<div class="panel material-depth-1">
<div class="sub-header">
<h2>Panel title</h2>
<div class="head-actions panel-menu">
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-dots-vertical"></i>
<span class="context-menu-left">
<ul class="wfm-list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</span>
</div>
</div>
</div>
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</div>
Panel title
Content
Multiple search panel
4.5This Searchbar is placed inside the panel sub-header instead of a <h2> to provide advanced search capabilities in that panel.
Note: The header text is translated in the project but the names of the inputs needs to be translated using $translate.instant() in the controller.
Show
Hide
JavaScript
$scope.searchOptions = {
keyword: '',
searchKeywordChanged: false,
focusingSearch: false,
searchFields: [
'option1','option2','option3','option4','option5','option6'
]
};
-
Show
Hide
markup
<div class="panel material-depth-1">
<div class="sub-header">
<wfm-multiple-search-input search-title="'Search'" search-options="searchOptions" search-callback="searchKeyword"></wfm-multiple-search-input>
<div class="head-actions panel-menu">
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-dots-vertical"></i>
<span class="context-menu-left">
<ul class="wfm-list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</span>
</div>
</div>
</div>
<div class="con-row">
<div class="con-flex ">
Content
</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</div>
Content
Panel with sidebar
4.6The sub header of a regular panel can be repaced to provide a sidebar within the panel.
Show
Hide
JavaScript
$scope.rightPanelOptions = {
panelState: false,
sidePanelTitle: 'Side panel title',
showCloseButton: true,
showResizer: true,
showBackdrop: true,
showPopupButton: true
};
-
Show
Hide
markup
<div class="panel material-depth-1">
<div class="sub-header">
<h2>Panel with sidebar</h2>
<wfm-right-panel panel-options="rightPanelOptions">
<div class="con-row">
<div class="con-flex">content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Action</button>
</div>
</wfm-right-panel>
</div>
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</div>
Panel with sidebar
content
Content
Tabbed panel
4.7When using tabbed panels, one important thing to remember is to order the tabs in a way that makes sense to the workflow. Also, avoid several tab panels close together to avoid confusion and maintain focus. For the same reason, modals can not be launched from within tabs.
-
Show
Hide
markup
<div class="panel material-depth-1">
<div class="wfm-slide-tabs tabbed-panel">
<div class="head-actions panel-menu">
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-dots-vertical"></i>
<span class="context-menu-left">
<ul class="wfm-list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</span>
</div>
</div>
<md-content class="md-padding">
<md-tabs md-dynamic-height md-border-bottom >
<md-tab label="Tab title1">
<md-content class="md-padding">
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</md-content>
</md-tab>
<md-tab label="Tab title2">
<md-content class="md-padding">
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</md-content>
</md-tab>
<md-tab label="Tab title3">
<md-content class="md-padding">
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</md-content>
</md-tab>
<md-tab label="Tab title4">
<md-content class="md-padding">
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="con-row">
<div class="con-flex">Things</div>
<div class="con-flex">Things</div>
<div class="con-flex">Things</div>
<div class="con-flex">Things</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
</div>
Tabbed panel (badges)
4.8Adding a badge to the tab label or the context menu icon give the user more information on what can be hidden inside the tab and draw attention to specific tabs.
-
Show
Hide
markup
<div class="panel material-depth-1">
<div class="wfm-slide-tabs tabbed-panel">
<div class="head-actions panel-menu">
<div tabindex=0 class="context-menu card-context wfm-badge-wrapper">
<i class="mdi mdi-dots-vertical "></i>
<wfm-badge badge-model="5" status="'notice-error'"> </wfm-badge>
<md-tooltip>Options</md-tooltip>
<span class="context-menu-left">
<ul class="wfm-list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</span>
</div>
</div>
<md-content class="md-padding">
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="Tab title1">
<md-content class="md-padding">
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</md-content>
</md-tab>
<md-tab>
<md-tab-label class="wfm-badge-wrapper">
Tab Title 2
<wfm-badge badge-model="10" status="'notice-success'"> </wfm-badge>
</md-tab-label>
<md-tab-body class="md-padding">
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
</div>
Wizard panel
4.9In case you want to guide the user through a series of steps you can use a wizard panel.
Show
Hide
JavaScript
$scope.selectedIndex = 0;
$scope.nextTab = function() {
var index = ($scope.selectedIndex === 50) ? 0 : $scope.selectedIndex + 1;
$scope.selectedIndex = index;
};
-
Show
Hide
markup
<div class="panel material-depth-1">
<div class="wfm-slide-tabs tabbed-panel">
<div class="head-actions panel-menu">
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-dots-vertical"></i>
<span class="context-menu-left">
<ul class="wfm-list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</span>
</div>
</div>
<md-content class="md-padding">
<md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex">
<md-tab label="Tab title1">
<md-content class="md-padding">
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wizard-step wfm-btn wfm-btn-invis-primary" ng-click="nextTab()">Next</button>
</div>
</md-content>
</md-tab>
<md-tab label="Tab title2">
<md-content class="md-padding">
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wizard-step wfm-btn wfm-btn-invis-primary" ng-click="nextTab()">Next</button>
</div>
</md-content>
</md-tab>
<md-tab label="Tab title3">
<md-content class="md-padding">
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wizard-step wfm-btn wfm-btn-invis-primary" ng-click="nextTab()">Next</button>
</div>
</md-content>
</md-tab>
<md-tab label="Tab title4">
<md-content class="md-padding">
<div class="con-row">
<div class="con-flex">Content</div>
</div>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
</div>
Basic Form panel
4.10
Show
Hide
JavaScript
$scope.reset = function(form) {
if (form) {
form.$setPristine();
form.$setUntouched();
}
};
-
Show
Hide
markup
<div class="panel form-panel material-depth-1">
<div class="sub-header">
<h2>Panel title</h2>
<div class="head-actions panel-menu">
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-dots-vertical"></i>
<span class="context-menu-left">
<ul class="wfm-list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</span>
</div>
</div>
</div>
<form name="form" class="wfm-form" novalidate>
<div class="con-row">
<div class="con-flex">
<div class="form-input-wrap">
<label for="nameId">Name:</label>
<input type="text" ng-model="form.input0" placeholder="Name" name="Name" required="" id="nameId" autofocus/>
<div ng-cloak class="animate-show" ng-show ="form.$submitted || form.Name.$touched">
<div class="form-input-message" ng-class="{formInvalidInput:form.Name.$error.required}">Name is required</div>
</div>
</div>
<div class="form-input-wrap">
<label for="nameId">Age:</label>
<input type="number" ng-model="form.input1" placeholder="Age" name="Age" required="" id="nameId"/>
<div ng-cloak class="animate-show" ng-show ="form.$submitted || form.Age.$touched">
<div class="form-input-message" ng-class="{formInvalidInput:form.Age.$error.required}">Age is required</div>
</div>
</div>
<div class="form-input-wrap">
<label for="nameId">Password:</label>
<input type="password" ng-model="form.input2" placeholder="Password" name="Password" required="" id="nameId"/>
<div ng-cloak class="animate-show" ng-show ="form.$submitted || form.Password.$touched">
<div class="form-input-message" ng-class="{formInvalidInput:form.Password.$error.required}">Password is required</div>
</div>
</div>
<div class="form-input-wrap">
<label for="drop">How many:</label>
<md-select ng-model="form.drop" name="Drop" id="drop" required="">
<md-option ng-repeat="item in demos" ng-value="item.id"><span ng-bind="item.id"></span></md-option>
</md-select>
<div ng-cloak class="animate-input-message" ng-show="form.$submitted || form.Drop.$error.required.$touched">
<div class="form-input-message" ng-class="{formInvalidInput:form.Drop.$error.required}">Pick at least one</div>
</div>
</div>
</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default" type="button" ng-click="reset(form)"><md-tooltip>Hide all errors</md-tooltip>Clear</button>
<button class="wfm-btn wfm-btn-invis-primary" type="submit" ng-click="update()"><md-tooltip>Save input if valid</md-tooltip>Submit</button>
</div>
</form>
</div>
Panel title
Devided Form panel
4.11Dividing the inputs into different sub-categories using headers can make the structure more clear.
Show
Hide
JavaScript
$scope.reset = function(form) {
if (form) {
form.$setPristine();
form.$setUntouched();
}
};
-
Show
Hide
markup
<div class="panel form-panel material-depth-1">
<div class="sub-header">
<h2>Panel title</h2>
<div class="head-actions panel-menu">
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-dots-vertical"></i>
<span class="context-menu-left">
<ul class="wfm-list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</span>
</div>
</div>
</div>
<form name="devidedForm" class="wfm-form" novalidate>
<div class="con-row">
<div class="con-flex">
<h3>Personal information</h3>
<div class="form-input-wrap">
<label for="firstNameId">First Name:</label>
<input type="text" ng-model="devidedForm.input0" placeholder="Last name" name="firstName" required="" id="firstNameId" autofocus/>
<div ng-cloak class="animate-show" ng-show ="devidedForm.$submitted || devidedForm.firstName.$touched">
<div class="form-input-message" ng-class="{formInvalidInput:devidedForm.firstName.$error.required}">First name is required</div>
</div>
</div>
<div class="form-input-wrap">
<label for="lastNameId">Last Name:</label>
<input type="text" ng-model="devidedForm.input1" placeholder="First name" name="lastName" required="" id="lastNameId" autofocus/>
<div ng-cloak class="animate-show" ng-show ="devidedForm.$submitted || devidedForm.lastName.$touched">
<div class="form-input-message" ng-class="{formInvalidInput:devidedForm.lastName.$error.required}">Last name is required</div>
</div>
</div>
<h3>Preferences</h3>
<div class="form-input-wrap">
<label>Pick the best one:</label>
<md-radio-group ng-model="devidedForm.dessert">
<md-radio-button value="Option 1" aria-label="radio">Cake</md-radio-button>
<md-radio-button value="Option 2" aria-label="radio">Pie</md-radio-button>
<md-radio-button value="Option 3" aria-label="radio">Ice cream</md-radio-button>
</md-radio-group>
<div ng-cloak class="animate-show" ng-show ="devidedForm.$submitted || devidedForm.dessert.$touched">
<div class="form-input-message" ng-class="{formInvalidInput:!devidedForm.dessert}">At least one is required</div>
</div>
</div>
</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default" type="button" ng-click="reset(devidedForm)"><md-tooltip>Hide all errors</md-tooltip>Clear</button>
<button class="wfm-btn wfm-btn-invis-primary" type="submit" ng-click="update()"><md-tooltip>Save input if valid</md-tooltip>Submit</button>
</div>
</form>
</div>
Panel title
Split Form panel
4.12The layout inside the form can be changed to give more space to certain parts, just remember to structure the inputs in a logical way.
Show
Hide
JavaScript
$scope.reset = function(form) {
if (form) {
form.$setPristine();
form.$setUntouched();
}
};
-
Show
Hide
markup
<div class="panel form-panel material-depth-1">
<div class="sub-header">
<h2>Panel title</h2>
<div class="head-actions panel-menu">
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-dots-vertical"></i>
<span class="context-menu-left">
<ul class="wfm-list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</span>
</div>
</div>
</div>
<form name="splitForm" class="wfm-form" novalidate>
<div class="con-row">
<div class="con-flex">
<div class="form-input-wrap">
<label for="nameId">Name:</label>
<input type="text" ng-model="splitForm.input0" placeholder="Name" name="Name" required="" id="nameId" autofocus/>
<div ng-cloak class="animate-show" ng-show ="splitForm.$submitted || splitForm.Name.$touched">
<div class="form-input-message" ng-class="{formInvalidInput:splitForm.Name.$error.required}">Name is required</div>
</div>
</div>
<div class="form-input-wrap">
<label for="nameId">Age:</label>
<input type="number" ng-model="splitForm.input1" placeholder="Age" name="Age" required="" id="nameId"/>
<div ng-cloak class="animate-show" ng-show ="splitForm.$submitted || splitForm.Age.$touched">
<div class="form-input-message" ng-class="{formInvalidInput:splitForm.Age.$error.required}">Age is required</div>
</div>
</div>
</div>
<div class="con-flex x3">
<div class="form-input-wrap">
<label>Group:</label>
<md-checkbox ng-model="splitForm.box1" aria-label="Checkbox">Option 1</md-checkbox>
<md-checkbox ng-model="splitForm.box2" aria-label="Checkbox">Option 2</md-checkbox>
</div>
</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default" type="button" ng-click="reset(splitForm)"><md-tooltip>Hide all errors</md-tooltip>Clear</button>
<button class="wfm-btn wfm-btn-invis-primary" type="submit" ng-click="update()"><md-tooltip>Save input if valid</md-tooltip>Submit</button>
</div>
</form>
</div>
Panel title
Card
4.13The card is a simpler version of the panel with more direct actions available in the footer. The card can have different colors by applying notice-info, notice-warning, notice-error and notice-success classes to the card element.
-
Show
Hide
markup
<div class="card panel material-depth-1">
<div class="sub-header">
<h2>Card title</h2>
</div>
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="card-footer con-row">
<span class="con-flex card-footer-section">
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-duck"></i>
</div>
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-alert"></i>
</div>
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-settings"></i>
</div>
</span>
<span class="con-flex line-right card-footer-section">
<button class="wfm-btn wfm-btn-invis-default">Default</button>
<button class="wfm-btn wfm-btn-invis-primary">Primary</button>
</span>
</div>
</div>
<h3>With color:
<select ng-model="selectedClass">
<option>notice-success</option>
<option>notice-info</option>
<option>notice-error</option>
<option>notice-warning</option>
</select>
</h3>
<div class="card panel material-depth-1" ng-class="selectedClass">
<div class="sub-header">
<h2>Colorful card title</h2>
</div>
<div class="con-row">
<div class="con-flex">Content</div>
</div>
<div class="card-footer con-row">
<span class="con-flex card-footer-section">
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-duck"></i>
</div>
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-alert"></i>
</div>
<div tabindex=0 class="context-menu card-context">
<i class="mdi mdi-settings"></i>
</div>
</span>
<span class="con-flex line-right card-footer-section">
<button class="wfm-btn wfm-btn-invis-default">Default</button>
<button class="wfm-btn wfm-btn-invis-primary">Primary</button>
</span>
</div>
</div>
Card title
Content
With color:
Colorful card title
Content
Card list (multiple open)
4.14The card list consists of expandable panels-like cards. The header part is used for displaying a title and other indicators. The content part could contains any type of html elements. By default, card list items support open multiple cards at the same time.
| Attribute Name | Usage | Required |
|---|---|---|
| pre-open | Bind to a repeated card that should be open. | false |
| open | can be set to 'single' to open one card at a time, closing previously open ones | false |
| color | Bind a object that defines colors on all cards, can include linear gradient to indicate order or scale | false |
| color-condition | Options for what color goes on what card | false |
-
Show
Hide
markup
<card-panel-list>
<card-panel ng-repeat="item in cardListItems" id="$index">
<card-panel-header>
<b>Single card title</b>
</card-panel-header>
<card-panel-content>
<div class="panel">
<div class="con-row demo-outline">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</div>
</card-panel-content>
</card-panel>
</card-panel-list>
Content
Card list (pre-open)
4.15By using attribute 'pre-open', selected list items will pre-open on load.
-
Show
Hide
markup
<card-panel-list>
<card-panel ng-repeat="item in cardListItems" pre-open="item.Selected" id="$index">
<card-panel-header>
<b>Single card title</b>
</card-panel-header>
<card-panel-content>
<div class="panel">
<div class="con-row demo-outline">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</div>
</card-panel-content>
</card-panel>
</card-panel-list>
Content
Card list (single open)
4.16By using attribute 'open="single"', the card list only allows one card to be open at a time.
-
Show
Hide
markup
<card-panel-list>
<card-panel ng-repeat="item in cardListItems" open="single" id="$index">
<card-panel-header>
<b>Single card title</b>
</card-panel-header>
<card-panel-content>
<div class="panel">
<div class="con-row demo-outline">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</div>
</card-panel-content>
</card-panel>
</card-panel-list>
Content
Card list (simple color bar)
4.17By using attribute 'color', header part of card list items will contain a simple color bar on the left.
Show
Hide
JavaScript
$scope.simpleColor = {
render: 'class',
className: 'brown'
}
css code example:
.brown {
border-color: $brown-100;
}
-
Show
Hide
markup
<card-panel-list>
<card-panel ng-repeat="item in cardListItems" color="simpleColor" id="$index">
<card-panel-header>
<b>Single card title</b>
</card-panel-header>
<card-panel-content>
<div class="panel">
<div class="con-row demo-outline">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</div>
</card-panel-content>
</card-panel>
</card-panel-list>
Content
Card list (special simple color bar)
4.18By using a combination of attributes 'color' and 'color-condition', header part of the card list items will contain simple color bars on the left by matching condition.
Show
Hide
JavaScript
$scope.simpleColor2 = {
render: 'condition',
condition: { 'color1': 'brown', 'color2': 'orange', 'color3': 'purple' }
}
css code example:
.brown {
border-color: $brown-100;
}
.purple {
border-color: $purple-300;
}
.orange {
border-color: $orange-400;
}
-
Show
Hide
markup
<card-panel-list>
<card-panel ng-repeat="item in cardListItems" color="simpleColor2" color-condition="item.Color" id="$index">
<card-panel-header>
<b>Single card title</b>
</card-panel-header>
<card-panel-content>
<div class="panel">
<div class="con-row demo-outline">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</div>
</card-panel-content>
</card-panel>
</card-panel-list>
Content
Card list (linear color bar)
4.19By using attribute 'color', header part of card list items will contains simple color bar on the left by matching condition.
Show
Hide
JavaScript
$scope.simpleColor3 = {
render: 'linear',
rgba: 'rgba(156, 39, 176, 1)'
}
-
Show
Hide
markup
<card-panel-list>
<card-panel ng-repeat="item in cardListItems" color="simpleColor3" id="$index">
<card-panel-header>
<b>Single card title</b>
</card-panel-header>
<card-panel-content>
<div class="panel">
<div class="con-row demo-outline">
<div class="con-flex">Content</div>
</div>
<div class="con-footer">
<button class="wfm-btn wfm-btn-invis-default">Advanced</button>
<button class="wfm-btn wfm-btn-invis-primary">Options</button>
</div>
</div>
</card-panel-content>
</card-panel>
</card-panel-list>
Content