TypeScript ng2-component-lab.experimentOn函数代码示例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了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: `

开发者ID:onap-sdc，项目名称:sdc-ui，代码行数:31，代码来源:tabs.component.exp.ts

示例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!

开发者ID:onap-sdc，项目名称:sdc-ui，代码行数:31，代码来源:infinite-scroll.component.exp.ts

示例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>
    `
    },

开发者ID:onap-sdc，项目名称:sdc-ui，代码行数:31，代码来源:tag-cloud.component.exp.ts

示例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>

开发者ID:onap-sdc，项目名称:sdc-ui，代码行数:31，代码来源:validation.component.exp.ts

示例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()">

开发者ID:onap-sdc，项目名称:sdc-ui，代码行数:31，代码来源:loader.component.exp.ts

示例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>

开发者ID:onap-sdc，项目名称:sdc-ui，代码行数:31，代码来源:radio.component.exp.ts

示例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 =

开发者ID:onap-sdc，项目名称:sdc-ui，代码行数:31，代码来源:checklist.component.exp.ts

示例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>

开发者ID:onap-sdc，项目名称:sdc-ui，代码行数:31，代码来源:popup-menu.component.exp.ts

示例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,

开发者ID:onap-sdc，项目名称:sdc-ui，代码行数:31，代码来源:multiline-ellipsis.component.exp.ts

示例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>

开发者ID:onap-sdc，项目名称:sdc-ui，代码行数:31，代码来源:dropdown.component.exp.ts

注：本文中的@islavi/ng2-component-lab.experimentOn函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。