输入栏

Composer输入与选择

圆角输入栏外壳：surface-3 底、发丝线与柔和投影，聚焦时出现陶土双环。里面放输入框与发送键；stacked 用于评论框、快速记录这类块级排列，Sm 为紧凑尺寸。

属性

名称	类型	默认值	说明
`size`	`ComposerSize`	`Md`	尺寸：Md（20px 圆角）或 Sm（14px 圆角、紧凑内边距）。
`stacked`	`bool`	`false`	块级排列：不做横排，也不加内边距。
`class`	`String`	`""`	外层附加类。
`children`	`Children`	必填	栏内内容：图标、输入框、发送键等。

键盘

Tab: 在栏内的控件之间移动焦点

用法

src/components/ui/composer.rs

let query = RwSignal::new(String::new());

view! {
    <form action="/search" method="get">
        <Composer>
            <Icon name=IconName::Search size=18/>
            <ComposerInput
                search=true
                placeholder="\u641C\u7D22\u6587\u7AE0\u2026"
                value=query
                oninput=move |value: String| query.set(value)
            />
            <ComposerSend label="\u641C\u7D22"/>
        </Composer>
    </form>
}

预览

属性

键盘

用法