小编kej*_*eja的帖子

尝试用css制作尽可能小的嵌套圆圈

我正在使用Vue组件,用户可以在其中添加圈子到其他圈子,支持无限级别的嵌套,但我对CSS有一些问题.

以下是问题的简化版本:

我试图实现这样的目标.

我认为flexbox这对于那份工作来说是一个很好的选择,但是不能让它按照我想要的方式工作,它总是太大而且不会分成单独的线或突破圈子.

我已经尝试过这种方法,如果有更简单的方法,我可以开放新的结构.只要圆圈有标题和内容,考虑使用before和after标题和内容来简化结构,但尚未探索该选项.

document.querySelectorAll(".circle").forEach( el => el.style.height = window.getComputedStyle(el).width);

Run Code Online (Sandbox Code Playgroud)

* {
  margin: 0;
  padding: 0;
}
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  flex-flow: row wrap;
  justify-content: space-around;
}
.circle {
  border-radius: 50%;
  padding: 40px;
  box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}
.head {
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
  height: 20px;
}
.body {
  align-items: center;
}
.red {
  background-color: rgba(255, 17, 0, …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox vue.js

kej*_*eja

2018 01-18

14
推荐指数

1
解决办法

401
查看次数

自定义元素未设置/获取属性

如果我创建两个自定义元素并在另一个元素内创建其中一个，则这些属性不适用于第一个元素的新子元素。

class Bar extends HTMLElement {
  constructor() {
    super();
    const val = this.getAttribute('val') || 'no value';

    const shadow = this.attachShadow({mode: 'open'});
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `
      <div class='bar'>
      	<span>${val}</span>
      </div>
    `;

    shadow.appendChild(wrapper);
  }
}
customElements.define('x-bar', Bar);

class Foo extends HTMLElement {
  constructor() {
    super();
    const loop = this.getAttribute('loop') || 10;

    const shadow = this.attachShadow({mode: 'open'});
    const wrapper = document.createElement('div');
    
    for(let i=0; i<loop; i++){
    	const b = document.createElement('x-bar');
        b.setAttribute('val', `value #${i}`);
      
        wrapper.appendChild(b);
    }

    shadow.appendChild(wrapper);
  }
}
customElements.define('x-foo', Foo);

Run Code Online (Sandbox Code Playgroud)