cron expression input
v1.2.7
UI da expressão de CRON : componente de entrada para gerar expressões de cron com facilidade e intuição, como em https://crontab.guru/
Instale o pacote de https://www.npmjs.com/cron-expression-input
npm install [email protected]
No seu código
import "cron-expression-input/lib/cron-expression-input.min.css" ; /* CSS */
require ( "cron-expression-input" ) ; /* JAVASCRIPT */Adicione o CDN ao seu projeto
< link rel =" stylesheet " href =" https://unpkg.com/[email protected]/lib/cron-expression-input.min.css " >
< script src =" https://unpkg.com/[email protected]/lib/cron-expression-input.min.js " > </ script > <!DOCTYPE html >
< html >
< head >
< meta charset =" UTF-8 " >
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " >
< title > Sample Page </ title >
< link rel =" stylesheet " href =" https://unpkg.com/[email protected]/lib/cron-expression-input.min.css " >
< script src =" https://unpkg.com/[email protected]/lib/cron-expression-input.min.js " > </ script >
</ head >
< body >
<!-- Component -->
< cron-expression-input color =" d58512 " > </ cron-expression-input >
<!-- Component -->
< script src =" cron-expression-input.js " > </ script >
</ body >
</ html > import "cron-expression-input/lib/cron-expression-input.min.css" ; /* CSS */
require ( "cron-expression-input" ) ; /* JAVASCRIPT */
class App extends React . Component {
constructor ( props ) {
super ( props ) ;
this . state = { cron : "* * * * *" } ;
}
render ( ) {
return (
< div >
< cron-expression-input
value = { this . state . cron }
onInput = { ( e ) => this . setState ( { cron : e . nativeEvent . detail . value } ) }
color = "d58512" />
</ div >
) ;
}
}
export default App ; < template >
< div id = "app" >
< cron-expression-input
: value = " cron "
v-on : input = "cron = $event.detail.value"
color = "d58512" />
</ div >
</ template >
< script >
import "cron-expression-input/lib/cron-expression-input.min.css" ; /* CSS */
require ( "cron-expression-input" ) ; /* JAVASCRIPT */
export default {
name : 'App' ,
data ( ) {
return {
cron : "* * * * *"
}
}
}
< / script>Você pode passar vários atributos para o componente para modificar seu comportamento, exemplo com atributo de cor:
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
width | {String} | 100% | A largura da entrada do componente |
height | {String} | 34px | A altura da entrada do componente |
color | {String} | #d58512 | A cor principal que os elementos do componente levarão (apenas em hexadecimal) |
