Il tema grafico Vela

Descrizione

È stato creato il nuovo tema grafico Vela per le applicazioni web realizzate con Instant Developer.
Il tema Vela è selezionabile solamente se il motore grafico Fluid è attivo.

Clicca qui per vedere il nuovo tema grafico in azione.

Il tema grafico Vela ha un suo set di icone che sono utilizzabili nelle appplicazioni web che utilizzano questo tema grafico. L'elenco delle icone è disponibile in fondo a questo articolo.

Per utilizzare le icone di Vela occorre modificare il titolo (caption) dell'oggetto che deve visualizzare l'icona inserendo il testo in questo modo {{icon-vela-nomeIcona}} dove nomeIcona identifica l'icona che volete utilizzare.

Il tema grafico Vela utilizza il font Inter che non è installato di default su Windows e quindi, all'interno dell'ide, si è scelto di impostarlo come Arial nei visual style dei progetti. Il font corretto viene visualizzato solamente a runtime.
Quindi con il tema grafico Vela se si vuole utilizzare il font Arial occorre impostarlo da CSS nel file customf.css della directory custom dell'applicazione.

Note

• È possibile attivare il nuovo tema anche su applicazioni web già esistenti che utilizzano il motore grafico Fluid.
• Per attivare il nuovo tema in una applicazione già esistente è sufficiente aprire il menu contestuale su una applicazione web, attivare il comando "Configura parametri" e aprire la pagina "Generale".
• Il nuovo tema è impostato per default nei nuovi progetti e nelle nuove applicazioni create in progetti esistenti.
  NON viene automaticamente attivato nei progetti esistenti, nemmeno dopo aver aggiornato le librerie alla versione 24.5. Nei progetti esistenti, infatti, è necessario attivarlo manualmente modificando il valore del parametro di compilazione.

Le icone di Vela

Ecco l'elenco delle icone del tema Vela che è possibile utilizzare nelle applicazioni web.

• wallet-02

• line-chart-down-02

• align-bottom-02

• zoom-out

• zoom-in

• youtube

• wind-03

• wind-02

• wind-01

• wifi

• wifi-off

• webcam-02

• webcam-01

• waves

• watch-square

• watch-circle

• wallet-05

• wallet-04

• wallet-03

• lightbulb-01

• wallet-01

• volume-x

• volume-plus

• volume-minus

• volume-min

• volume-max

• voicemail

• video-recorder

• video-recorder-off

• variable

• users-x

• users-up

• users-right

• users-plus

• users-minus

• users-left

• users-edit

• users-down

• users-check

• users-03

• users-02

• users-01

• user-x-02

• user-x-01

• user-up-02

• user-up-01

• user-square

• user-right-02

• user-right-01

• user-plus-02

• user-plus-01

• user-minus-02

• user-minus-01

• user-left-02

• user-left-01

• user-edit

• user-down-02

• user-down-01

• user-circle

• user-check-02

• user-check-01

• user-03

• user-02

• user-01

• usb-flash-drive

• underline-square

• underline-02

• underline-01

• umbrella-03

• umbrella-02

• umbrella-01

• type-strikethrough-02

• type-strikethrough-01

• type-square

• type-02

• type-01

• tv-03

• tv-02

• tv-01

• truck-02

• truck-01

• trophy-02

• trophy-01

• triangle

• trend-up-02

• trend-up-01

• trend-down-02

• trend-down-01

• transform

• tram

• train

• ticket-02

• ticket-01

• thumbs-up

• thumbs-down

• thermometer-warm

• thermometer-cold

• thermometer-03

• thermometer-02

• thermometer-01

• text-input

• terminal

• terminal-square

• terminal-circle

• terminal-browser

• telescope

• tag-03

• tag-02

• tag-01

• tablet-02

• tablet-01

• table

• switch-vertical-02

• switch-vertical-01

• switch-horizontal-02

• switch-horizontal-01

• sunset

• sunrise

• sun

• sun-setting-03

