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

Question

我正在尝试在触及所有边缘的按钮上放置一个“+”号。这是一个最小的例子，来自 Jupyter notebook，首先是一个样式：

%%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': ..}改变。

Answer 1

我建议您使用纯 css:

中的 ::before 和 ::after 元素创建这两个柱状图

.button_style::before {
  position: absolute;
  left: 0;
  bottom: 15px;
  content: "";
  width: 100%;
  height: 10px;
  background: black;
}

.button_style::after {
  position: absolute;
  top: 0;
  right: 15px;
  content: "";
  height: 100%;
  width: 10px;
  background: black;
}

最终结果如下所示：

.button_style {
  position: relative;
  font-size: 155px;
  color: black;
  line-height: 0;
  padding: 0;
  background: blue;
  width: 80px;
  height: 80px;
}

.button_style::before {
  position: absolute;
  left: 0;
  bottom: 15px;
  content: "";
  width: 100%;
  height: 10px;
  background: black;
}

.button_style::after {
  position: absolute;
  top: 0;
  right: 15px;
  content: "";
  height: 100%;
  width: 10px;
  background: black;
}

<button class="button_style"></button>

看看Jsfiddle。

Answer 2

正如@johannchopin 提到的，这可以用伪元素来完成。我建议一个类似于他的解决方案，但没有内部 .custom-plus div。它更好，因为它允许您按原样使用 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 class="button_style"></button>

<button class="button_style" style="--line-distance: 35px; --background: purple; --line-hover: white"></button>

<button class="button_style" style="--line-distance-bottom: 10px; --line-distance-right: 65px; --background: hsl(348, 100%, 61%); --line-color: hsl(48, 100%, 67%); --line-hover: white"></button>

<button class="button_style" style="--line-distance-bottom: 20px; --line-distance-right: 20px; --background: orange; --line-stroke-horizontal: 25px; --line-hover: orange; --background-hover: black"></button>

<div style="margin: 1em 0">
  <button class="button_style" style="--size: 40px"></button>
</div>

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

custom text position on ipywidgets button

css

python

ipywidgets

风格

定义