Lo primero de todo es poner components['nombre del elemento'] = { construcción del elemento}
Dentro de los corchetes se pondrán las diferentes partes que tiene el corchete, importante ponerlo en el mismo orden para tenerlo todo ordenado y que todos los elementos sean iguales. Cada
apartado irá separado por comas.
Este apartado es donde se define el name que ira en la tarjeta, que tendrá el elemento y que verá el usuario. Si el nombre del elemento se escribe igual en ingles que en español se pone todo en una línea name (nombre elemento), si no como en el ejemplo:
Esta es la descripción del elemento que se verá en la tarjeta, ha de ser corta y concisa. Tienes la misma opción que en el nombre, si es igual en castellano e ingles en una línea, sino como en el ejemplo:
Este es el icono que se verá en la tarjeta, es de fontawesome solo se ha de poner la parte de fad y el nombre del icono, si puede ser que sean todos fad, para seguir con el estilo.
Aquí es donde se indica a que grupo de tarjetas está destinado el elemento.
Esta parte es bastante importante, ya que estas son las palabras que utiliza el buscador para encontrar los elementos, ha de ser lo más completo posible, pero que tengan relación siempre. Todas han de estar en minúsculas.
Esta es la parte de html del elemento, en este apartado solo se ha de poner el html.
Opcional:
En el caso de que el elemento necesite un script muy específico, como las
gráficas o en este caso el elemento popover de bootstrap que sin esta línea de
JavaScript no funciona, entonces se añade este apartado. Los parámetros son
optativos y se pueden poner todos los que se necesiten.
scrip(document, kaneOptions, KaneID) {
new bootstrap. Popover(document.getElementById(KaneID));
},
Opcional:
En caso de que se necesite de un archivo JSON externo como por ejemplo en el
caso de las tablas solamente se ha de poner JSON con el link necesario.
JSON: `/imgfiles/dev-table2.json´,
Menú contenido y estilos
Estos dos apartados son el menú de contenido y estilo todo lo que se ponga dentro de las llaves es lo que saldrá en el menú, la estructura es la misma solo has de decidir que input ira en cada lado y que configuración le darás a este.
Creacion de inputs (dentro del elemento) Type:
Type: Es el tipo de input
Label: El título que esta encima del input para saber que se va a editar.
getValue: En este caso lo que te devuelve es el valor que vas a editar. Como parámetro se pasa el componente, dentro de los corchetes se puede poner cualquier código para conseguir que te retorne el valor que necesitas, como por ejemplo que:
onChange: En este apartado se pone el código que se necesita para conseguir que en el getvalue te de el valor correcto. En este caso se pasan como parámetros al componente y el valor. Un ejemplo de como sería el onChange es en este caso que accedemos al texto del componente para editarlo o en el caso del dropdown de bootstrap, se vaciaría lo que contiene el ul para crear un nuevo li con el texto nuevo en su interior.
Tipos de inputs (dentro del elemento)
Ahora mismo solo se pueden utilizar los siguientes inputs, (escritos de la siguiente manera):
*text, range, textarea, color, number, number-width, number-height, button, border, select, border-radius, border-style, border-color, border-width, segmented, radio, checkbox, table, array, dictionary, box shadow, switch.
- Ahora el input text por ejemplo se puede utilizar para lo que quieras por ejemplo cambiar url, el texto como en la imagen, cambiar clases, etc. igual que el de number puede servir para lo que quieras, pero solo aceptara números.
Hay algunos inputs, que tienen un apartado de options, para poder personalizarlos y adaptarlos más, en todos los inputs que tengan el apartado options este va justo después del label, como los siguientes:
Checkbox y radio buttons: Su apartado de options funciona igual, y sirve para poner cuantos checkboxs o buttonradio quieres poner que sean del mismo grupo, en el options se pone el
nombre y valor de cada uno. También tiene la opcion de checked que si esta en true es que ese checkbox o radiobutton estara seleccionado, si no se pone saldran deseleccionados.
Range: Sus options son min y max para definir el valor mínimo y máximo del range.
Y la parte de options.input es para definir los valores de la parte donde se ve el número, si el limit se establece en true no podrás pasar del valor que hayas definido en max, pero si se pone en false como está en la imagen el valor máximo solo se aplicara al range, pero en la parte donde se ve el número sí que podrás pasarte del valor máximo.
Select: En el caso del select las options son las opciones que queremos que salgan en el input.
