ipywidgets按钮上的自定义文本位置

html5 • • 问答

我试图在到达所有边缘的按钮上放置一个“+”号。这是一个来自 Jupyter 笔记本的最小示例，首先是样式：

%%html
<style>
.button_style{
    font-size:155px;
    color: black;
}
</style>

和按钮本身：

import ipywidgets as ipyw
button = ipyw.Button(description='+', style={'button_color':'blue'},    
                     layout=ipyw.Layout(width='80px', height='80px'))
button.add_class("button_style")

如您所见，我尝试使字体大小足够大以到达按钮边缘。但问题是文字没有与按钮中间对齐：

我已经打了类似的选项text-align，left-padding，left-margin等，但它们都影响到整个按钮，即它们翻译或变形，整个蓝色方块，而不是仅仅在它的文本。

有没有办法做到这一点？理想情况下，我可以改变十字架的中心，但总是让它到达所有边缘，而不会使十字架本身变得超级胖。但也欢迎不太理想的解决方案。

更新：

所以我要找的结果是这样的：

可以配置中心和理想情况下的线条粗细。如果使用“+”获得结果并不重要，只要按钮看起来像这样并且背景颜色仍然可以使用style={'button_color': ..}.

回答

正如@johanchopin 提到的，这可以通过伪元素来完成。我建议一个类似于他的解决方案，但没有内部.custom-plusdiv。它更好，因为它允许您按ipywidgets原样使用并添加样式。

这将允许您ipywidgets像这样使用按钮：

风格

%%html
<style>
.button_style {
  --size: 80px;
  --line-color: black;
  --line-color-horizontal: var(--line-color);
  --line-color-vertical: var(--line-color);
  --line-stroke: calc(0.125 * var(--size));
  --line-stroke-horizontal: var(--line-stroke);
  --line-stroke-vertical: var(--line-stroke);
  --line-distance: calc(0.2 * var(--size));
  --line-distance-right: var(--line-distance);
  --line-distance-bottom: var(--line-distance);
  --line-hover: lightblue;
  --background: blue;
  --background-hover: var(--background);
  color: black;
  padding: 0;
  background: var(--background);
  width: var(--size);
  height: var(--size);
  position: relative;
  border: none;
  cursor: pointer;
}

.button_style:hover {
  background: var(--background-hover);
}

.button_style:hover::before, .button_style:hover::after {
  background: var(--line-hover);
}

.button_style::before, .button_style::after {
  position: absolute;
  content: "";
  transition: background 250ms;
}

.button_style::before {
  left: 0;
  bottom: var(--line-distance-bottom);
  width: 100%;
  height: var(--line-stroke-horizontal);
  background: var(--line-color-horizontal);
}

.button_style::after {
  right: var(--line-distance-right);
  top: 0;
  height: 100%;
  width: var(--line-stroke-vertical);
  background: var(--line-color-vertical);
}
</style>

定义

import ipywidgets as ipyw
button = ipyw.Button(description='+', style={'--size':'80px', '--background': 'blue' })
button.add_class("button_style")

您也可以删除用于定义按钮大小的布局选项，因为它是可选的，而且我们已经使用 CSS 变量 ( --size)设置了大小。此外，使用 CSS 变量，我们可以设置背景颜色，甚至在悬停时更改颜色（请参阅我的代码片段示例）。

.button_style {
  --size: 80px;
  --line-color: black;
  --line-color-horizontal: var(--line-color);
  --line-color-vertical: var(--line-color);
  --line-stroke: calc(0.125 * var(--size));
  --line-stroke-horizontal: var(--line-stroke);
  --line-stroke-vertical: var(--line-stroke);
  --line-distance: calc(0.2 * var(--size));
  --line-distance-right: var(--line-distance);
  --line-distance-bottom: var(--line-distance);
  --line-hover: lightblue;
  --background: blue;
  --background-hover: var(--background);
  color: black;
  padding: 0;
  background: var(--background);
  width: var(--size);
  height: var(--size);
  position: relative;
  border: none;
  cursor: pointer;
}

.button_style:hover {
  background: var(--background-hover);
}

.button_style:hover::before,
.button_style:hover::after {
  background: var(--line-hover);
}

.button_style::before,
.button_style::after {
  position: absolute;
  content: "";
  transition: background 250ms;
}

.button_style::before {
  left: 0;
  bottom: var(--line-distance-bottom);
  width: 100%;
  height: var(--line-stroke-horizontal);
  background: var(--line-color-horizontal);
}

.button_style::after {
  right: var(--line-distance-right);
  top: 0;
  height: 100%;
  width: var(--line-stroke-vertical);
  background: var(--line-color-vertical);
}
<button></button>

<button></button>

<button></button>

<button></button>

<div>
  <button></button>
</div>

以上是ipywidgets按钮上的自定义文本位置的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>