Chip

Chips могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.

Chip​

Использование​

Компонент Chip может содержать текст, который указывается в свойстве text, или любой контент напрямую через children.

Свойство text можно использовать вместе со свойствами contentLeft и contentRight. С их помощью можно размещать иконку слева или справа от текста.

Так же есть свойство contentClearButton, которое позволяет прокинуть custom иконку. Отключить отображение иконки закрытия можно с помощью свойства hasClear.

Live Editor
Result
Open in CodeSandbox

Примеры​

Размер Chip​

Live Editor
Result
Open in CodeSandbox

Вид Chip​

Вид Chip задается с помощью свойства view. Возможные значения свойства view:

  • "default" – основная;
  • "secondary" – вторичная;
  • "accent" – акцентный.
Live Editor
Result
Open in CodeSandbox

Размер Chip​

Размер Chip задается с помощью свойства size:

Live Editor
Result
Open in CodeSandbox

Градиентный текст​

Текст чипа можно окрасить в градиентный цвет с помощью класса sdds-core-text-node

Live Editor
Result
Open in CodeSandbox

API​