Lovelace：Swiper Card

Bram_Kragten（BRAM KRAGTEN） 2020年6月15日，晚上10:38＃1

我创造了一张卡片摇动者，这让您通过多张卡片轻弹。

您可以使用（差点？）所有摇动器的所有选项，这些都可以找到在这里。

在repo中可以找到更多信息：https://github.com/bramkragen/custom-ui/tree/master/swipe-card.

下面是一些配置示例:伟德国际官方app下载苹果版

带滚动条的全宽卡：

- 类型：自定义：刷卡参数：Spacebetween：8 ScrollBar：Wide：False Draggable：True SnaponRelease：True Cards： - 类型：传感器实体：Sensor.Temperature_158D0001720278名称：enterpatuur Line_Width：8 Line_Color：'＃FF6384' - 类型：传感器实体：sensor.humity_158d0001720278名称：luchtvochtigheid line_color：'＃36a2eb'line_width：8  - 类型：传感器实体：sensor.illumination_f0b429cc4c88名称：licht line_color：'＃ffce57'line_width：8  - 类型：传感器实体：sensor.cpressure_158d0001720278名称：DRUK LINE_COLOR：“＃4BC0C0”准确度：8 LINE_WIDTH：8

覆盖流，分页：

- 类型：自定义：刷卡卡_width：'185px'start_card：2参数：效果：'pockfflow'grabcursor：true centredslides：true slidesperview：'auto'coverflowfeffect：旋转：50 stress：0深度：100个修改器：1幻灯片：真正的分页：类型：'bullets'卡： - 类型：传感器实体：sensor.temperature_158d0001720278名称：ermithatuur line_width：8 line_color：'＃ff6384' - 类型：传感器实体：sensor.humity_158d0001720278名称：luchtvochtigheid line_color：'＃36a2eb'line_width：8  - 类型：传感器实体：Sensor.illumination_f0b429cc4c88名称：licht line_color：'＃ffce57'line_width：8  - 类型：传感器实体：sensor.cpressure_158d0001720278名称：druk line_color：“＃4bc0c0”准确度：8 line_width：8

导航、键盘和进度条:

- type: custom:swipe-card card_width: '80%' parameters: centeredSlides: true slidesPerView: 'auto' spaceBetween: 8 pagination: type: 'progressbar' navigation: keyboard: enabled: true onlyviewport: true cards: - type: sensor entity: sensor。temure_158d0001720278 name: temure_158d0001720278 name: temure_line_width: 8 line_color: '#FF6384' - type:传感器实体:传感器。humidity_158d0001720278 name: Luchtvochtigheid line_color: '#36A2EB' line_width: 8 - type:传感器实体:传感器。illumination_f0b429cc4c88 name: Licht line_color: '#ffce57' line_width: 8 - type:传感器实体:传感器。pressure_158d0001720278 name: Druk line_color: "#4BC0C0" accuracy: 8 line_width: 8

默认：

- 型号：自定义：刷卡卡： - 类型：传感器实体：Sensor.Temperature_158D0001720278名称：ermithatuur Line_Width：8 Line_Color：'＃FF6384' - 类型：传感器实体：Sensor.Humity_158D0001720278名称：LuchtvochtigheID Line_Color：'＃36a2eb'dine_width：8  - 类型：传感器实体：Sensor.illumination_f0b429cc4c88名称：licht line_color：'＃ffce57'line_width：8  - 类型：传感器实体：sensor.cpressure_158d0001720278名称：druk line_color：“＃4bc0c0”准确度：8 line_width：8

地方swipe-card.jsIN / CONFIG / www / custom-lovelace / swipe-card /

-  URL：/local/custom-lovelace/swipe-card/swipe-card.js?v=3.0.0类型：模块

可选：添加到custom_updater：

https://raw.githubusercontent.com/bramkragten/custom-ui/master/updater.json

104人喜欢

滑动视图栏

Lovelace：整理卡

Ariela -19463331伟德国际 Home Assistant Android客户

Schlage连接锁- HA集成需要注意

Zwave锁管理器

偷窃者卡

Ariela -19463331伟德国际 Home Assistant Android客户

Schlage连接锁- HA集成需要注意

状态开关条件卡类固醇

RTSP摄像机的本地实时人员检测

我的扔在一个lovelace ui

自定义组件：Skyq Media Player

学习家庭助理CSS的最佳方式是什么？19463331伟德国际

Lovelace：迷你图卡

炫耀您的图片元素使用

Lovelace：按钮卡

佩特罗（Petro） 2018年10月10日，晚上7:02 ＃2

我无法通过图片说，但如果你>半幻灯片，每个'卡'会捕捉到位吗？

