Inventario componenti – staticgen_framework

Tutti i componenti da COMPONENTI_DJANGO.md con descrizione e sintassi Django. → Component showcase

Regole tipografiche

Scelte tipografiche (font, colori, grassetti…)

Font base:: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif
Proxima Nova Light:: menu, bottoni, titoli leggeri (fallback: base)
Proxima Nova Regular:: testo corpo, tooltip, elementi enfatizzati (fallback: base)
Dimensioni:: 12px, 13px, 14px (base), 18px, 20px, 22px, 24px
Colori principali:: ■ grigio extra scuro #4b4b4b (testo) · ■ menu gray #4F5D72 · ■ arancio #F5A000 (CTA, attivo) · ■ arancio scuro #E58D00 (hover)
Semantici:: ■ rosso #c1282e (errore, elimina) · ■ verde #7AB55C (successo, menu) · ■ menu bg #333A3F · ■ menu scuro #1D2328
Grigi:: #FAFBFC · #EBEEF0 · #D3DBE2 · #868686 · #666666 · #333333 · #262626
Peso:: font-weight: normal (Light/Regular). Nessun bold di default nelle UI standard.

Heading e dimensioni

Heading 1 (2.125rem)

h1 · font-size: 2.125rem

Heading 2 / .page-title (1.6875rem)

h2, #title-bar .page-title · font-size: 1.6875rem

Heading 3 (1.375rem)

h3 · font-size: 1.375rem

Heading 4 (1.125rem)

h4 · font-size: 1.125rem

Heading 5 (1.125rem)

h5 · font-size: 1.125rem

Heading 6 (1rem)

h6 · font-size: 1rem

Subheader – line-height 1.4, colore #6f6f6f

Body e inline

Paragrafo corpo: testo standard con line-height ereditato. Corsivo em, grassetto strong, testo small (60%).

code – Consolas, bold, colore #bd260d

Blockquote: citazione con bordo sinistro.

Dimensioni font

12px · testo piccolo

13px

14px · base

18px

20px

22px

24px

Swatch colori

#4b4b4b #4F5D72 #F5A000 #E58D00 #c1282e #7AB55C #333A3F #1D2328

#FAFBFC · #EBEEF0 · #D3DBE2 · #868686 · #666666 · #333333 · #262626

1. Componenti JavaScript

ta.base.js

createCookie, readCookie, eraseCookie, params_get, executeFunctionByName, namespace, capitalize, Date.between_dates

Caricato da: layout, prima di ta-responsive

Nessuna anteprima (file JS)

framework.js

Namespace ta, ta.framework (bootstrap minimo)

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.validation-regexp.js

ValidationRegExp.URI (regex validazione URL)

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.image.js

image_preview(file_id, image_id) – anteprima immagine da input file

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.overlay.js

show_loading_overlay, remove_loading_overlay, progressbar

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.autocomplete.js

init_autocomplete, eventi ta:select, ta:itemremoved

Caricato da: ta_framework_assets, ta_autocomplete_assets

Nessuna anteprima (file JS)

ta.checkbox.js

set_onoff, set_star, checkbox on/off e star

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.table.js

searchTable, Table.loading_row, Table.update_row, Table.init_sorting

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.dialog.js

fluidDialog, taConfirm, a[data-action=open-dialog]

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.link.js

data-disable-with, ta-remove-fields, toggle

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.clipboard.js

Copy-to-clipboard su .ta-copy-link

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.form.js

Form search-table, data-overlay, data-submit=false

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.tooltip.js

Tooltip su [data-tooltip=true]

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.dropdown.js

Dropdown a[data-action=drop-down]

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.contenteditable.js

Binding change su [contenteditable]

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.i18n.js

window.t() per traduzioni

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.timezone.js

BrowserTZone.setCookie

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.breadcrumb.js

set_breadcrumb_progress_current_step, set_ta_progress_bar_*

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.modal.js

Modal (equivalente buildModal di ta.dialog)

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.dropzone.js

Upload con Dropzone.js

Caricato da: ta_framework_assets

Nessuna anteprima (file JS)

ta.multiselect.js

init_multiselect su select[data-fancy]

Caricato da: ta_multiselect_assets

Nessuna anteprima (file JS)

ta.lightbox.js

Lightbox con GLightbox

Caricato da: ta_lightbox_assets

Nessuna anteprima (file JS)

