furo-ui5-number-input-labeled

furo-ui5-number-input-labeled #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-number-input-labeled.js';
exports FuroUi5NumberInputLabeled js
exports <furo-ui5-number-input-labeled> custom-element-definition
superclass LitElement
mixes FBP

Summary: labeled input field

Description #

The furo-ui5-number-input-labeled is a composition to easily use a complete input field with label according to the design specification of SAP Fiori Design System.

1

<furo-ui5-number-input fn-bind-data="--dao(FIELDNODE)"></furo-ui5-number-input>

Example # 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<furo-form-layouter four>
  <furo-ui5-number-input-labeled
    fn-bind-data="--doExp(*.furo_data_number_input)"
  ></furo-ui5-number-input-labeled>
  <furo-ui5-number-input-labeled
    readonly
    fn-bind-data="--doExp(*.furo_data_number_input)"
  ></furo-ui5-number-input-labeled>
  <furo-ui5-number-input-labeled
    disabled
    fn-bind-data="--doExp(*.furo_data_number_input)"
  ></furo-ui5-number-input-labeled>  
  <furo-ui5-number-input-labeled
    required
    fn-bind-data="--doExp(*.furo_data_number_input)"
  ></furo-ui5-number-input-labeled>
  <furo-ui5-number-input-labeled
    value-state="Success"
    placeholder="Placeholder"
    fn-bind-data="--doExp(*.furo_data_number_input)"
  ></furo-ui5-number-input-labeled>
</furo-form-layouter>

Attributes and Properties #

label #

label string default: ''

the label for the data-number-input

icon #

icon string default: ''

Icon on the right side

full #

full boolean

This is only used to forward the state to the form-field-container

required #

required Boolean

A Boolean attribute which, if present, means this field is required and marked with *.

disabled #

disabled Boolean

A Boolean attribute which, if present, means this field cannot be edited by the user and appears in disabled state.

readonly #

readonly Boolean

A Boolean attribute which, if present, means this field is readonly.

Events #

furo-value-changed #

at-furo-value-changed → Number

Fires the field value when it changes.

Methods #

focus #

focus(options Object ) ⟹ void

Object → fn-focus

Focuses the underlying ui5 input element

bindData #

bindData(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-data

Orchestrates the data field connection to the inside Supported types: double, float, int32, uint32, sint32, fixed32, sfixed32, int64, uint64, sint64, fixed64, sfixed64 google.protobuf.DoubleValue, google.protobuf.FloatValue, google.protobuf.Int32Value, etc. furo.fat.Doube, furo.fat.Float, furo.fat.Int32, etc.

  • fieldNode