Многострочные компоненты в дереве

Всем привет! Подскажите, пожалуйста, как можно сделать блоки на картинке компонентами? Когда в блоке одна строка текста, цифра [4] может сдвигаться в зависимости от длины строки, а если строк несколько?

Никак, текст сам по себе находится в контейнере и именно контейнерами и оперирует автомакет (auto layout). Контейнер текста будет иметь ширину самой длинной строки этого самого текста, то есть на последней букве первой строки вашего примера.

2 симпатии

Можно просто сделать два стейта вариантами и менять их, как тебе нужно.
https://figma.fun/H55Arq показал как это делается тут. Но это если ты прям хочешь сильно всё компонентами делать

1 симпатия

Насколько я понял, товарищ спрашивал не столько про компоненты, сколько про автомакет (auto layout), а тут никакие варианты не помогут так как иконку с циферкой нельзя подставить ко второй строке не прибегая к костылю с нулевым фреймом но и он не будет реагировать на изменение количества символов второй строки.

1 симпатия

ну он ни слова не написал про автолэйауты, только про компоненты, то, что сдвигается, я реализовал. Костылём, да, но оно работает ведь)

1 симпатия

1 симпатия

Ну так я и написал, что то, чтобы сдвигалось, я реализовал, посмотри ссылку, а не доказывай свою правоту)

1 симпатия

Ну, если ты считаешь это решением задачи то вопросов тут больше нет ))

1 симпатия

понял, спасибо, отмечу ток то, что в первом же смс ты написал, что это невозможно сделать компонентами и лэйаутами

1 симпатия

Странное решение. Не видела, чтоб так делали. Если надо вот прям именно так, тогда в конец строки пихайте символ - цифру (они в смайликах есть, и в символах юникода, из которых люди составляют себе красивые надписи).
Или используйте символы из шрифта Сан-Франциско, в фигма комьюнити есть они.
image

1 симпатия

Есть ещё совершенно странный способ, только что проверила и вроде как получилось. Оно не автоматически конечно подстраивает, зато компонентами )

Суть в том, чтоб зафиксировать иконку папки, прижав её к верхнему левому углу, то же самое сделать с текстом, ограничив его ширину. А вот блок с цифрой прижать с нижнему левому углу. И тогда при изменении текста можно будет ресайзнуть сам экземпляр компонента вручную, поставив цифру как надо.

1 симпатия

Увы но не получится использовать символы SF если основной текст использует другой шрифт, а иконки из коммьюнити это просто svg иконки

1 симпатия

Поставить основной шрифт SF проблема разве? А про иконки из комьюнити вы зря, в моей копии две страницы, на первой символы из шрифта, а на второй иконки свг )

1 симпатия

Ну если в остальном макете используется другой шрифт то это проблема.

А про иконки из комьюнити вы зря, в моей копии две страницы, на первой символы из шрифта

Да, не заметил просто вторую страницу ))

1 симпатия

Раз уж тут зашла речь о костылях то могу поделиться вот такой петрушкой.

Этот элемент заменяет костыль с нулевым фреймом в автомакете. Элемент экспериментальный и создать его невозможно, но можно скопировать и размножить ))

1 симпатия

Идея прикольная, но не до конца решает поставленную задачу)) Мой вариант решает, но надо ручками каждый блок настраивать, что не всегда хочется делать )

Тут же как раз сложность в том, что строк больше одной, и как поймать конец строки неясно ) Поэтому сразу же пришла в голову мысль пихать чипсу символом в конец строки )

1 симпатия

Да нет, это не про решение этой задачи, просто поделился этой штуковиной, может пригодится кому ))

1 симпатия

Но в компонентах оно работает не будет, пробовал так же сделать)

1 симпатия

У меня всё прекрасно работает

1 симпатия

Тогда у тебя по другому работают инстансы) Буду рад узнать(подсмотреть в файле) как это сделать так, чтобы можно было менять в инстансе(кроме как с помощью кастомных отступов у этого нулевого фрейма)