input

适用的类型：

[type=text]
[type=search]
[type=number]
[type=password]
[type=email]
[type=tel]
[type=url]
[type=date]
[type=time]
[type=month]
[type=week]
[type=datetime-local]
[type=datetime]
[type=radio]
- 另见 单选框
[type=checkbox]
- 另见 多选框
- 另见开关
[type=file]
- 适用于 按钮
- 适用于 图片

input.na-input.na-font-mono(
    type="datetime-local"
    title='更改时间'
    value='2023-09-08T14:48'
)

## `disabled`

input.na-input.na-font-mono(
    type="date"
    title='更改日期'
    value='2023-09-08'
    disabled
)

## `placeholder`

input.na-input.na-font-mono(
    title='helloworld'
    placeholder='helloworld'
)

## `data-primary`

设置 input.na-input[data-primary] 可以覆盖全局css变量 --outline-color-*:focus，或置于 na-input-wrapper[data-primary] 中

局部变量 --color-input 可以直接设置主题颜色RGB值，这优先于 --color-input*-wrapper

each primary in ['', 'success', 'danger', 'warning']
    input.na-input(
        title=primary
        placeholder=primary
        data-primary=primary
    )
input.na-input(
    title="custom"
    placeholder="custom"
    style={
        '--color-input': 'var(--gold-6)',
        '--background-color-selection': 'var(--gold-9)',
        '--color-selection': 'var(--gold-1)',
    }
)
.na-input-wrapper(data-primary)
    input.na-input(
        title="wrapper"
        placeholder="wrapper"
    )

## `.sm` & `.lg`

不设置宽高时默认是21.5个等宽半角字符宽

全局变量控制内边距

--padding-horizontal-input 纵向内边距
--padding-vertical-input 横向内边距

有下面两个预设尺寸：

input.na-input.sm
input.na-input.lg

## prefix

需要在 .na-input-wrapper 中使用，参见：表单

这里使用 [type="search]" 在Safari上会有额外的放大镜图标

.na-input-wrapper
    svg.na-input-prefix(role="button" aria-label="search" width=16 height=16)
    input.na-input(title='with-prefix' type="search")
.na-input-wrapper(data-primary)
    svg.na-input-prefix(role="button" aria-label="search" width=16 height=16)
    input.na-input(title='with-prefix' type="search")

## suffix

需要在 .na-input-wrapper 中使用

通配变量 --background-color-selection 和 --color-selection 可以修改选中文字颜色（RGB）

.na-input-wrapper
    input.na-input(title='with-suffix')
    svg.na-input-suffix(role="button" aria-label="close" width=16 height=16)
.na-input-wrapper(style={
    '--color-input*-wrapper': 'var(--blue-6)'
    '--background-color-selection': 'var(--blue-9)',
    '--color-selection': 'var(--blue-1)',
})
    input.na-input(title='with-suffix')
    svg.na-input-suffix(role="button" aria-label="close" width=16 height=16)

上述属性和 <button> 一起使用可以增强语义，同时可以被键盘控制焦点。

当然也可以是：

input[type=button]
input[type=reset]
input[type=submit]

.na-input-wrapper(data-primary="danger" style={
    'border-style': 'solid'
})
    input.na-input(title='out-suffix' disabled)
    button.na-input-suffix(type="submit" title="search" disabled)
        svg(data-icon="interactive-button/outline/search" width=18 height=18)

查找历史订单

label.na-form-item
    span 查找历史订单
    .na-input-wrapper(data-primary style={
        'border-style': 'solid'
    })
        input.na-input(title='out-suffix' style={
            '--box-shadow-drop-bottom': 'none'
        })
        button(type="submit" title="search")
            svg(data-icon="interactive-button/outline/search" width=18 height=18)

input

## disabled

## placeholder