Css стилизация повторяющейся формы — Wappler General
ryanmorrow #1
Добрый день всем,
У меня есть конкретный вопрос относительно повторяющихся форм и стилизации указанной формы. В настоящее время я создал форму повторения, которая имеет несколько разделов. Например, в настоящее время в форме есть раздел «Автомобиль», в этом разделе есть 6 вопросов, на которые необходимо ответить. Кроме того, пользователь может добавить и дополнительное транспортное средство. См. изображение ниже
Мне интересно, как лучше всего стилизовать файлы, чтобы они выводились следующим образом на странице просмотра возвращаемых данных.
В настоящее время раздел Транспортное средство выводит данные обзора следующим образом. Проблема в том, что в настоящее время нет способа различить эти два автомобиля. См. прикрепленное изображение
.
Я хотел бы, чтобы макет отображался следующим образом (я быстро создал этот макет в фигме). Если есть два или более входа для обзора, на изображении ниже есть два макета.
Я провел небольшое исследование, но должен сказать, что немного запутался, как связать данные. Я бы предположил, что использование элемента списка внутри div будет работать. Ниже приведен пример, который я пробовал, но не получил желаемого макета.
<дел>
<дел>
Возраст:
@бен @Сыр
Теодор #2
Мы не можем ответить на такой вопрос, не видя вашу живую страницу или текущий код Отладка по изображению — это не отладка по коду.
Райанморроу #3
Вот прикрепленный почтовый индекс со страницей и связанным с ней CSS. Обратите внимание, что CSS не доработан и предназначен только для частичной стилизации в целях тестирования.
updated_carbonCalculator.zip (6,0 КБ)
@Teodor
Teodor #4
О, чувак, я вижу так много странных вещей на твоей странице HTML. Насколько я понимаю, вы хотите иметь один центрированный столбец, когда повторение возвращает 1 запись, а затем столбец должен быть шириной 50%, если возвращается более 1 записи.
Этого можно достичь с помощью динамического класса, например:
<дел>
Заголовок здесь
Ответ здесь
, но вам нужно будет настроить это в своем дизайне, так как мне очень трудно понять логику вашего HTML-кода.
Райанморроу #5
Это интересно, так как я работал с Патриком над кодом, чтобы исправить ошибку DMX при анализе данных JSON.
Не могли бы вы уточнить, что именно вы считаете странным? Я хотел бы упростить эту страницу, если это возможно, а также обратите внимание, что эта страница была обновлена, изменена и отлажена за последние несколько месяцев, чтобы она работала правильно при работе с JSON и формой API, отправляющей список данных. .
@Теодор
Теодор #6 райанморроу:
Это интересно, так как я работал с Патриком над кодом, чтобы исправить ошибку, которая была у DMX при анализе данных JSON.
Я имею в виду не все это, а вашу структуру.
райанморроу:
Не могли бы вы уточнить, что именно вы считаете странным?
Ну, все случайные гибкие классы и вся структура
ryanmorrow #7
Да, я согласен с этим, он будет очищен перед тем, как я его запущу.
Чтобы было ясно, сегмент кода dmx-bind:class="repeat1.items.count() == 1 ? 'col-12 col-lg-6 offset-lg-3' : 'col- 12 col-lg-6'">
создаст новый столбец, если он был введен пользователем? а если есть три машины, будет ли создана третья колонка с данными?
Извините_Duh #8
Это похоже на то, чего вы пытаетесь достичь? При этом используется макет строки и столбца, а затем внутри каждого столбца находится таблица для автоматического размера до наибольшего значения справа без переноса
Теодор #9
Если повтор возвращает одну запись, будет применено col-12 col-lg-6 offset-lg-3 , что означает один столбец шириной 50%, центрированный на большом экране. Если повтор возвращает более 1 записи, будет применено col-12 col-lg-6 , что означает два столбца шириной 50%, расположенных рядом друг с другом на большом экране.
Райанморроу #10
@Sorry_Duh, да, и данные, заполняющие столбцы, поступают из данных, введенных пользователем в форме повторения.
@Teodor, спасибо за помощь, я пробую это и дам вам знать, если это сработает (а я уверен, что сработает)
ryanmorrow #11
@Teodor быстрый вопрос, как я могу получить заголовок для каждой возвращаемой записи столбца? если будет возвращена одна запись, она будет иметь H5 с названием «Данные о транспортном средстве 1», если более одной записи, каждый столбец будет иметь заголовок «Данные о транспортном средстве 1», «Данные о транспортном средстве 2», «Данные о транспортном средстве 3» и т. д.?
Теодор #12
Ну, вы можете использовать
Автомобиль {{$index + 1}} data
ryanmorrow №13
В этом есть смысл. Спасибо.
Райанморроу №14
@Tedor
Ниже приведено dmx-bind:repeat=»1″. Однако для возврата предметов мне нужна привязка к статистике «carbonCalculator.Vehicles.items» в дополнение к id = «VehResponse». вы заявляете, что это должно быть id = «repeat1».
Как я могу объяснить это как работу с Патриком, чтобы данные сохранялись правильно, чтобы сделать вызов API, который должен отображаться таким образом. Если я что-то упускаю или ошибаюсь, это меня не удивит.
Производитель транспортных средств, находящихся в собственности или в аренде
{{VehManufacturer.value}}
<дел>
Тип транспортного средства: собственное или арендованное
{{VehType.value}}
<дел>
Год автомобиля в собственности или аренде
{{VehYear.value}}
<дел>
Количество миль, пройденных за год на принадлежащее или арендованное транспортное средство
{{OverallVehMilesDrivenPerYear.
value}}
<дел>
Приблизительный расход топлива на один автомобиль, принадлежащий или арендованный
{{OverallVehMilesPerGallon.value}}
<дел>
Среднее количество миль за город в месяц
{{VehPctCityDriving.value}}
<дел>
Вы регулярно проводите техническое обслуживание собственных или арендованных транспортных средств?
{{NoRegularVehicleAutoMaintenance.value}}
дел> Теодор №16
Нет, ваш код совершенно неправильный… вы не можете поместить весь предоставленный мной HTML-код в уже раздутый HTML-код. Мой dmx-bind:repeat="1" был просто примером. Просто настройте свой код в соответствии с вашим собственным дизайном и повторите идентификатор.
Райанморроу # 17
Ладно, я все еще считаюсь Нуби.
Вы хотите сказать, что я не делаю div для каждого возвращаемого значения? Можно ли это поместить в список?
Чтобы избавиться от раздувания, могу ли я поместить возврат в группу списка, а затем указать для каждого элемента следующее;
Производство транспортных средств {{$index + 1}} : {{VehManufacturer.value}}
@Teodor
Teodor # 18
Я не уверен, что понимаю, извините. Я предоставил вам пример кода, чтобы достичь того, что вам нужно, вам нужна его динамическая часть и настроить ее в соответствии с вашим кодом, используя ваши собственные выражения и идентификаторы.
Райанморроу # 19
@Teodor спасибо за помощь, мне удалось получить макет для отображения данных!
Один быстрый вопрос: при применении адаптивного дизайна для мобильных устройств, как мне добавить сегмент столбца? Как вы сказали, я пытаюсь избежать раздувания.
Доступно с версии Bricks 1.6.1 Сетка CSS позволяет создавать двухмерные макеты (столбцы и строки). Принимая во внимание, что CSS flexbox, который Bricks использует в качестве модели макета по умолчанию, предназначен для одномерных макетов (столбца или строки).
Создание макета сетки
Вы можете превратить любой элемент макета (раздел, контейнер, блок, div) в макет сетки CSS, установив для параметра Display значение grid . Этот элемент — ваш Grid Container .
Каждый прямой дочерний элемент вашего контейнера Grid является элементом сетки с дополнительными настройками для столбца сетки и строки сетки для размещения элемента в сетке.
При редактировании контейнера сетки в конструкторе становится видимым наложение сетки, указывающее ячейки сетки. Щелчок по маленькому значку действия элемента с четырьмя квадратами позволяет показать/скрыть это наложение.
Контейнер сетки (display: grid) с 6 элементами сетки (прямые дочерние элементы) и зазором 20px
Как вы можете видеть на снимке экрана выше, элементы сетки по умолчанию располагаются рядами, покрывая всю ширину контейнера сетки. Что само по себе не раскрывает истинную мощь сетки CSS, пока вы не начнете…
Настройка дорожек столбцов и строк (явная сетка)
После того, как мы создали наш контейнер сетки, пришло время определить столбец и строку нашей сетки. треки.
Мы можем сделать это явно через Столбцы шаблона сетки ( grid-template-columns ) и Строки шаблона сетки ( grid-template-rows ) настройки нашего контейнера сетки.
Давайте вместе рассмотрим несколько примеров…
grid-template-columns: 200px 1fr 2fr
Каждое значение grid-template-columns 90 105 создает дорожку столбца.
В приведенном выше примере создается сетка из трех столбцов.
fr — это новая гибкая единица, называемая дробной единицей, которая занимает x частей доступного пространства.
Как рассчитывается из ?
Предположим, что наш контейнер сетки имеет ширину 1100 пикселей (ширина контейнера по умолчанию).
Сначала нам нужно вычесть все значения и промежутки, отличные от fr: Таким образом, за вычетом фиксированной ширины столбца 1 в 200 пикселей оставшаяся доступная ширина составляет 900 пикселей.
Всего у нас есть 3 дробные единицы (1 fr из столбца 2 плюс 2 fr из столбца 3), чтобы выделить оставшееся место.
Значение 1fr равно 300px (= 900px / 3). Таким образом, столбец 2 имеет ширину 300 пикселей (= 1fr x 300 пикселей), а столбец 3 имеет ширину 600 пикселей (= 2fr x 300 пикселей).
grid-template-rows: 100px 300px
Каждое значение свойства grid-template-row s создает дорожку строки.
В приведенном выше примере явно определены первые две строки. Строка 1 имеет высоту 100 пикселей, а строка 2 — 300 пикселей.
Поскольку мы явно определили высоту только для первых двух строк, высота любой строки после строки 2 по умолчанию определяется высотой ее содержимого. Мы можем изменить это поведение, создав неявную сетку …
Неявная сетка
Контейнер сетки автоматически создает дополнительные (столбцы и строки) дорожки для элементов сетки, которые выходят за пределы вашей явно определенной сетки. Это называется неявной сеткой.
Вы можете определить размеры столбцов и строк этой неявной сетки с помощью Grid auto columns ( grid-auto-columns ) и Grid auto rows ( grid-auto-rows ) настройки контейнера сетки.
Минимальный и максимальный размеры дорожек сетки
Функция CSS minmax позволяет установить минимальный и максимальный размер дорожек.
Принимает два аргумента. Первое — это минимальное значение, а второе — максимальное значение вашей дорожки сетки.
Создает явную сетку из 3 столбцов, где каждый элемент сетки имеет мин. ширина 200 пикселей и макс. ширина 1фр.
Проблема такой явной сетки в том, что она не отвечает. Он переполняется, когда окно просмотра имеет ширину менее 600 пикселей (3 столбца минимум 200 пикселей), а количество столбцов не подстраивается под разные точки останова из коробки.
ключевые слова с автозаполнением и автоподбором
Мы можем использовать ключевые слова с автозаполнением или с автоподбором для решения этих проблем с реагированием. Это позволяет нам создавать адаптивные макеты сетки без медиа-запросов.
Таким образом, вместо того, чтобы устанавливать явную сетку из 3 столбцов, мы используем ключевое слово auto-fill или auto-fit следующим образом: ))
Какое ключевое слово использовать, зависит от желаемого поведения. auto-fit расширяет элементы сетки, чтобы заполнить доступное пространство. В то время как автозаполнения нет (он сохраняет доступное место).
Повторять размеры дорожек
Функция повтора CSS позволяет определить шаблон повторяющихся размеров дорожек в компактном формате.
Принимает два аргумента. Первый — это количество повторений трека, а второй — определение треков.
grid-template-columns: repeat(3, 1fr) Создает явную сетку из 3 столбцов.
grid-template-rows: 100px repeat(2, 1fr) 200px Создает явную 4-рядную сетку. Где строка 1 имеет высоту 100 пикселей, строки 2 и 3 имеют высоту 1 fr каждая, а строка 4 имеет высоту 200 пикселей.
Размещение элементов сетки (по номеру строки)
Линии сетки отмечают начало или конец дорожки столбца или строки. Счет начинается с 1.
Мы можем использовать эти номера строк для размещения элемента сетки в сетке.
В приведенном ниже примере показан явный макет сетки из трех столбцов, элементы сетки которого охватывают три строки.
Это означает, что эта сетка состоит из 4 строк столбцов и 4 строк строк.
При проверке макета сетки любого веб-сайта, нажав маленькую синюю кнопку grid рядом с узлом элемента в браузере, в данном случае Chrome, также показывает линии сетки:
В нашем примере выше мы расположили Grid Item 2 с помощью параметров Grid column ( grid-column ) и Grid row ( grid-row ), таким образом, он занимает два столбца и две строки:
Настройки столбца сетки и строки сетки доступны для всех элементов сетки (прямых дочерних элементов контейнера сетки).
Синтаксис: Первое значение указывает номер начальной строки. За которым следует косая черта ( / ). За ним следует второе значение, указывающее номер конечной строки.
В нашем примере выше мы установили для столбца сетки значение «2 / 4». Сообщаем сетке, что мы хотим, чтобы элемент сетки 2 начинался со строки столбца 2 и заканчивался строкой столбца 4.