『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 2572|回复: 9

[UI界面] 自定义的输入框实体和按钮实体,如何将他们非对称水平...

[复制链接]

4

主题

143

帖子

1249

积分

金牌会员

Rank: 6Rank: 6

积分
1249
金钱
1106
HASS币
0
发表于 2023-4-7 11:34:15 | 显示全部楼层 |阅读模式
自定义了一个输入框实体和按钮实体,用于调用服务或者脚本实现小爱tts播报键入的内容添加到前端后,觉得这样占用的空间太大了,如图1显示的样子,有没有哪一种卡片可以实现如图2显示的样式,变成一行


图1.png
图2.png
回复

使用道具 举报

36

主题

136

帖子

1041

积分

金牌会员

Rank: 6Rank: 6

积分
1041
金钱
905
HASS币
0
发表于 2023-4-8 08:19:41 来自手机 | 显示全部楼层
通过网格卡片,将实体排列设置成3列
回复

使用道具 举报

4

主题

143

帖子

1249

积分

金牌会员

Rank: 6Rank: 6

积分
1249
金钱
1106
HASS币
0
 楼主| 发表于 2023-4-10 08:35:50 | 显示全部楼层
user1075 发表于 2023-4-8 08:19
通过网格卡片,将实体排列设置成3列

网格无法实现,比例始终是1:1的,最后用button-card解决了
回复

使用道具 举报

4

主题

143

帖子

1249

积分

金牌会员

Rank: 6Rank: 6

积分
1249
金钱
1106
HASS币
0
 楼主| 发表于 2023-4-10 08:37:35 | 显示全部楼层
填坑,用了button-card

type: custom:button-card
entity: input_text.text
show_icon: false
show_units: false
show_name: false
aspect_ratio: 6/1
size: 0%
styles:
  custom_fields:
    text:
      - position: absolute
      - left: 0%
      - bottom: '-15%'
      - width: 90%
    unit:
      - position: absolute
      - right: 0%
      - width: 20%
custom_fields:
  text:
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
          --ha-card-background: transparent;
          color: var(--secondary-text-color);
          border-radius: 0px;

          }
      entities:
        - entity: input_text.text
      show_header_toggle: false
  unit:
    card:
      type: custom:button-card
      entity: input_button.xiaoai_button
      card_mod:
        style: |
          :host {
           --ha-card-background: none;
          }      
      show_state: false
      show_units: false
      show_name: true
      show_icon: false
      tap_action:
        action: call-service
        service: input_button.press
        service_data:
          entity_id: input_button.xiaoai_button
      hold_action:
        action: more-info
      name: 发送
      styles:
        name:
          - font-size: 15px
          - font-weight: bold
          - color: var(--secondary-text-color)
图2.png
回复

使用道具 举报

1

主题

65

帖子

357

积分

中级会员

Rank: 3Rank: 3

积分
357
金钱
292
HASS币
0
发表于 2023-5-24 15:20:57 | 显示全部楼层
学习了,但是没学会。。。
回复

使用道具 举报

4

主题

155

帖子

881

积分

高级会员

Rank: 4

积分
881
金钱
726
HASS币
0
发表于 2023-7-25 20:57:57 | 显示全部楼层
好厉害!!!!
回复

使用道具 举报

2

主题

51

帖子

331

积分

论坛技术达人

积分
331
金钱
275
HASS币
20
发表于 2023-9-16 17:29:17 | 显示全部楼层
请教一下,用的是什么主题?
回复

使用道具 举报

32

主题

1065

帖子

4946

积分

论坛元老

Rank: 8Rank: 8

积分
4946
金钱
3866
HASS币
90
发表于 2023-9-16 17:34:30 | 显示全部楼层
mch1992 发表于 2023-9-16 17:29
请教一下,用的是什么主题?

hacs里找ios主题
我家全屋智能的HA设置 https://github.com/relliky/Tais_Home_Assistant_Config
回复

使用道具 举报

0

主题

46

帖子

444

积分

中级会员

Rank: 3Rank: 3

积分
444
金钱
398
HASS币
0
发表于 2024-4-8 17:04:33 | 显示全部楼层
flyibeat 发表于 2023-4-10 08:37
填坑,用了button-card

type: custom:button-card


                               
登录/注册后可看大图
楼主,我抄了下作业,这个背景一直去不掉,抄的不对吗type: custom:button-cardentity: input_text.ce_shi_tts
card_mod:
  style: |
    ha-card {
      border-style: none;
      }
show_icon: false
show_units: false
show_name: false
aspect_ratio: 6/1
size: 0%
styles:
  custom_fields:
    text:
      - position: absolute
      - left: 0%
      - bottom: '-5%'
      - width: 60%
    unit:
      - position: absolute
      - right: 0%
      - width: 20%
custom_fields:
  text:
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
            --ha-card-background: none;
            color: var(--secondary-text-color);
            border-radius: 0px;
            border-style: none;
          }
      entities:
        - entity: input_text.ce_shi_tts
      show_header_toggle: false
  unit:
    card:
      type: custom:button-card
      entity: input_text.homepad_tts
      card_mod:
        style: |
          :host {
             --ha-card-background: none;
          }      
          ha-card {
              border-style: none;
          }
      show_state: false
      show_units: false
      show_name: true
      show_icon: false
      tap_action:
        action: call-service
        service: input_button.press
        service_data:
          entity_id: input_text.homepad_tts
      hold_action:
        action: more-info
      name: 发送
      styles:
        name:
          - font-size: 15px
          - font-weight: bold
          - color: var(--secondary-text-color)




回复

使用道具 举报

4

主题

143

帖子

1249

积分

金牌会员

Rank: 6Rank: 6

积分
1249
金钱
1106
HASS币
0
 楼主| 发表于 2024-4-11 13:39:20 | 显示全部楼层
Kevin8961 发表于 2024-4-8 17:04
楼主,我抄了下作业,这个背景一直去不掉,抄的不对吗type: custom:button-cardentity: input_text.ce ...

ha主题选了“深色”的话,这个确实不好去掉黑色背景
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-11-25 09:42 , Processed in 1.325780 second(s), 34 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表