• sun-setting-02

• sun-setting-01

• subscript

• strikethrough-square

• strikethrough-02

• strikethrough-01

• stop

• stop-square

• stop-circle

• sticker-square

• sticker-circle

• stars-03

• stars-02

• stars-01

• star-07

• star-06

• star-05

• star-04

• star-03

• star-02

• star-01

• stand

• square

• speaker-03

• speaker-02

• speaker-01

• spacing-width-02

• spacing-width-01

• spacing-height-02

• spacing-height-01

• snowflake-02

• snowflake-01

• sliders-04

• sliders-03

• sliders-02

• sliders-01

• skip-forward

• skip-back

• skew

• simcard

• signal-03

• signal-02

• signal-01

• shuffle-02

• shuffle-01

• shopping-cart-03

• shopping-cart-02

• shopping-cart-01

• shopping-bag-03

• shopping-bag-02

• shopping-bag-01

• shield-zap

• shield-tick

• shield-plus

• shield-off

• shield-dollar

• shield-03

• shield-02

• shield-01

• server-06

• server-05

• server-04

• server-03

• server-02

• server-01

• send-03

• send-02

• send-01

• scissors-cut-02

• scissors-01

• scissors-cut-01

• scissors-02

• scan

• scales-02

• scales-01

• scale-03

• scale-02

• scale-01

• sale-04

• sale-03

• sale-02

• sale-01

• safe

• ruler

• rss-02

• rss-01

• rows-03

• rows-02

• rows-01

• route

• roller-brush

• rocket-01

• rocket-02

• right-indent-02

• right-indent-01

• reverse-right

• reverse-left

• repeat-04

• repeat-03

• repeat-02

• repeat-01

• refresh-cw-05

• refresh-cw-04

• refresh-cw-03

• refresh-cw-02

• refresh-cw-01

• refresh-ccw-05

• refresh-ccw-04

• refresh-ccw-03

• refresh-ccw-02

• refresh-ccw-01

• reflect-02

• reflect-01

• recording-03

• recording-01

• recording-02

• receipt

• receipt-check

• qr-code-02

• qr-code-01

• puzzle-piece-02

• puzzle-piece-01

• printer

• presentation-chart-03

• presentation-chart-02

• power-02

• presentation-chart-01

• power-03

• power-01

• podcast

• play

• play-square

• play-circle

• plane

• pilcrow-square

• pilcrow-02

• pilcrow-01

• piggy-bank-02

• piggy-bank-01

• pie-chart-04

• pie-chart-03

• pie-chart-02

• pie-chart-01

• phone

• phone-x

• phone-plus

• phone-pause

• phone-outgoing-02

• phone-incoming-02

• phone-outgoing-01

• phone-incoming-01

• phone-hang-up

• phone-call-02

• phone-call-01

• phone-02

• phone-01

• perspective-02

• perspective-01

• pentagon

• pencil-line

• pencil-02

• pencil-01

• pen-tool-plus

• pen-tool-minus

• pen-tool-02

• pen-tool-01

• pause-square

• pause-circle

• passport

• passcode-lock

• passcode

• paragraph-wrap

• paragraph-spacing

• paperclip

• palette

• paint

• paint-pour

• package

• package-x

• package-search

• package-minus

• package-plus

• package-check

• octagon

• notification-text

• notification-message

• notification-box

• navigation-pointer-off-02

• navigation-pointer-off-01

• navigation-pointer-02

• navigation-pointer-01

• music-note-plus

• music-note-02

• music-note-01

• move

• mouse

• moon-star

• moon-eclipse

• moon-01

• moon-02

• monitor-05

• monitor-04

• monitor-03

• monitor-01

• monitor-02

• modem-02

• modem-01

• minimize-02

• minimize-01

• microscope

• microphone-off-02

• microphone-off-01

• microphone-02

• microphone-01

• message-x-square

• message-x-circle

• message-text-square-02

• message-text-square-01

• message-text-circle-02