ta.chunked.js

Upload chunked con Resumable.js

Caricato da: ta_chunked_upload_assets

Nessuna anteprima (file JS)

ta.datepicker.js

date_time_control, setDefaults, handler .datepicker-icon

Caricato da: ta_datepicker_assets

Nessuna anteprima (file JS)

ta.chartutils.js

Chart.make_chart_from_ajax_call, Chart.make_chart_from_table, show_marker, manage_hidden_series, get_step

Caricato da: ta_chartutils_assets

Nessuna anteprima (file JS)

ta.videotrack.js

VideoTracking.track_event (Django.videoTrackUrl)

Caricato da: ta_videotrack_assets

Nessuna anteprima (file JS)

ta.content-search-form.js

Form ricerca contenuti

Caricato da: component_showcase

Nessuna anteprima (file JS)

ta-responsive.js

setDatepicker, formatDate, stringToDate, init_daterangepicker, post_paginations, init_select_all_table_rows

Caricato da: layouts

Nessuna anteprima (file JS)

jquery.ui.datepicker-locales.js

Regional it, en per datepicker e timepicker

Caricato da: ta_datepicker_assets

Nessuna anteprima (file JS)

jquery.multiselect.js

Plugin jQuery UI Multiselect

Caricato da: ta_multiselect_assets

Nessuna anteprima (file JS)

jquery.multiselect.filter.js

Filtro per multiselect

Caricato da: ta_multiselect_assets

Nessuna anteprima (file JS)

jquery.multiselect.ta-filter.js

tamultiselectfilter (plugin TA)

Caricato da: ta_multiselect_assets

Nessuna anteprima (file JS)

2. Template tags

ta_header

Header pagina backend · Template: _header.html

{% ta_header %}

ta_sidebar

Menu laterale · Template: _sidebar_menu.html

{% ta_sidebar %}

ta_title_bar

Titolo pagina e azioni · Template: _title_bar.html

{% ta_title_bar title right_items=... %}

Titolo pagina

Nuovo Esporta

ta_search_box

Box filtri/ricerca · Template: _search_box.html

{% ta_search_box filters=filters %}

ta_table

Tabella dati · Template: _table.html

{% ta_table columns=columns rows=rows %} oppure table=table

Nome	Valore
Riga 1	Val A
Riga 2	Val B

ta_button

Pulsante · Template: _button.html

{% ta_button label="Salva" type="submit" %}

ta_action_button

Link come pulsante azione · Template: _link.html

{% ta_action_button label="Nuovo" url="/nuovo/" %}

Nuovo

ta_link

Link · Template: _link.html

{% ta_link url="/" label="Indietro" %}

Indietro

ta_breadcrumb

Breadcrumb navigazione · Template: _breadcrumb.html

{% ta_breadcrumb items=breadcrumb_items %}

ta_pagination

Paginazione · Template: _pagination.html

{% ta_pagination page %}

ta_wizard_steps

Step wizard · Template: _wizard_steps.html

{% ta_wizard_steps steps=wizard_steps current_step=1 %}

ta_flash

Messaggi flash · Template: _flash.html

{% ta_flash %}

ta_multiselect

Select multiplo con ricerca · Template: _multiselect.html

{% ta_multiselect field=field %} (richiede ta_multiselect_assets)

ta_chart_div

Div per grafici Highcharts · Template: _chart_div.html

{% ta_chart_div chart_id="..." options=chart_options %}

Nessuna anteprima (richiede endpoint o init)

ta_modal

Modal · Template: _modal.html

{% ta_modal id="..." title="..." %}...{% endta_modal %}

ta_autocomplete_input

Input autocomplete (fonte locale) · Template: _autocomplete_input.html

{% ta_autocomplete_input field_id="..." source=[...] %}

Nessuna anteprima (richiede endpoint o init)

ta_remote_autocomplete_input

Input autocomplete (fonte remota) · Template: _autocomplete_input.html

{% ta_remote_autocomplete_input service="/api/search" %}

Nessuna anteprima (richiede endpoint o init)

ta_chunked_upload

Area upload chunked · Template: _chunked_upload.html

{% ta_chunked_upload url="/upload/" %} (richiede ta_chunked_upload_assets)

Nessuna anteprima (richiede endpoint o init)

ta_upload_input

Area upload Dropzone · Template: _upload_input.html

