Spade
Mini Shell
| Directory:~$ /home/lmsyaran/public_html/templates/g5_hydrogen/custom/particles/ |
| [Home] [System Details] [Kill Me] |
name: JL Offcanvas
description: Create an off-canvas sidebar with your custom content(menu
items, text or social icons)that slides in and out of the page, which is
perfect for creating mobile navigations.
type: particle
icon: fa-list
configuration:
caching:
type: static
form:
overrideable: false
fields:
enabled:
type: input.checkbox
label: Enabled
description: Globally enable to the particles.
default: true
_tabs:
type: container.tabs
fields:
_tab_content:
label: Content
fields:
toggle_item_type:
type: select.select
label: Toggle Item
default: icon
options:
button: Button
icon: Icon
toggle_item_text:
type: input.text
label: Toggle Item Text
placeholder: Menu
buttonclass:
type: select.select
label: Button Style
description: Set the button style.
default: default
options:
default: Button Default
primary: Button Primary
secondary: Button Secondary
danger: Button Danger
text: Button Text
link: Link
link-muted: Link Muted
link-text: Link Text
link_button_size:
type: select.select
label: Button Size
description: Set the button size.
default: default
options:
small: Small
default: Default
large: Large
items:
overrideable: false
type: collection.list
array: true
label: Menu Items
description: Create each item to appear in the menu.
value: name
ajax: true
fields:
.title:
type: input.text
label: Title
description: Customize the menu item title.
placeholder: Item Title
.link:
type: input.text
label: Link
description: Specify the link.
placeholder: http://
.link_target:
type: select.selectize
label: Target
description: Open the link in a same or new window.
placeholder: 'Select...'
default: _self
options:
_self: Self
_blank: New Window
.dropdown:
type: collection.list
array: true
label: Subnav Items
description: Create a list of items with dropdown.
value: name
ajax: true
fields:
.dropdown_title:
type: input.text
label: Title
description: Customize the title.
placeholder: Title
.dropdown_link:
type: input.text
label: Link
description: Specify the link.
placeholder: http://
.dropdown_link_target:
type: select.selectize
label: Target
description: Open the link in a same or new window.
placeholder: 'Select...'
default: _self
options:
_self: Self
_blank: New Window
social_items:
overrideable: false
type: collection.list
array: true
label: Social Items
description: Create each item to appear in the list row.
value: name
ajax: true
fields:
.social_icon:
type: input.icon
label: Social Icon
default: fa fa-facebook
.social_text:
type: input.text
label: Text
.social_link:
type: input.text
label: Link
content:
type: textarea.textarea
label: Content
placeholder: Enter the content
class:
type: input.selectize
label: CSS Classes
description: CSS class name for the particle.
_tab_style:
label: Style
overridable: false
fields:
offcanvas_settings:
type: separator.note
class: alert alert-info
content: 'Offcanvas'
close_button:
type: input.checkbox
label: Close Icon
description: Use this option to create a close button and
enable its functionality.
overridable: false
default: true
overlay:
type: input.checkbox
label: Overlay
description: Use this option to add an overlay, blanking out
the page.
overridable: false
default: false
animation_mode:
type: select.select
label: Animation
description: You can actually choose between different
animation modes for the off-canvas' entrance.
default: slide
options:
slide: Slide
push: Push
reveal: Reveal
none: None
flip_offcanvas:
type: input.checkbox
label: Flip Mode
description: Use this option to adjust its alignment, so that
it slides in from the right.
overridable: false
default: false
show_divider:
type: input.checkbox
label: Divider
description: Use this option to create a divider separating
offcanvas contents.
overridable: false
default: false
content_order:
type: select.select
label: Order
description: Define the order of the offcanvas contents.
default: 1
options:
1: Menu, Content, Social
2: Menu, Social, Content
3: Content, Menu, Social
4: Social, Menu, Content
5: Social, Content, Menu
6: Content, Social, Menu
offcanvas_width:
type: input.number
min: 220
label: Offcanvas Width
description: Customize the width for offcanvas bar, leave
default if not needed.
placeholder: 350
customize_bar_background:
type: input.colorpicker
label: Background Color
description: Customize the background color for offcanvas
bar.
offcanvas_inverse:
type: select.select
label: Inverse Color
description: Set light or dark color mode for nav icon,
buttons and controls.
default: default
options:
default: None
light: Light
dark: Dark
nav_settings:
type: separator.note
class: alert alert-info
content: 'Nav settings'
nav_style:
type: select.select
label: Nav Style
description: Select the nav style.
default: blank
options:
blank: None
default: Default
primary: Primary
multiple_open:
type: input.checkbox
label: Multiple open subnavs
default: false
center_nav:
type: input.checkbox
label: Center Nav
description: Use this option to center nav items.
overridable: false
default: false
customize_nav_color:
type: input.colorpicker
label: Nav Color
description: Customize the nav item color if needed.
color_fallback:
type: input.checkbox
label: Force icon color
description: If you use white background color, check this
option to inverse the style of icon color.
overridable: false
default: false
nav_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
social_settings:
type: separator.note
class: alert alert-info
content: 'Social Settings'
social_bg_color:
type: input.colorpicker
label: Background Color
description: Customize the background color for social
icons.
social_color:
type: input.colorpicker
label: Customize Icon Color
description: Customize the color for social icons.
social_bg_hcolor:
type: input.colorpicker
label: Background Hover
description: Customize the background color on
hover/active/focus for social icons.
social_hcolor:
type: input.colorpicker
label: Icon Hover
description: Customize the color on hover/active/focus for
social icons.
social_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
content_settings:
type: separator.note
class: alert alert-info
content: 'Content Settings'
customize_content_color:
type: input.colorpicker
label: Custom Color
description: Customize the content color.
customize_content_fontsize:
type: input.number
label: Font Size
min: 0
description: Customize the content text font size.
content_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
_tab_general:
label: General
overridable: false
fields:
particle_title_info:
type: separator.note
class: alert alert-info
content: 'Particle Title Style'
particle_title:
type: input.text
label: Title
description: Add an optional particle title.
placeholder: Enter particle title
particle_title_style:
type: select.select
label: Style
description: Title styles differ in font-size but may also
come with a predefined color, size and font.
default: h3
options:
default: None
heading-2xlarge: 2XLarge
heading-xlarge: XLarge
heading-large: Large
heading-medium: Medium
heading-small: Small
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
particle_title_decoration:
type: select.select
label: Decoration
description: Decorate the headline with a divider, bullet or
a line that is vertically centered to the heading.
default: none
options:
none: None
divider: Divider
bullet: Bullet
line: Line
particle_title_align:
type: select.select
label: Alignment
description: Center, left and right alignment for Particle
title.
default: inherit
options:
inherit: Inherit
left: Left
center: Center
right: Right
justify: Justify
particle_predefined_color:
type: select.select
label: Predefined Color
description: Select the text color. If the Background option
is selected, styles that don't apply a background image use the
primary color instead.
default: default
options:
default: None
muted: Muted
emphasis: Emphasis
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
particle_title_color:
type: input.colorpicker
label: Custom Color
description: Customize the title color instead using
predefined color mode. Set the Predefined color to None before using this
color customization mode.
particle_title_fontsize:
type: input.number
label: Font Size
description: Customize the particle title font size.
min: 0
particle_title_element:
type: select.select
label: HTML Element
description: Choose one of the elements to fit your semantic
structure.
default: h3
options:
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
div: div
general_content_info:
type: separator.note
class: alert alert-info
content: 'General Particle Settings'
align:
type: select.select
label: Text Alignment
description: Center, left and right alignment may depend on a
breakpoint and require a fallback.
default: inherit
options:
inherit: None
left: Left
center: Center
right: Right
justify: Justify
breakpoint:
type: select.select
label: Alignment Breakpoint
description: Define the device width from which the alignment
will apply.
default: always
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
fallback:
type: select.select
label: Alignment Fallback
description: Define an alignment fallback for device widths
below the breakpoint.
default: inherit
options:
inherit: None
left: Left
center: Center
right: Right
justify: Justify
g_maxwidth:
type: select.select
label: Max Width
description: Set the maximum content width.
default: inherit
options:
inherit: None
small: Small
medium: Medium
large: Large
xlarge: X-Large
xxlarge: XX-Large
g_maxwidth_alignment:
type: select.select
label: Max Width Alignment
description: Define the alignment in case the container
exceeds the element's max-width.
default: left
options:
left: Left
center: Center
right: Right
g_maxwidth_breakpoint:
type: select.select
label: Max Width Breakpoint
description: Define the device width from which the
element's max-width will apply.
default: always
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
margin:
type: select.select
label: Margin
description: Set the vertical margin.
default: inherit
options:
inherit: Keep existing
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove-vertical: None
visibility:
type: select.select
label: Visibility
description: Display the element only on this device width
and larger.
default: inherit
options:
inherit: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
general_animation_info:
type: separator.note
class: alert alert-info
content: 'Animation Settings'
animation:
type: select.select
label: Animation
description: Apply an animation to particles once they enter
the viewport. This will animate all particles inside the section.
default: inherit
options:
inherit: None
fade: Fade
scale-up: Scale Up
scale-down: Scale Down
slide-top-small: Slide Top Small
slide-bottom-small: Slide Bottom Small
slide-left-small: Slide Left Small
slide-right-small: Slide Right Small
slide-top-medium: Slide Top Medium
slide-bottom-medium: Slide Bottom Medium
slide-left-medium: Slide Left Medium
slide-right-medium: Slide Right Medium
slide-top: Slide Top 100%
slide-bottom: Slide Bottom 100%
slide-left: Slide Left 100%
slide-right: Slide Right 100%
animation_delay:
type: input.number
label: Animation Delay
description: Set the delay animations for particle. Delay
time in ms.
min: 0
placeholder: 200
animation_repeat:
type: select.select
label: Animation Repeat
description: Repeat an animation to particle once it enter
the viewport.
default: disabled
options:
enabled: Enable
disabled: Disable
copyright:
type: separator.note
class: alert alert-success
content: 'JL Offcanvas Content <strong>Version:
2.1.3</strong> Copyright (C) <a
href="https://joomlead.com/"
target="_blank">https://joomlead.com</a> | <a
href="https://joomlead.com/g5/docs/offcanvas-content-particle-documentation/"
target="_blank">Documentation</a>'