按钮

卡片中的按钮分为文字按钮、圆形按钮、底部图标按钮与开关四类。应用声明按钮的类型与内容,位置与排列由星河岛按以下规则决定;文字按钮的每行个数、分宽与落单位置可由应用按卡设置。

按钮类型

类型位置数量上限用途
文字按钮底部,默认每行三个、最多两行;四个时平均分两行;仅一个且第一行右侧无其他内容时,以胶囊按钮置于第一行右侧。应用可按卡设置每行个数与落单位置4打开页面、确认、取消等操作
圆形按钮卡片第一行右侧3仅需图标即可表达的操作,如暂停、继续、停止;仅通用、进度、强调、明细与状态卡片可用
底部图标按钮底部另起一行并列4一组同类的图标操作,如静音、字幕、结束
开关底部并列一行,开启状态使用强调色3可切换的状态,如录音、字幕

文字按钮、圆形按钮与底部图标按钮三类合计最多 4 个,开关另计。大图与消息卡片不使用圆形按钮;音乐卡片使用固定的上一首、播放或暂停、下一首按键,对称卡片不显示按钮。

文字按钮

文字按钮的底色为不透明度 15% 的白色,呈上沿较亮、下沿较暗的玻璃质感;圆形按钮与底部图标按钮的灰底为 16% 白。主要操作可使用强调色实底;具有破坏性的操作(如删除、取消订单)显示为淡红底红字,淡红底同样为玻璃质感。普通样式的文字按钮也可自带底色:不透明度过半显示为实心底,否则显示为浅色底。

仅有一个按钮:以胶囊按钮显示在第一行右侧。
仅有一个按钮:以胶囊按钮显示在第一行右侧。
两个文字按钮并列一行。
两个文字按钮并列一行。
主要操作使用强调色实底。
主要操作使用强调色实底。

文字按钮的排列

文字按钮排在卡片底部,由星河岛按规范排列:默认每行三个、各占三分之一;四个按钮平均分两行、各两个;一排里只剩一个时占半排居中。应用可通过卡片构建器的 setButtonLayout 按卡调整:每行 1~4 个、主要或带底色的按钮占两份宽或整排按文字长短排、单独的一个占半排或整排、靠左居中或靠右;不设置时按默认排法。

种类位置上限
TextButton卡片底部,可按文字长短与说明分配宽度4
IconButton第一行右侧的圆形图标按钮3
BarIconButton底部另起一排的图标按钮4
ToggleButton底部并排的开关,打开时以强调色显示3(另计)
GenericCard.Builder("停车计费")
    .addButton(TextButton("pay", "缴费", ButtonStyle.PRIMARY))
    .addButton(TextButton("later", "稍后"))
    .addButton(BarIconButton("detail", detailIcon, "查看明细"))
    .setButtonLayout(ButtonLayout(perRow = 2))
    .build()

文字、圆形与底部图标三类合计最多 4 个,开关另计最多 3 个。按钮位置、大小与过渡由星河岛按规范决定,应用不指定坐标。

圆形按钮

圆形按钮只显示图标,位于卡片右侧,适合高频且含义明确的操作。

计时:暂停为强调色,停止为灰色底。
计时:暂停为强调色,停止为灰色底。
拒绝与接收以圆形按钮显示。
拒绝与接收以圆形按钮显示。

开关

开关在底部并列一行显示,开启状态使用强调色。按下后由应用更新开关状态,卡片随之变化。

录音、摘要与字幕三个开关。
录音、摘要与字幕三个开关。

底部图标按钮

只有图标、没有文字的一组操作,在底部另起一行平分宽度并列显示,底色为玻璃质感的灰色圆角。每个按钮须提供读屏说明。

四个底部图标按钮并列一行。
四个底部图标按钮并列一行。

行为

按钮文案