oh-input: Fix style issue on mobile when sendButton enabled & Update docs (#2806)
This fixes a minor styling issue on mobile devices, where the input's column is too wide and the sendButton overflows to the next line. Also add `time` to the docs for valid input types. --------- Signed-off-by: Florian Hotze <dev@florianhotze.com>pull/2807/head
parent
83e40d58c6
commit
0396d314d5
|
@ -67,7 +67,7 @@ Display an input in a card
|
|||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="type" label="Type">
|
||||
<PropDescription>
|
||||
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)
|
||||
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="inputmode" label="Input Mode">
|
||||
|
|
|
@ -72,7 +72,7 @@ Display an input field in a list
|
|||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="type" label="Type">
|
||||
<PropDescription>
|
||||
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)
|
||||
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="inputmode" label="Input Mode">
|
||||
|
|
|
@ -35,7 +35,7 @@ Displays an input field, used to set a variable
|
|||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="type" label="Type">
|
||||
<PropDescription>
|
||||
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)
|
||||
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="inputmode" label="Input Mode">
|
||||
|
|
|
@ -2,7 +2,7 @@ import { pi, pb, pt, pd } from '../helpers.js'
|
|||
|
||||
export default () => [
|
||||
pt('name', 'Name', 'Input name'),
|
||||
pt('type', 'Type', 'Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)'),
|
||||
pt('type', 'Type', 'Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)'),
|
||||
pt('inputmode', 'Input Mode', 'Type of data that might be entered (see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>)'),
|
||||
pt('placeholder', 'Placeholder', 'Placeholder text'),
|
||||
pb('sendButton', 'Send button', 'Display Send button to update the state with a command (needs a configured item)'),
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
</template>
|
||||
</f7-input>
|
||||
<f7-row no-gap v-else class="oh-input-with-send-button" :style="config.style">
|
||||
<f7-input class="input-field col-90" ref="input" v-bind="config"
|
||||
<f7-input class="input-field col-80" ref="input" v-bind="config"
|
||||
:value="((config.type && config.type.indexOf('date') === 0) || config.type === 'time') ? valueForDatepicker : value"
|
||||
:calendar-params="calendarParams" :step="config.step ? config.step : 'any'"
|
||||
@input="$evt => updated($evt.target.value)" :change="updated" @calendar:change="updated" @texteditor:change="updated" @colorpicker:change="updated">
|
||||
|
|
Loading…
Reference in New Issue