• message-text-circle-01

• message-square-02

• message-square-01

• message-smile-square

• message-smile-circle

• message-question-square

• message-question-circle

• message-plus-square

• message-plus-circle

• message-notification-square

• message-notification-circle

• message-heart-square

• message-heart-circle

• message-dots-square

• message-dots-circle

• message-circle-02

• message-circle-01

• message-check-square

• message-check-circle

• message-chat-square

• message-chat-circle

• message-alert-square

• message-alert-circle

• maximize-02

• maximize-01

• marker-pin-06

• marker-pin-05

• marker-pin-04

• marker-pin-03

• mark

• marker-pin-02

• marker-pin-01

• map-02

• map-01

• mail-05

• mail-04

• mail-03

• mail-02

• mail-01

• magic-wand-01

• magic-wand-02

• luggage-03

• luggage-02

• luggage-01

• lock-unlocked-04

• lock-unlocked-03

• lock-unlocked-02

• lock-unlocked-01

• lock-keyhole-square

• lock-keyhole-circle

• lock-04

• lock-03

• lock-02

• lock-01

• list

• line-height

• line-chart-up-05

• line-chart-up-04

• line-chart-up-03

• line-chart-up-02

• line-chart-up-01

• line-chart-down-05

• line-chart-down-03

• line-chart-down-04

• line-chart-down-01

• letter-spacing-02

• lightning-02

• lightning-01

• lightbulb-05

• lightbulb-04

• lightbulb-03

• lightbulb-02

• brackets

• cloud-sun-01

• letter-spacing-01

• left-indent-02

• left-indent-01

• layout-top

• layout-right

• layout-left

• layout-grid-02

• layout-grid-01

• layout-bottom

• layout-alt-04

• layout-alt-03

• layout-alt-02

• layout-alt-01

• layers-two-02

• layers-two-01

• layers-three-02

• layers-three-01

• layer-single

• laptop-02

• laptop-01

• keyboard-02

• keyboard-01

• key-02

• key-01

• italic-square

• italic-02

• italic-01

• intersect-square

• intersect-circle

• infinity

• inbox-02

• inbox-01

• image-x

• image-user

• image-user-x

• image-user-up

• image-user-right

• image-user-plus

• image-user-left

• image-user-down

• image-user-check

• image-right

• image-up

• image-indent-right

• image-plus

• image-left

• image-down

• image-indent-left

• image-check

• image-05

• image-04

• image-03

• image-02

• image-01

• hurricane-03

• hurricane-02

• hurricane-01

• hourglass-03

• hourglass-02

• hourglass-01

• horizontal-bar-chart-03

• horizontal-bar-chart-02

• horizontal-bar-chart-01

• hexagon-02

• hexagon-01

• headphones-02

• headphones-01

• heading-square

• heading-02

• heading-01

• hard-drive

• hand

• grid-dots-vertical-center

• grid-dots-top

• grid-dots-right

• grid-dots-outer

• grid-dots-left

• grid-dots-horizontal-center

• grid-dots-bottom

• grid-dots-blank

• grid-03

• grid-02

• grid-01

• graduation-hat-02

• graduation-hat-01

• globe-slated-02

• globe-slated-01

• globe-06

• globe-05

• globe-04

• globe-03

• globe-02

• globe-01

• glasses-02

• glasses-01

• git-pull-request

• git-merge

• git-commit

• git-branch-02

• git-branch-01

• gift-02

• gift-01

• gaming-pad-02

• gaming-pad-01

• framer

• folder

• folder-x

• folder-shield

• folder-search

• folder-question

• folder-plus

• folder-minus

• folder-lock

• folder-download

• folder-code

• folder-closed

• folder-check

• flip-forward

• flip-backward

• flex-align-top

• flex-align-right

• flex-align-left

• flex-align-bottom

• flash

• flash-off

• flag-06

• flag-05

• flag-04

• flag-03

• flag-02

• flag-01

• fingerprint-04

• fingerprint-03

