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

局部变量 --color-input 可以直接设置主题颜色RGB值

each primary in ['primary', '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)"
)

## `.sm` & `.lg`

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

全局变量控制内边距

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

有下面两个预设尺寸：

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

## affix

把 input 放在 .na-input-wrapper 这个容器中可以用来显示前缀后缀

该容器启用 .na-input-wrapper[data-primary] 也会覆盖全局css变量 --outline-color-focus 和继承某些样式

直接使用局部变量 --color-input-wrapper 也可以设置主题颜色RGB值，且优先级高于 --color-input

.na-input-wrapper
    input.na-input(title='helloworld' value='helloworld')
.na-input-wrapper
    input.na-input(title='helloworld' value='helloworld' style={
        '--color-input': 'var(--yellow-5)'
    })

### `data-with-prefix`

这里使用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' data-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' data-with-prefix type="search")

### `data-with-suffix`

.na-input-wrapper
    input.na-input(title='with-suffix' data-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)'
})
    input.na-input(title='with-suffix' data-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)

这里实现使用了 :has() 选择器，如果你的浏览器不支持会被降级，样式会有些许区别

.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

## data-primary

## .sm & .lg