#!/usr/bin/env python
# coding: utf-8

# <div style="float:left;margin:0 10px 10px 0" markdown="1">
#     <a href="index.ipynb">
#         <img src="../../static/images/epyklogo_whole_small.png">
#     </a>
# </div>

# # Field
# 
# 
# Field [component](00_components.ipynb) creation in Epyk will be using the property **fields** from the ui property.
# 
# <i>the ui entry point will give you access to all the registered components.
# Different flavour of buttons are available in the framework.</i>
# 
# ## Basic fields

# In[3]:


from epyk.core.Page import Report

rptObj = Report()

a = rptObj.ui.fields.select(["Apple", 'Orange'], label="test", helper="select fruit", options={"align": 'center'})#
a.input.attr["data-live-search"] = "true"
a.input.options.container = 'body'

rptObj.outs.jupyter()


# In[5]:


from epyk.core.Page import Report

rptObj = Report()

rptObj.ui.fields.date('2020-04-08', label="Date").included_dates(["2020-04-08", "2019-09-06"])

rptObj.outs.jupyter()


# In[8]:


from epyk.core.Page import Report

rptObj = Report()

rptObj.ui.fields.time(label="timestamp", color="red", helper="This is the report timestamp")

rptObj.outs.jupyter()


# In[10]:


from epyk.core.Page import Report

rptObj = Report()

rptObj.ui.fields.input("", label="Range Example", icon="fas fa-unlock-alt")

rptObj.outs.jupyter()


# In[12]:


from epyk.core.Page import Report

rptObj = Report()

rptObj.ui.fields.static(label="readonly field")

rptObj.outs.jupyter()


# In[14]:


from epyk.core.Page import Report

rptObj = Report()

rptObj.ui.fields.integer(label="test")

rptObj.outs.jupyter()


# In[15]:


from epyk.core.Page import Report

rptObj = Report()

rptObj.ui.fields.range(54, min=20, label="Range Example", icon="fas fa-unlock-alt")

rptObj.outs.jupyter()