Bram_Kragten（BRAM KRAGTEN） 2018年10月10日，晚上7:03＃3

是的，它确实。也是如果你半幻灯栏。

1像

Kalkih.（KarlKihlström） 2018年10月10日，晚上7:11 ＃4

这真的很酷，很好！

jimpower 2018年10月10日，晚上7:34 ＃5

漂亮的空间储蓄欢呼

Davidfw1960(大卫) 2018年10月11日凌晨3:01 ＃6

看起来太棒了!非常有用的。

Bram_Kragten（BRAM KRAGTEN） 2018年10月11日下午2:10＃7

你也可以在coverflow上全力以赴

https://raw.githubusercontent.com/bramkragten/custom-ui/master/swipe-card/preview-coverflow.gif

8喜欢

Letsoulfly.（鲍勃） 2018年10月11日12:37＃8

太热了!

编辑:
@Bram_Kragten不能让它工作，日志说:
TypeError:元素。setConfig不是一个函数

用Chrome, Iron(铬)和Firefox进行测试

silvrr 2018年10月11日，下午12:44 ＃9

得到了任何示例代码？

1像

拉（Rasmus Holt） 2018年10月11日，下午12:47 ＃10

我得到相同的错误(在Safari上运行)…

…/ custom-lovelace /磁卡/ swipe-card.js ? v = 0.42:71:32 TypeError:元素。setConfig不是一个函数。(在“element.setConfig(项)”、“元素。setConfig”是未定义)

Bram_Kragten（BRAM KRAGTEN） 2018年10月11日，下午1:10＃11

是的，正在进行最终版本，将在今晚(CET)与所有配置选项。

相同的错误，今晚尝试新版本，看看它是否解决了它。

1像

Bram_Kragten（BRAM KRAGTEN） 2018年10月11日，下午2:05 ＃12

新版本，请尝试

M203. 2018年10月11日，下午2:16 ＃13.

真的很棒的空间保护，会尝试一下！

phdelodder(Philippe Delodder) 2018年10月11日，下午2:17 ＃14

刚刚用最新版本进行了测试:

滑动卡。）在htmlelement.set hass [作为hass]（swipe-card.js？v = 1.0：73）.cards.maptconfig（27194aefb40e6f5b8d5f.chunk.js：1371）在Array.map（<匿名>）htmalement._createCards（27194aefb40e6f5b8d5f.chunk.js：1371）在object.runmethodeffect [AS FN]（App-084b7564.js：1067）在Runeffects（App-084b7564.js：1067）在Runeffects（App-084b7564.js：1067）在htmlelement._propertiesChanged（App-084b7564.js：1067）

我的配置:

- type: custom:swipe-card card_width: '185px' parameters: effect: 'coverflow' grabCursor: true centeredSlides: true slidesPerView: 'auto' coverfloweeffect: rotate: 50 stretch: 0 depth: 100 modifier: 1 slidesshadows: true pagination: type: 'bullets' cards: - type: sensor entity: sensor。serre_temperature name: Temperatuur line_width: 8 line_color: '#FF6384' - type:传感器实体:传感器。serre_humidity name: Luchtvochtigheid line_color: '#36A2EB' line_width: 8 - url: /local/custom-lovelace/刷卡/刷卡.js

Bram_Kragten（BRAM KRAGTEN） 2018年10月11日下午2:19 ＃15

您在家庭助手的哪个版本？您使用的传感器卡现在仅在Beta中获得...

phdelodder(Philippe Delodder) 2018年10月11日，下午2:20 ＃16

AH该死的版本0.79.2，在主题中尚不清楚。

Bram_Kragten（BRAM KRAGTEN） 2018年10月11日，下午2:47＃17

主题是关于滑块的，可以使用任何卡。

您可以使用Lovelace：迷你图卡目前。

1像

拉（Rasmus Holt） 2018年10月11日，晚上9:59 ＃18

我仍然会得到这个错误:

…/ custom-lovelace /磁卡/ swipe-card.js ? v = 1.0:81:32 TypeError:元素。setConfig不是一个函数。(在“element.setConfig(项)”、“元素。setConfig”是未定义)

Safari和HassOS v. 0.79.3

benm7（本M） 2018年10月12日，上午3:41 ＃19

同样的，使用iPad应用程序。不过喜欢这张卡片!

Bram_Kragten（BRAM KRAGTEN） 2018年10月12日上午7:14 # 20

你的配置是什么?你也在用感应卡吗?您应该将低于ha版本0.80的版本替换为Lovelace：迷你图卡如果你想这样做。

由话语，最能用Javascript启用了