本文整理匯總了TypeScript中@islavi/ng2-component-lab.experimentOn函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript experimentOn函數的具體用法？TypeScript experimentOn怎麽用？TypeScript experimentOn使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了experimentOn函數的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: experimentOn
import { experimentOn } from '@islavi/ng2-component-lab';
export default experimentOn('Tabs').group('Tabs', [
{
id: 'simpleTabs',
title: 'Simple tabs with text title',
description: "Simple tabs with text title",
showSource: true,
context: {
onSelectTab: (tab) => {
console.log(`Tab '${tab.title}' selected.`);
}
},
template: `
<sdc-tabs (selectedTab)="onSelectTab($event)">
<sdc-tab title="tab1">This is tab 1</sdc-tab>
<sdc-tab title="tab2">This is tab 2</sdc-tab>
</sdc-tabs>
`
},
{
id: 'simpleTabsWithIcons',
title: 'Simple tabs with icon title',
description: "Simple tabs with icon title",
showSource: true,
context: {
onSelectTab: (tab) => {
console.log(`Tab '${tab.titleIcon}' selected.`);
}
},
template: `示例2: experimentOn
background: #dddddd;
margin-top: 5px;
padding: 5px;
user-select: text;
}
`;
const makeBasicStyleDistance = (distance: number) => `
.scroll-container::after {
display: block;
content: '';
height: ${distance}px;
background: red;
}
`;
export default experimentOn('Infinite-Scroll')
.group("Infinite Scroll",[
{
id: 'infiniteScrollUsage',
showSource: true,
context: Object.assign({}, basicContext),
title: 'Infinite scroll usage',
description: 'Infinite scroll usage',
styles: [basicStyle],
template: `
<div (infiniteScroll)="onScrollHitBottom()" class="scroll-container">
<div *ngFor="let _i of numLines; let i=index">
Line {{i + 1}}
</div>
</div>
Hit bottom for <b>{{hitBottomCount}}</b> times!示例3: experimentOn
import { experimentOn } from '@islavi/ng2-component-lab';
export default experimentOn('Tag Cloud').group('Tag Cloud', [
{
id: 'list',
title: 'Simple tag-cloud',
description: 'Simple tag-cloud',
showSource: true,
template: `
<sdc-tag-cloud label="Please Enter value"
placeholder="Type a value and then click enter or '+'"
[list]="['aaa', 'bbb']">
</sdc-tag-cloud>
`
},
{
id: 'unique-tag-cloud',
title: 'List with unique validation',
description: 'List with unique validation',
showSource: true,
template: `
<sdc-tag-cloud label="Please Enter value"
placeholder="Type a value and then click enter or '+'"
[list]="['aaa', 'bbb']"
[isUniqueList]="true"
[uniqueErrorMessage]="'This value is already in the list'">
</sdc-tag-cloud>
`
},示例4: experimentOn
{
label: 'First Option',
value: 'First Option',
},
{
label: 'Second Option',
value: 'Second Option',
},
{
label: 'Third Option',
value: 'Third Option',
type: DropDownOptionType.Simple
}
];
export default experimentOn('Validation')
.group("Validation", [
{
id: 'validation1',
showSource: true,
title: 'Simple validation',
description: 'Simple validation (validating that email is valid and that user inserted something in the field). \
By default the validation starts after first key press',
context: {
emailPattern: RegexPatterns.email
},
template: `
<sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
<sdc-validation [validateElement]="email">
<sdc-required-validator message="Field is required!"></sdc-required-validator>
<sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>示例5: experimentOn
import { experimentOn } from '@islavi/ng2-component-lab';
import { LoaderService } from '../../src/angular/loader/loader.service';
export default experimentOn('Loader')
.group("Loader", [
{
id: 'Small Fixed Loader',
showSource: true,
title: 'Regular loader',
description: 'Simple Fixed loader',
context: {
showLoaderFlag : 0
},
template: `
<h3>We show loader : <h2 *ngIf = "!showLoaderFlag" style="color:red">NO</h2> <h2 *ngIf = "showLoaderFlag" style="color:green">Yes</h2></h3>
<sdc-loader size="large" #loader1 name="test2" [(active)] = "showLoaderFlag">
<div style="border:1px solid black; padding:20px 100px;">
<sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
<sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
<sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
<sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
</div>
</sdc-loader >
<div style="margin:10px 0px;">
<sdc-button
text="Show loader"
(click)="loader1.activate()">
</sdc-button>
<sdc-button
text="Hide loader"
(click)="loader1.deactivate()">示例6: experimentOn
import { experimentOn } from '@islavi/ng2-component-lab';
export default experimentOn('Radios')
.group("Radios",[
{
id: 'radioButtonsGroupTwoWaysBinding',
showSource: true,
context: {
selectedValue: "val2"
},
title: 'Radio buttons group (two ways binding)',
description: 'Radio buttons group (two ways binding)',
template:
`
<sdc-radio-group
[legend]="'Radio Buttons Group legend'"
[(value)]="selectedValue"
[options] = "{
items: [
{
value: 'val1',
name: 'radio5',
label: 'Label of Radio 1'
},
{
value: 'val2',
name: 'radio5',
label: 'Label of Radio 2'
}
]}"
></sdc-radio-group>示例7: ChecklistItemModel
new ChecklistItemModel('orange')]);
const checklistFirstLevelValuesExample6 = [];
const checklistSecondLevelValuesExample6 = [];
const checklistThirdLevelValuesExample6 = [];
const checkListExample6: ChecklistModel = new ChecklistModel(checklistFirstLevelValuesExample6,
[new ChecklistItemModel('1', false, false,
new ChecklistModel(checklistSecondLevelValuesExample6, [new ChecklistItemModel('1.1'),
new ChecklistItemModel('1.2', false, false, new ChecklistModel(checklistThirdLevelValuesExample6, [new ChecklistItemModel('1.2.1'),
new ChecklistItemModel('1.2.2'),
new ChecklistItemModel('1.2.3')])),
new ChecklistItemModel('1.3')])),
new ChecklistItemModel('2'),
new ChecklistItemModel('3')]);
export default experimentOn('Checklist')
.group("Checklist",[
{
id: 'checklist',
showSource: true,
context: {
checklistModel: checkListExample1,
checklistValues: checklistValuesExample1
},
styles: [styleCode],
title: 'Checklist',
description: `
<pre>
<h5>The checklistModel parameter:</h5>
const checklistValues = [];
const checklistModel: ChecklistModel =示例8: experimentOn
import { experimentOn } from '@islavi/ng2-component-lab';
export default experimentOn('Menu')
.group("Popups",[
{
id: 'basicPopupMenuStatic',
showSource: true,
title: 'Basic popup menu (static)',
description: 'Basic popup menu (static)',
template: `
<popup-menu-list [open]="true">
<popup-menu-item>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
<defs>
<path id="add-copy-a1" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<use xlink:href="#add-copy-a1"/>
</g>
</svg>
First
</popup-menu-item>
<popup-menu-item type="selected">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
<defs>
<path id="add-copy-a2" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<use xlink:href="#add-copy-a2"/>
</g>
</svg>示例9: experimentOn
import { experimentOn } from '@islavi/ng2-component-lab';
const experiment = experimentOn('Multiline Ellipsis');
const commonContext = {
shortText: 'Short text - No ellipsis!',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et molestie erat, sit amet rutrum purus. Mauris tristique efficitur felis, rutrum scelerisque enim sodales eu. Cras tristique ipsum a elementum auctor. Donec et elit id sapien tempus posuere. Nulla condimentum semper nisi, ac convallis augue dignissim nec. Nunc vestibulum nisi metus, ac rutrum enim consectetur nec. Vivamus volutpat ac risus aliquet iaculis.\nVestibulum et ex egestas, scelerisque enim et, vehicula nisi. Aenean posuere ornare dolor, in laoreet turpis mattis in. Fusce sodales blandit ornare. Donec porta eros vel tellus consequat, a ultricies augue ullamcorper. Vestibulum dolor diam, auctor ac magna quis, aliquet tincidunt odio. Nulla eu cursus metus. Maecenas laoreet in risus vel suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis facilisis orci rhoncus pharetra pretium. Nam blandit arcu lobortis eros luctus lobortis. Integer gravida iaculis finibus.'
};
const whiteEllipsisDots = `
/deep/ .white-ellipsis .multiline-ellipsis-dots {
background: linear-gradient(to right, transparent 0%, white 30%);
}
`;
const yellowEllipsisDots = `
/deep/ .yellow-ellipsis .multiline-ellipsis-dots {
background: linear-gradient(to right, transparent 0%, yellow 30%);
padding: 0 3px;
}
/deep/ .yellow-ellipsis .multiline-ellipsis-content .multiline-ellipsis-dots::before {
content: '\\21a9';
}
`;
experiment.group("Single line", [
{
id: "multiLine",
showSource: true,
description: `Multiline ellipsis shows ellipsis at end of desired lines.`,
title: "Multi Line",
context: commonContext,示例10: experimentOn
value: 'thirdOptionValue',
type: DropDownOptionType.Simple
},
{
label: 'Fourth Option Label',
value: 'FourthOptionValue',
type: DropDownOptionType.Simple
},
{
label: 'Fifth Option Label',
value: 'fifthOptionValue',
type: DropDownOptionType.Simple
}
];
export default experimentOn('DropDown')
.group("DropDown", [
{
id: 'normalDropDown',
showSource: true,
context: {
options: options1,
onChange: function(option) {
this.valueSelected = option.value;
}
},
title: 'Normal DropDown',
description: 'Normal DropDown',
template: `
<sdc-dropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options" (changed)="onChange($event)"></sdc-dropdown>
<div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 700">{{valueSelected}}</strong></div>