Примеры
Смарт-компонент input
Шаблон email #1
<smart
name="input"
id="input_email"
templateUrl="/ru/components/simai/"
template="email"
class="test test2 test1337"
events='{"input":[{"sf--input":{"action":"initInput"}}],"ready":[{"sf--input":{"action":"loadEvents"}}]}'
sf-code="input"
data='{"placeholder":"Введите почту","disabled":"true", "required": true, "type": "email"}'>
</smart>
Шаблон email #2
<smart
name="input"
id="input_email"
templateUrl="/ru/components/simai/"
template="email"
class="test test2 test1337"
events='{"input":[{"sf--input":{"action":"initInput"}}],"ready":[{"sf--input":{"action":"loadEvents"}}]}'
sf-code="input"
data='{"placeholder":"Введите почту", "required": true, "type": "email"}'>
</smart>
Шаблон phone
<smart
name="input"
id="phone_input"
templateUrl="/ru/components/simai/"
template="phone"
class="phone-input"
events='{"input":[{"phone_input":{"action":"validateInput"}}],"ready":[{"phone_input":{"action":"loadEvents"}}, {"phone_input":{"action":"initPhone"}}]}'
sf-code="input"
data='{
"placeholder": "e.g. +1 (555) 000 00-00",
"required": true,
"selectedCountry": "RU",
"rightContent": "Right Content",
"helpText": "This is a hint text to help user."
}'>
</smart>
Смарт-компонент textarea
Шаблон default #1
<smart
name="textarea"
id="textarea_main"
templateUrl="/ru/components/simai/"
template="default"
class="textarea-default"
events='{"ready":[{"textarea_main":{"action":"loadEvents"}}]}'
sf-code="textarea"
data='{
"label": "Description",
"placeholder": "Enter a description...",
"hint": "This is a hint text to help user.",
"value": "A little about the company and the team that you"
}'
>
</smart>
Шаблон default #2
<smart
name="textarea"
id="textarea_main"
templateUrl="/ru/components/simai/"
template="default"
class="textarea-default"
events='{"ready":[{"textarea_main":{"action":"loadEvents"}}]}'
sf-code="textarea"
data='{
"label": "Description",
"disabled": true,
"placeholder": "Enter a description...",
"hint": "This is a hint text to help user.",
"value": "A little about the company and the team that you"
}'
></smart>
Смарт-компонент pagination
Шаблон default #1
<smart
name="pagination"
id="pagination_main"
templateUrl="/ru/components/simai/"
template="default"
class="pagination-default"
sf-code="pagination"
data='{
"paginate":{
"total": 3,
"current": 1
}}'></smart>
Шаблон default #2
<smart
name="pagination"
id="pagination_main"
templateUrl="/ru/components/simai/"
template="default"
class="pagination-default"
sf-code="pagination"
data='{
"paginate":{
"total": 6,
"current": 2
}}'>
</smart>Шаблон default #3
<smart
name="pagination"
id="pagination_main"
templateUrl="/ru/components/simai/"
template="default"
class="pagination-default"
sf-code="pagination"
data='{
"paginate":{
"total": 100,
"current": 51
}}'
></smart>
Смарт-компонент alerts
Шаблон default #1
<smart
name="alerts"
events='{"click":{"0":{"cl--accordion-button":{"action":"open"}},"1":{"test_text":{"action":"test"}}},"ready":{"0":{"test":{"action":"bla"}}}}'
sf-code="alerts"
data='{"class":"sf-alert--secondary",
"content": {"title": "title","main": "This is an alert example"},
"param": {"icon": "info" ,"footer":{"text1": "Learn more", "text2": "Go foward"}}
}'
'></smart>
Смарт-компонент checkboxes
Для изменения размера компонента используйте property = {"size":"small"}
Шаблон default
<smart name="checkboxes" sf-code="checkboxes" template="default" data='{"header":"Test header", "label": "Test label"}' '></smart><smart name="checkboxes" sf-code="checkboxes" template="default" data='{"header":"Test header", "label": "Test label"}' events="{'click':{'test': {'action': 'onClick'} } }" property ='{"size": "small"}' '></smart>
Шаблон radio
<smart
name="checkboxes"
sf-code="checkboxes"
template="default"
data='{"header":"Test header", "label": "Test label"}'
'></smart>
Шаблон switch
<smart
name="checkboxes"
sf-code="checkboxes"
template="default"
data='{"header":"Test header", "label": "Test label"}'
'></smart>
Смарт-компонент carousel
Для инциализации компонента используйте параметр events='{"ready": {"0":{"test_c":{"action":"onLoad"}}}}', где "test_c" - это id вашей карусели.
Картинки передаются в виде массива ссылок в параметре data - к примеру, data = '{"images":["https://example.com/image1.png", "https://example.com/image2.png", "https://example.com/image3.png"]}'
Шаблон default
<smart
name="carousel"
sf-code="carousel"
id = "test_c"
template="default"
data='{"images":["https://media.istockphoto.com/id/1419410282/nl/foto/silent-forest-in-spring-with-beautiful-bright-sun-rays.jpg?s=1024x1024&w=is&k=20&c=NwEr5JJbyB8_ObMF2ffou-qp4bZ1EkT19Hqqg1T32ZY=", "https://previews.123rf.com/images/nikahgeh/nikahgeh2307/nikahgeh230701516/208178235-a-mountain-forest-with-high-trees-myst-and-fog-grim-background-ai-generated.jpg" ]} '
events='{"ready": {"0":{"test_c":{"action":"onLoad"}}}}'
'></smart>
Смарт-компонент slider
Для инциализации компонента используйте параметр events='{"ready": {"0":{"test_s":{"action":"initiate"}}}}', где "test_c" - это id вашего слайдера.
В параметре data передаются данные о максимальном и минимальном значении слайдера, а так же возможные текущие значения - к примеру, data = '{"min": 0, "max": 100, "slider_first_value": 10, "slider_second_value": 50 }'
Шаблон default
<smart
<smart
name="slider"
sf-code="slider"
id = "test_s"
template="default"
data = '{"min": 0, "max": 100, "first_value": 10, "second_value": 50 }'
events='{"ready": {"0":{"test_s":{"action":"initiate"}}}}'
>
</smart>
Смарт-компонент contentDivider
В параметре data передаются данные о максимальном и минимальном значении слайдера, а так же возможные текущие значения - к примеру, data = '{"min": 0, "max": 100, "slider_first_value": 10, "slider_second_value": 50 }'
Шаблон default
<smart
name="contentDivider"
sf-code="contentDivider"
data='{"message": "Notice"}'
>
</smart>
<smart
name="contentDivider"
sf-code="contentDivider"
property='{"size": "small"}'
data='{"message": "Notice"}'
>
</smart>
<smart
name="contentDivider"
sf-code="contentDivider"
property='{"border": "true"}'
data='{"message": "Notice"}'
>
</smart>
Шаблон buttons
<smart
name="contentDivider"
sf-code="contentDivider"
template="buttons"
property='{"number": "one"}'
data='{"type":"icon", "value": "settings" }'
>
</smart>
<smart
name="contentDivider"
sf-code="contentDivider"
template="buttons"
property='{"number": "three"}'
data='{"button_left": {"type":"icon", "value": "settings"}, "button": {"type":"icon", "value": "settings"}, "button_right": {"type":"icon", "value": "settings"} }'
>
</smart>