@paperbits/core/button/ko/buttonEditor.html

Paperbits core components.

<details open>
    <summary>
        Basic
    </summary>

    <div class="form-group">
        <label for="label" class="form-label">
            Label
            <button class="btn btn-info" role="tooltip" aria-hidden="true" role="tooltip"
                data-bind="tooltip: 'Text on the button'"></button>
        </label>
        <input id="label" type="text" class="form-control" data-bind="textInput: label" maxlength="256" />
    </div>

    <div class="form-group">
        <label for="hyperlink" class="form-label">
            Link to
            <button class="btn btn-info" role="tooltip" aria-hidden="true" role="tooltip"
                data-bind="tooltip: 'A link to be navigated on click.'"></button>
        </label>
        <input-hyperlink params="{ id: 'hyperlink', hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange }"></input-hyperlink>
    </div>

    <input-glyph params="{ selection: model.iconKey, onChange: onIconSelect }"></input-glyph>

    <div class="form-group">
        <label for="displayStyle" class="form-label">
            Visibility
            <button class="btn btn-info" role="tooltip" aria-hidden="true" role="tooltip"
                data-bind="tooltip: 'Change visibility of the widget. This setting might differ depending on screen size following the mobile-first approach. If not specified for the current screen size (inherit), the setting gets taken from the closest smaller screen size.'"></button>
        </label>
        <dropdown id="displayStyle"
            params="{ options: displayOptions, value: displayStyle, onOptionSelected: onDisplayChange, optionsText: 'text', optionsValue: 'value', heading: 'Visibility' }">
        </dropdown>
    </div>
</details>

<details open>
    <summary>
        Styling
    </summary>
    <div class="form-group">
        <label for="appearanceStyle" class="form-label">
            Appearance
            <button class="btn btn-info" role="tooltip"
                data-bind="tooltip: 'Predefined appearance from style guide.'"></button>
        </label>
        <dropdown id="buttonVariationKey"
            params="{ options: buttonVariations, value: buttonVariationKey, onOptionSelected: onVariationChange, optionsText: 'displayName', optionsValue: 'key', heading: 'Appearance' }">
        </dropdown>
    </div>
</details>

<details open>
    <summary>
        Size
    </summary>
    <size-editor
        params="{ features: 'height,width', allowUnits: 'px,%', sizeConfig: sizeConfig, onUpdate: onSizeChange }">
    </size-editor>
</details>

<details open>
    <summary>
        Box
    </summary>
    <box params="{ features: 'margin,padding,border', box: boxConfig, onUpdate: onBoxUpdate }"></box>
</details>