{% ta_upload_input url="/upload/" %} (richiede ta_upload_assets)

Nessuna anteprima (richiede endpoint o init)

ta_fullcalendar

Calendario FullCalendar · Template: _fullcalendar.html

{% ta_fullcalendar events=events %} (richiede ta_fullcalendar_assets)

Nessuna anteprima (richiede endpoint o init)

ta_form_field

Campo form con data-parsley-*

{% ta_form_field field %}

Nessuna anteprima (richiede endpoint o init)

ta_field_detail

Stato campo (errore, required)

{% ta_field_detail field %}

Nessuna anteprima (richiede endpoint o init)

ta_date_input

Input data · Template: _date_input.html

{% ta_date_input name="date" value=date_value %}

ta_datetime_input

Input data e ora · Template: _date_input.html

{% ta_datetime_input name="datetime" value=dt_value %}

ta_django_env

window.Django (env, rootUrl, csrf, i18n, timezone, videoTrackUrl opzionale) · Template: ta_django_env.html

{% ta_django_env %}

Nessuna anteprima (richiede endpoint o init)

select_all_table_rows

Checkbox seleziona tutte le righe tabella

{% select_all_table_rows table_id='ta-table' %}

Nessuna anteprima (richiede endpoint o init)

3. Asset tags

theme_css

Link theme.css

{% theme_css %}

Nessuna anteprima (tag asset)

ta_multiselect_assets

CSS/JS multiselect

{% ta_multiselect_assets %}

Nessuna anteprima (tag asset)

ta_lightbox_assets

CSS/JS GLightbox + ta.lightbox

{% ta_lightbox_assets %}

Nessuna anteprima (tag asset)

ta_chunked_upload_assets

Resumable.js + ta.chunked

{% ta_chunked_upload_assets %}

Nessuna anteprima (tag asset)

ta_upload_assets

Dropzone CSS/JS

{% ta_upload_assets %}

Nessuna anteprima (tag asset)

ta_upload_init_script

ta.dropzone.js

{% ta_upload_init_script %}

Nessuna anteprima (tag asset)

ta_fullcalendar_assets

FullCalendar CDN

{% ta_fullcalendar_assets %}

Nessuna anteprima (tag asset)

ta_tinymce_include

django-tinymce media

{% ta_tinymce_include %}

Nessuna anteprima (tag asset)

ta_autocomplete_assets

ta.autocomplete.js

{% ta_autocomplete_assets %}

Nessuna anteprima (tag asset)

ta_ionicons

Ionicons CDN

{% ta_ionicons %}

Nessuna anteprima (tag asset)

ta_framework_assets

Bundle completo framework JS

{% ta_framework_assets %}

Nessuna anteprima (tag asset)

ta_modal_assets

modal.css + ta.modal.js

{% ta_modal_assets %}

Nessuna anteprima (tag asset)

ta_datepicker_assets

jQuery UI datepicker + timepicker addon + ta.datepicker

{% ta_datepicker_assets %}

Nessuna anteprima (tag asset)

ta_chartutils_assets

ta.chartutils.js (Chart.*)

{% ta_chartutils_assets %}

Nessuna anteprima (tag asset)

ta_videotrack_assets

ta.videotrack.js (VideoTracking.track_event)

{% ta_videotrack_assets %}

Nessuna anteprima (tag asset)

4. Partials

_typography_palette.html

Palette tipografia

{% include '.../_typography_palette.html' %}

Include partial

_typography_rules_full.html

Regole tipografia complete

{% include '.../_typography_rules_full.html' %}

Include partial

_content_search_form_rails_minimo.html

Form ricerca (chiuso)

{% include '.../_content_search_form_rails_minimo.html' %}

Include partial

_content_search_form_rails_open.html

Form ricerca (aperto)

{% include '.../_content_search_form_rails_open.html' %}

Include partial

_form.html

Form base

{% include '.../_form.html' %}

Include partial

_form_field_with_validation.html

Campo con validazione Parsley

{% include '.../_form_field_with_validation.html' %}

Include partial

form_validation.html

Include validazione form (Parsley)

{% include '.../form_validation.html' %}

Include partial

_footer.html

Footer layout

{% include '.../_footer.html' %}

Include partial

_sidebar_menu_item.html

Voce menu sidebar #sidebar-menu

{% include '.../_sidebar_menu_item.html' with text=... link=... icon_class=... %}

Include partial