• fingerprint-02

• fingerprint-01

• film-03

• film-02

• film-01

• file-x-03

• file-x-02

• file-x-01

• file-shield-03

• file-shield-02

• file-shield-01

• file-search-03

• file-search-02

• file-search-01

• file-question-03

• file-question-02

• file-question-01

• file-plus-03

• file-plus-02

• file-plus-01

• file-minus-03

• file-minus-02

• file-minus-01

• file-lock-03

• file-lock-02

• file-lock-01

• file-heart-03

• file-heart-02

• file-heart-01

• file-download-03

• file-download-02

• file-download-01

• file-code-02

• file-code-01

• file-check-03

• file-check-02

• file-check-01

• file-attachment-05

• file-attachment-04

• file-attachment-03

• file-attachment-02

• file-attachment-01

• file-07

• file-06

• file-05

• file-04

• file-03

• file-02

• file-01

• figma

• feather

• fast-forward

• fast-backward

• face-wink

• face-smile

• face-sad

• face-neutral

• face-id

• face-id-square

• face-happy

• face-frown

• face-content

• expand-06

• expand-05

• expand-04

• expand-03

• expand-02

• expand-01

• eraser

• dropper

• droplets-03

• droplets-02

• droplets-01

• drop

• dotpoints-02

• dotpoints-01

• divider

• distribute-spacing-vertical

• distribute-spacing-horizontal

• disc-02

• disc-01

• dice-6

• dice-5

• dice-4

• dice-3

• dice-2

• dice-1

• diamond-02

• diamond-01

• delete

• dataflow-04

• dataflow-03

• dataflow-02

• dataflow-01

• database-03

• database-02

• database-01

• data

• cursor-click-02

• cursor-click-01

• cursor-box

• cursor-04

• cursor-03

• cursor-02

• cursor-01

• currency-yen

• currency-yen-circle

• currency-rupee

• currency-rupee-circle

• currency-ruble

• currency-ruble-circle

• currency-pound

• currency-pound-circle

• currency-euro

• currency-euro-circle

• currency-ethereum

• currency-ethereum-circle

• currency-dollar

• currency-dollar-circle

• currency-bitcoin

• currency-bitcoin-circle

• cube-outline

• cube-04

• cube-03

• cube-02

• cube-01

• cryptocurrency-04

• cryptocurrency-03

• cryptocurrency-02

• cryptocurrency-01

• crop-02

• crop-01

• credit-card-x

• credit-card-upload

• credit-card-up

• credit-card-shield

• credit-card-search

• credit-card-refresh

• credit-card-plus

• credit-card-minus

• credit-card-lock

• credit-card-edit

• credit-card-download

• credit-card-down

• credit-card-check

• credit-card-02

• credit-card-01

• cpu-chip-02

• cpu-chip-01

• corner-up-right

• corner-up-left

• corner-right-up

• corner-right-down

• corner-left-up

• corner-left-down

• corner-down-right

• corner-down-left

• contrast-03

• contrast-02

• contrast-01

• container

• compass

• compass-03

• compass-02

• compass-01

• command

• columns-03

• columns-02

• columns-01

• colors

• colors-1

• coins-swap-02

• coins-swap-01

• coins-stacked-04

• coins-stacked-03

• coins-stacked-02

• coins-stacked-01

• coins-hand

• coins-04

• coins-03

• coins-02

• coins-01

• codepen

• code-square-02

• code-square-01

• code-snippet-02

• code-snippet-01

• code-circle-03

• code-circle-02

• code-circle-01

• code-browser

• code-02

• code-01

• cloud-sun-03

• cloud-sun-02

• clock

• cloud-snowing-02

• cloud-snowing-01

• cloud-raining-06

• cloud-raining-05

• cloud-raining-04

• cloud-raining-03

• cloud-raining-02

• cloud-raining-01

• cloud-off

• cloud-moon

• cloud-lightning

• cloud-03

• cloud-02

• cloud-01

