使用materialecss的简单django表单模板标记
django-materializecss-form的Python项目详细描述
#物化css form
django form的物化css
一个简单的django模板标记,可以与[materialecss]一起使用(http://materialecss.com/)
pypi](https://pypi.python.org/pypi/django materialecss form)
[在github上](https://github.com/kalwalkden/django materialecss form)
添加到已安装的应用:
`````
已安装的应用=(
“materialecssform”,
…
)
```
在项目中添加物化控件:
在基础中。html:
````
<;head>;
{%block css%}
<;link-href=“https://fonts.googleapis.com/icon?
<;lt;link rel=“stylesheet”rel=“stylesheet”rel=“stylesheet”rel=“stylesheet”rel=“stylesheet”>;
<;link rel=“stylesheet”rel=“http://cdnjs.cloudnjs.com/ajax/libs/materiale/1.0.0-rc.0-rc.1/css/materiale.min.css”integrity=“sha256-qj3p6p1fjiv+ndv7rw1u12uhuwuuuuuwboj9gcodzcnnfin8=“crossorigin=“anononymous=”/>>;
>>>
{%endblockcs/>```
<;body>;
{%block javascript%}
<;脚本
src=“https://code.jquery.com/jquery-3.3.1.min.js”
integrity=“sha256 fgpcb/kjqllnfou91ta32o/nmzxltwro8qtmkmmdau8=”
crossorigin=“anonymous”>;
<;script src=“https://cdnjs.cloudflare.com/ajax/libs/materialie/1.0.0-rc.1/js/materialie.min.js”integrity=“sha256 srbfgi+zp2lhavy9m1bwocxztru9ztztxmu5bcypcpe=”crossorigin=“anonymous”>;
<;script>;
(document).ready(function(){
///初始化物化数据选择器
$('.datepicker').datepicker({'format''yyyyymm-dd'});
$('select').formselect();
<;
<;
>
{%endblock javascript%%
>
>
>
这样使用,简单。
``html
{%load materialececss%}
```
` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` `(一)有权使用;|
````
``定制大小(默认值为‘s12’)
``html
{{form{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{form{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{在通过一次生成一个字段来创建自定义布局时,对于添加描述性图标最有用。将下面的字段名替换为表单中的一个字段名。
```html
{{form.field{field{field{field物化ecss:'s12 M6,icon=person'}
{{{form.field{field物化ecss:'custom_size=s12 M6,icon=person'}
```
`````
```````````
`````如果您使用的是可选的图标集,则选择图标集
你需要在你的设置文件:
``python
materialecss_icon_set='fontaweos'
```
支持当前的[Font Aweos](https://www.fontaweos.com/)和[GlyphIcons](https://www.glyphIcons.com)。但是,您可能需要修改css以获得完全支持。
由于此字段需要ISO-8601格式,您的主项目设置需要包含ISO格式,表单才能有效解释此字段:
```
来自django.conf.global_settings import datetime_input_format s
ISO 8601 datetime format接受HTML5 datetime输入值
datetime_input_formats+=[%y-%m-%dt%h:%m:%s”,%y-%m-%dt%h:%m]
```
##演示
![基本表单](https://cloud.githubusercontent.com/assets/3958123/6165004/a1984f52-b2a4-11e4-8ae2-078505991b0d.png)
![日期选择器](https://cloud.githubusercontent.com/assets/3958123/6165005/a19bf044-b2a4-11e4-9989-6a64f9c97087.png)
![日期计时器选取器](https://user images.githubusercontent.com/556361/49763533-8a44f580-fc92-11e8-8d24-f45373becd11.png)
帮助
小部件
-textinput
-textarea
-checkboxinput
-radioselect
-select
-selectmultiple
-checkboxselectmultiple
-filefield
-datefield
通过
[django bootstrap form](https://github.com/tzangms/django bootstrap form)
\
django form的物化css
一个简单的django模板标记,可以与[materialecss]一起使用(http://materialecss.com/)
pypi](https://pypi.python.org/pypi/django materialecss form)
[在github上](https://github.com/kalwalkden/django materialecss form)
添加到已安装的应用:
`````
已安装的应用=(
“materialecssform”,
…
)
```
在项目中添加物化控件:
在基础中。html:
````
<;head>;
{%block css%}
<;link-href=“https://fonts.googleapis.com/icon?
<;lt;link rel=“stylesheet”rel=“stylesheet”rel=“stylesheet”rel=“stylesheet”rel=“stylesheet”>;
<;link rel=“stylesheet”rel=“http://cdnjs.cloudnjs.com/ajax/libs/materiale/1.0.0-rc.0-rc.1/css/materiale.min.css”integrity=“sha256-qj3p6p1fjiv+ndv7rw1u12uhuwuuuuuwboj9gcodzcnnfin8=“crossorigin=“anononymous=”/>>;
>>>
{%endblockcs/>```
<;body>;
{%block javascript%}
<;脚本
src=“https://code.jquery.com/jquery-3.3.1.min.js”
integrity=“sha256 fgpcb/kjqllnfou91ta32o/nmzxltwro8qtmkmmdau8=”
crossorigin=“anonymous”>;
<;script src=“https://cdnjs.cloudflare.com/ajax/libs/materialie/1.0.0-rc.1/js/materialie.min.js”integrity=“sha256 srbfgi+zp2lhavy9m1bwocxztru9ztztxmu5bcypcpe=”crossorigin=“anonymous”>;
<;script>;
(document).ready(function(){
///初始化物化数据选择器
$('.datepicker').datepicker({'format''yyyyymm-dd'});
$('select').formselect();
<;
<;
>
{%endblock javascript%%
>
>
>
这样使用,简单。
``html
{%load materialececss%}
```
` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` `(一)有权使用;|
````
``定制大小(默认值为‘s12’)
``html
{{form{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{form{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{在通过一次生成一个字段来创建自定义布局时,对于添加描述性图标最有用。将下面的字段名替换为表单中的一个字段名。
```html
{{form.field{field{field{field物化ecss:'s12 M6,icon=person'}
{{{form.field{field物化ecss:'custom_size=s12 M6,icon=person'}
```
`````
```````````
`````如果您使用的是可选的图标集,则选择图标集
你需要在你的设置文件:
``python
materialecss_icon_set='fontaweos'
```
支持当前的[Font Aweos](https://www.fontaweos.com/)和[GlyphIcons](https://www.glyphIcons.com)。但是,您可能需要修改css以获得完全支持。
由于此字段需要ISO-8601格式,您的主项目设置需要包含ISO格式,表单才能有效解释此字段:
```
来自django.conf.global_settings import datetime_input_format s
ISO 8601 datetime format接受HTML5 datetime输入值
datetime_input_formats+=[%y-%m-%dt%h:%m:%s”,%y-%m-%dt%h:%m]
```
##演示
![基本表单](https://cloud.githubusercontent.com/assets/3958123/6165004/a1984f52-b2a4-11e4-8ae2-078505991b0d.png)
![日期选择器](https://cloud.githubusercontent.com/assets/3958123/6165005/a19bf044-b2a4-11e4-9989-6a64f9c97087.png)
![日期计时器选取器](https://user images.githubusercontent.com/556361/49763533-8a44f580-fc92-11e8-8d24-f45373becd11.png)
帮助
小部件
-textinput
-textarea
-checkboxinput
-radioselect
-select
-selectmultiple
-checkboxselectmultiple
-filefield
-datefield
通过
[django bootstrap form](https://github.com/tzangms/django bootstrap form)
\