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

Question

我正在尝试在到达所有边缘的按钮上放置一个“+”号。这是一个最小的示例，来自 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 等选项，但它们都会影响整个按钮，即它们平移或变形整个蓝色方 block ，而不仅仅是其中的文本。

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

更新:

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

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

Answer 1

正如@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>