• chevron-selector-vertical

• clock-stopwatch

• clock-snooze

• clock-rewind

• clock-refresh

• clock-plus

• clock-fast-forward

• clock-check

• clipboard

• clipboard-x

• clipboard-plus

• clipboard-minus

• clipboard-download

• clipboard-check

• clipboard-attachment

• clapperboard

• circle

• circle-cut

• chrome-cast

• chevron-up

• chevron-up-double

• airpods

• chevron-selector-horizontal

• chevron-right

• chevron-right-double

• chevron-left

• chevron-left-double

• chevron-down

• chevron-down-double

• chart-breakout-square

• chart-breakout-circle

• certificate-02

• certificate-01

• car-02

• car-01

• camera-plus

• camera-off

• camera-lens

• camera-03

• camera-02

• camera-01

• calendar

• calendar-plus-02

• calendar-plus-01

• calendar-minus-02

• calendar-minus-01

• calendar-heart-02

• calendar-heart-01

• calendar-date

• calendar-check-02

• calendar-check-01

• calculator

• bus

• brush-03

• brush-02

• brush-01

• browser

• briefcase-02

• briefcase-01

• brackets-x

• brackets-slash

• alert-square

• brackets-plus

• brackets-minus

• brackets-ellipses

• brackets-check

• box

• book-open-02

• book-open-01

• book-closed

• bold-square

• bold-02

• bold-01

• bluetooth-signal

• bluetooth-on

• bluetooth-off

• bluetooth-connect

• bezier-curve-03

• bezier-curve-02

• bezier-curve-01

• bell-ringing-04

• bell-ringing-03

• bell-ringing-02

• bell-ringing-01

• bell-plus

• bell-off-03

• bell-off-02

• bell-off-01

• bell-minus

• bell-04

• bell-03

• bell-02

• bell-01

• beaker-02

• beaker-01

• battery-mid

• battery-low

• battery-full

• battery-empty

• battery-charging-02

• battery-charging-01

• bar-line-chart

• bar-chart-square-up

• bar-chart-square-plus

• bar-chart-square-minus

• bar-chart-square-down

• bar-chart-square-03

• bar-chart-square-02

• bar-chart-square-01

• bar-chart-circle-03

• bar-chart-circle-02

• bar-chart-circle-01

• bar-chart-12

• bar-chart-11

• bar-chart-10

• bar-chart-09

• bar-chart-08

• bar-chart-07

• bar-chart-06

• bar-chart-05

• bar-chart-04

• bar-chart-03

• bar-chart-02

• bar-chart-01

• bank

• bank-note-03

• bank-note-02

• bank-note-01

• backpack

• award-05

• award-04

• award-03

• award-02

• award-01

• attachment-02

• attachment-01

• atom-02

• atom-01

• arrows-up

• arrows-triangle

• arrows-right

• arrows-left

• arrows-down

• arrow-up

• arrow-up-right

• arrow-up-left

• arrow-square-up

• arrow-square-up-right

• arrow-square-up-left

• arrow-square-right

• arrow-square-left

• arrow-square-down

• arrow-square-down-right

• arrow-square-down-left

• arrow-right

• arrow-narrow-up

• arrow-narrow-up-right

• arrow-narrow-up-left

• arrow-narrow-right

• arrow-narrow-left

• arrow-narrow-down

• arrow-narrow-down-right

• arrow-narrow-down-left

• arrow-left

• arrow-down

• arrow-down-right

• arrow-down-left

• arrow-circle-up

• arrow-circle-up-right

• arrow-circle-up-left

• arrow-circle-right

• arrow-circle-left

• arrow-circle-down

• arrow-circle-down-right

• arrow-circle-down-left

• arrow-circle-broken-up

• arrow-circle-broken-up-right

• arrow-circle-broken-up-left

• arrow-circle-broken-right

• arrow-circle-broken-left

• arrow-circle-broken-down

• arrow-circle-broken-down-right

• arrow-circle-broken-down-left

