Как стилизовать этот массив в виде эллиптических блоков - CSS - PullRequest
0 голосов
/ 06 января 2019

Я работаю с этим рабочим пространством демо - Демо

Здесь у меня есть массив.

var a = [{"id":"firstName","value":["Sam3","Sam5"]},{"id":"lastName","value":["Jones4","Jones5"]}] 

Это проект на основе React. Я хочу показать это как стиль на странице (вместо массива). Я хочу показать это как это изображение.

image

Это эллиптическая, а не неправильная форма.

Там будет также крестик вместе с массивом.

<div>
<div>id: val0,val1 (and a cross button to remove this filter)</div>
<div>id: val0,val1 (and a cross button to remove this filter)</div> .... so on
</div>

Как отобразить этот массив в этом типе эллиптического стиля

Пожалуйста, ответьте на мой Демо Fiddle

image

firstName: Sam2, Sam3 будет в одном эллиптическом поле, а lastName: Jones3, Jones5 будет в другом поле. Может быть десятки ящиков, сейчас я работаю с двумя.

Коробки будут такими

image

В пустой области эллиптических полей появится текст, а затем крестик / иконка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...