yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add description to umb-box component

Browse Source
This commit is contained in:
Mads Rasmussen
2017-08-23 15:20:23 +02:00
parent 6796f4d4f5
commit f50898ee6d
3 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js
View File

@@ -10,7 +10,7 @@ Use this directive to construct a title. Recommended to use it inside an {@link
<h3>Markup example</h3>
<pre>
<umb-box>
<umb-box-header title="this is a title"></umb-box-header>
<umb-box-header title="This is a title" description="I can enter a description right here"></umb-box-header>
<umb-box-content>
// Content here
</umb-box-content>
@@ -21,7 +21,7 @@ Use this directive to construct a title. Recommended to use it inside an {@link
<pre>
<umb-box>
// the title-key property needs an areaAlias_keyAlias from the language files
<umb-box-header title-key="user_profile"></umb-box-header>
<umb-box-header title-key="areaAlias_keyAlias" description-key="areaAlias_keyAlias"></umb-box-header>
<umb-box-content>
// Content here
</umb-box-content>
@@ -35,8 +35,10 @@ Use this directive to construct a title. Recommended to use it inside an {@link
<li>{@link umbraco.directives.directive:umbBoxContent umbBoxContent}</li>
</ul>
@param {string} title (<code>attrbute</code>): Custom title text.
@param {string} title-key (<code>attrbute</code>): the key alias of the language xml files.
@param {string=} title (<code>attrbute</code>): Custom title text.
@param {string=} titleKey (<code>attrbute</code>): The translation key from the language xml files.
@param {string=} description (<code>attrbute</code>): Custom description text.
@param {string=} descriptionKey (<code>attrbute</code>): The translation key from the language xml files.
**/
@@ -52,7 +54,9 @@ Use this directive to construct a title. Recommended to use it inside an {@link
templateUrl: 'views/components/html/umb-box/umb-box-header.html',
scope: {
titleKey: "@?",
title: "@?"
title: "@?",
descriptionKey: "@?",
description: "@?"
}
};

7
src/Umbraco.Web.UI.Client/src/less/components/umb-box.less
View File

@@ -15,6 +15,13 @@
font-weight: bold;
}
.umb-box-header-description {
font-size: 13px;
color: @gray-3;
line-height: 1.6em;
margin-top: 1px;
}
.umb-box-content {
padding: 20px;
}

6
src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html
View File

@@ -1,6 +1,10 @@
<div class="umb-box-header" ng-transclude>
<div class="umb-box-header-title">
<div class="umb-box-header-title" ng-if="title || titleKey">
<localize ng-if="titleKey" key="{{titleKey}}"></localize>
<span ng-if="title">{{title}}</span>
</div>
<div class="umb-box-header-description" ng-if="description || descriptionKey">
<localize ng-if="descriptionKey" key="{{descriptionKey}}"></localize>
<span ng-if="description">{{description}}</span>
</div>
</div>