• arrow-block-up

• alarm-clock-plus

• alarm-clock-check

• alarm-clock-off

• arrow-block-right

• arrow-block-left

• arrow-block-down

• announcement-03

• announcement-02

• announcement-01

• annotation

• annotation-x

• annotation-question

• annotation-plus

• annotation-info

• annotation-heart

• annotation-dots

• annotation-check

• annotation-alert

• align-vertical-center-02

• align-vertical-center-01

• align-top-02

• align-top-01

• align-right

• align-right-02

• align-right-01

• align-left

• align-left-02

• align-left-01

• align-justify

• align-horizontal-centre-02

• align-horizontal-centre-01

• align-center

• align-bottom-01

• alarm-clock

• alert-triangle

• alarm-clock-minus

• alert-octagon

• alert-hexagon

• alert-circle

• airplay

• archive

• home-02

• asterisk-01

• zap

• zap-square

• zap-off

• zap-fast

• zap-circle

• x

• x-square

• virus

• x-close

• x-circle

• upload-cloud-02

• upload-cloud-01

• upload-04

• upload-03

• upload-02

• upload-01

• trash-04

• trash-03

• trash-02

• trash-01

• translate-01

• translate-02

• tool-02

• tool-01

• toggle-03-right

• toggle-03-left

• toggle-02-right

• toggle-02-left

• toggle-01-right

• toggle-01-left

• target-05

• target-04

• target-03

• target-02

• target-01

• speedometer-04

• speedometer-03

• slash-divider

• speedometer-02

• slash-circle-01

• speedometer-01

• slash-octagon

• slash-circle-02

• share-06

• share-07

• share-05

• share-04

• share-03

• share-02

• share-01

• settings-04

• settings-03

• settings-02

• settings-01

• search-sm

• search-refraction

• search-md

• search-lg

• save-03

• save-02

• save-01

• plus

• plus-square

• plus-circle

• placeholder

• pin-02

• pin-01

• percent-03

• percent-02

• percent-01

• minus

• info-hexagon

• info-square

• info-octagon

• minus-square

• minus-circle

• menu-05

• menu-04

• menu-03

• menu-02

• menu-01

• medical-square

• medical-cross

• medical-circle

• log-out-04

• log-out-03

• log-out-02

• log-out-01

• log-in-04

• log-in-03

• log-in-02

• log-in-01

• loading-03

• loading-02

• loading-01

• link-external-02

• link-external-01

• link-broken-02

• link-broken-01

• link-05

• link-04

• link-03

• link-02

• link-01

• life-buoy-02

• life-buoy-01

• info-circle

• home-smile

• home-line

• home-03

• home-05

• home-04

• home-01

• help-square

• activity-heart

• help-hexagon

• google-chrome

• help-octagon

• filter-funnel-02

• filter-lines

• help-circle

• hearts

• heart

• heart-square

• heart-rounded

• heart-octagon

• heart-hexagon

• heart-hand

• heart-circle

• hash-02

• hash-01

• filter-funnel-01

• eye

• eye-off

• equal

• edit-01

• equal-not

• edit-05

• edit-03

• edit-04

• edit-02

• download-cloud-02

• download-cloud-01

• download-04

• download-02

• download-03

• download-01

• dots-vertical

• dots-horizontal

• dots-grid

• divide-03

• divide-02

• divide-01

• copy-07

• cloud-blank-02

• copy-06

• copy-05

• copy-01

• copy-04

• copy-03

• copy-02

• cloud-blank-01

• check

• check-verified-03

• check-heart

• check-verified-02

• check-square

• check-verified-01

• building-03

• check-square-broken

• check-done-02

• building-02

• check-done-01

• check-circle

• check-circle-broken

• building-08

• building-07

• building-06

• building-05

• building-04

• building-01

• bookmark

• bookmark-x

• bookmark-minus

• bookmark-check

• bookmark-add

• at-sign

• asterisk-02

• activity

• anchor

• debug