Exemple
linotype/Field

Text.yml

This is a config yaml exemple for a basic field text
YAML
Help
field:
version: 1.0
package: ynk
name: Text
desc: Text field
option:
placeholder: ...
format:
type: long_text
field:
version: 1.0 #the field version
package: ynk #the field package
name: Text #display block name
desc: Text field #display block description
option: #create option for field
placeholder: ... #option exemple
format: #format value before save
type: long_text #database type

Text.twig

This is a twig exemple, but you can use php version ( or html with js wrapper )
TWIG
PHP
HTML
<div id="{{field.id}}" class="{{field.class}}">
<input placeholder="{{option.placeholder}}" value="{{field.value}}"/>
</div>
soon
soon

Text.scss

This is a scss exemple, but you are free to use simple css
SCSS
CSS
.Text {
input {
background:#DDD;
color:#333;
}
}
.Text input {
background:#DDD;
color:#333;
}

Text.js

This is a stimulus.js exemple, but you are free to use vanilla.js
Stimulus
Vanilla
jQuery
React
import { Controller } from "stimulus"
export default class extends Controller {
connect() {
console.log("Text field loaded", this.element)
}
}
(function (linotype) {
var blocks = document.getElementsByClassName("Text");
for ( var i = 0; i < blocks.length; i++ ) {
blocks[i].onclick = function() {
console.log('Text: click');
}
}
})(linotype)
(($) => {
$(function() {
const id = 'Text';
const el = $(id);
if ( el.length ) el.each(init);
function init( item, index )
{
console.log( id, index, item );
}
})
})(jQuery)
TODO
Copy link
On this page
Text.yml
Text.twig
Text.scss
Text.js