Добавление CSS для деформации формы ввода

Я реализую простую форму с Colander и Deform; однако я хочу переопределить таблицу стилей по умолчанию и предоставить свою собственную. Однако я понятия не имею, как обеспечить свой собственный стиль для формы. Вот код, который я использую:

class Mapping(colander.Schema):
   Firstname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
   Lastname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
   Email = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
   date = colander.SchemaNode(colander.Date(), widget = deform.widget.DatePartsWidget(), description = "content date")

class Schema(colander.Schema):
    Age = colander.SchemaNode(colander.Integer(), css_class='deform-widget-with-style')
    Firstname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
    Lastname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
    Email = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')


form = deform.Form(topList(),buttons=('submit',)).render(controlData)

Когда я запускаю это, я получаю план, пользовательскую форму по умолчанию. Как я могу предоставить свои собственные шаблоны со стилем для кнопок и полей ввода? Любые предложения или ответы приветствуются.

Текущая форма:

Моя пользовательская форма

Желаемый стиль поля ввода:

введите здесь описание изображения

Желаемый стиль кнопки:

введите здесь описание изображения


python flask deform colander
person Ajax1234    schedule 05.10.2017    source источник
comment
Отображается ли форма со стилями начальной загрузки по умолчанию, когда вы опускаете какие-либо свойства css_class?   -  person Sascha Gottfried    schedule 06.10.2017
comment
@SaschaGottfried спасибо за ваш комментарий. На самом деле форма не отображает стили начальной загрузки по умолчанию, когда свойства css_class опущены.   -  person Ajax1234    schedule 06.10.2017
comment
Если это так, проверьте свое приложение пирамиды на предмет успешной интеграции деформации. Есть пара подводных камней, но, как я показал в своем ответе, это не ракетостроение, и документов достаточно.   -  person Sascha Gottfried    schedule 06.10.2017
comment
Только что увидел, что вы пометили его FLASK. Все советы на этой странице относятся к использованию в пирамидальном приложении. Вы используете FLASK?   -  person Sascha Gottfried    schedule 06.10.2017
comment
@SaschaGottfried Да, я использую колбу.   -  person Ajax1234    schedule 06.10.2017
comment
Только что нашел эту 6-летнюю суть настройки flask/deform (gist.github.com/aanastasiou/2659299) Это довольно необычная установка. Удачи с этим.   -  person Sascha Gottfried    schedule 06.10.2017
comment
Скорее всего, ваша проблема связана с интеграцией статических ресурсов. Это должно быть сделано в колбе. Но в вашем вопросе отсутствуют все образцы кода, необходимые для эффективной удаленной отладки. Мне точно мало.   -  person Sascha Gottfried    schedule 06.10.2017
comment
@SaschaGottfried Большое спасибо за вашу помощь! Я буду двигаться вперед со всеми ссылками, которые вы предоставили. Спасибо.   -  person Ajax1234    schedule 06.10.2017

Ответы (2)


arrow_upward
1
arrow_downward

Желаемое поле ввода и кнопка отправки выглядят как стили Bootstrap.

Я бы добавил bootstrap в ваш пакет, а затем добавил соответствующие имена классов, которые добавят некоторые значения по умолчанию. style: в вашем файле конфигурации Paste Deploy (например, development.ini) добавьте deform_bootstrap в список пирамиды_includes или добавьте эту строку, если параметр пирамиды.includes не существует:

[app:main]
...
pyramid.includes = deform_bootstrap

Это поместит шаблоны в deform_bootstrap/templates в путь поиска деформации.

Ваш input должен выглядеть так

<input class="form-control">

И ваш button должен выглядеть так

<button type="button" class="btn btn-primary"></button>
person GumZ    schedule 05.10.2017
comment
Как включить бутстрап в свой проект? - person Ajax1234; 06.10.2017
comment
Этот совет довольно устарел, так как в наши дни deform (github.com/Pylons/deform) поставляется со встроенным в стиле Bootstrap 3. - person Sascha Gottfried; 06.10.2017

arrow_upward
1
arrow_downward

Типичный пример приложения для деформации указывает пирамиде обслуживать статические активы, такие как файлы JavaScript и CSS. Приложение регистрирует deform ресурсы пакета с помощью config. .add_static_view()

def main(global_config, **settings):
    """pserve entry point"""
    session_factory = UnencryptedCookieSessionFactoryConfig('seekrit!')
    config = Configurator(settings=settings, session_factory=session_factory)
    config.include('pyramid_chameleon')
    deform.renderer.configure_zpt_renderer()
    config.add_static_view('static_deform', 'deform:static')
    config.add_route('mini_example', path='/')
    config.add_view(mini_example, route_name="mini_example", renderer="templates/mini.pt")
    return config.make_wsgi_app()

Шаблон, отображающий форму, может ссылаться на ресурсы JS/CSS, предоставленные deform в теге head. Это в основном все, что вам нужно для запуска приложения деформации со стилем по умолчанию.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Deform Sample Form App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- JavaScript -->
    <script src="static/scripts/jquery-2.0.3.min.js"></script>
    <script src="static/scripts/bootstrap.min.js"></script>
    <tal:loop tal:repeat="js_resource js">
      <script src="${request.static_path(js_resource)}"></script>
    </tal:loop>

    <!-- CSS -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css"
          type="text/css">
    <link rel="stylesheet" href="static/css/form.css" type="text/css">
    <tal:loop tal:repeat="css_resource css">
      <link rel="stylesheet" href="${request.static_path(css_resource)}"
            type="text/css">
    </tal:loop>

  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Sample Form</h1>
          <span tal:replace="structure form"/>
        </div>
      </div>
    </div>
  </body>
</html>

Хорошим подходом к настройке будет переопределение любых классов CSS, предоставляемых Bootstrap, или добавление собственного CSS в ваш пользовательский пакет приложения mypyramidapp. Добавьте ресурсы CSS и/или JS в папки static или scripts — общие папки в приложениях-пирамидах. Вы должны зарегистрировать эти активы в своем приложении пирамиды.

config.add_static_view('static_myapp', 'myapp:static')
config.add_static_view('scripts_myapp', 'myapp:scripts')

Учитывая, что вы можете включить свои пользовательские файлы CSS в любой шаблон и использовать общие подходы к оформлению тем для отображения форм в ваших пользовательских стилях.

Я думаю, что переопределение CSS было бы более удобным для начала, поскольку вам нужно передавать пользовательские классы CSS для деформации виджетов с использованием параметра css_class.

Я рекомендую вам обратиться к этим примерам приложений deformdemo — крупнее и < пример href="https://github.com/Pylons/deformdemo/blob/master/mini.ini" rel="nofollow noreferrer">mini для демонстрации функций деформации и необходимой настройки приложения пирамиды.

person Sascha Gottfried    schedule 06.10.2017