[Patternlibrary GUI v0.0.1]
  • Name: atom/link
    Categories: basics, texts

    an inline link


    Here you can either give a rather brief description of your pattern or provide extended usage information.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.

    A Markup Example

    Source

    <a href="#" class="{your classnames}">some link label</a>
    

    Output

    Example:

    
    <a class="" href=""></a>
    
    

    Output:

    JavaScript Reference

    Initializing

    The file module.js must be included in your JavaScript to use this plugin, along with siteapp.core.js.

    Siteapp.TextExcerptToggle

    Creates a new instance of a Siteapp.TextExcerptToggle.

    var elem = new YourApp.TextExcerptToggle(element, options);
    NameTypeDescription
    element jQuery jQuery object to make into a Siteapp.TextExcerptToggle. Object should be of the TextExcerptToggle panel, rather than its anchor.
    options Object Overrides to the default plugin settings.

    Plugin Options

    Use these options to customize an instance of atom/link. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

    Name Type Default Description
    data-parent-class string null Class that designates bounding container of TextExcerptToggle (default: window)
    data-hover-delay number 250 Amount of time to delay opening a submenu on hover event.
    data-hover boolean false Allow submenus to open on hover events
    data-hover-pane boolean false Don't close TextExcerptToggle when hovering over TextExcerptToggle pane
    data-v-offset number 1 Number of pixels between the TextExcerptToggle pane and the triggering element on open.
    data-h-offset number 1 Number of pixels between the TextExcerptToggle pane and the triggering element on open.
    data-position-class string '' Class applied to adjust open position. JS will test and fill this in.
    data-trap-focus boolean false Allow the plugin to trap focus to the TextExcerptToggle pane if opened with keyboard commands.
    data-auto-focus boolean false Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.
    data-close-on-click boolean false Allows a click on the body to close the TextExcerptToggle.

    Events

    These events will fire from any element with a atom/link plugin attached.

    NameDescription
    closeme.zf.atom/link Fires to close other open TextExcerptToggle, typically when TextExcerptToggle is opening
    show.zf.atom/link Fires once the TextExcerptToggle is visible.
    hide.zf.atom/link Fires once the TextExcerptToggle is no longer visible.

    Methods

    getPositionClass

    $('#element').your_app('getPositionClass');

    Helper function to determine current orientation of TextExcerptToggle pane.


    open

    $('#element').your_app('open');

    Opens the TextExcerptToggle pane, and fires a bubbling event to close other TextExcerptToggle.

    Fires these events: TextExcerptToggle#event:closeme TextExcerptToggle#event:show


    close

    $('#element').your_app('close');

    Closes the open TextExcerptToggle pane.

    Fires these events: TextExcerptToggle#event:hide


    toggle

    $('#element').your_app('toggle');

    Toggles the TextExcerptToggle pane's visibility.


    _destroy

    $('#element').your_app('_destroy');

    Destroys the TextExcerptToggle.

    SASS/SCSS Reference

    Variables

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    NameTypeDefault ValueDescription
    $link-font-family Font inherit

    Font family for link elements.

    $link-padding List 0.85em 1em

    Padding inside links.

    $link-margin List 0 0 $global-margin 0

    Margin around links.

    $link-fill Keyword solid

    Default fill for links. Can either be solid or hollow.

    $link-background Color $primary-color

    Default background color for links.

    $link-background-hover Color scale-color($link-background, $lightness: -15%)

    Background color on hover for links.

    $link-color List $white

    Font color for links.

    $link-color-alt List $black

    Alternative font color for links.

    $link-radius Number $global-radius

    Border radius for links, defaulted to global-radius.

    $link-hollow-border-width Number 1px

    Border width for hollow outline links

    $link-sizes Map tiny: 0.6rem
    small: 0.75rem
    default: 0.9rem
    large: 1.25rem

    Sizes for links.

    $link-palette Map $foundation-palette

    Coloring classes. A map of classes to output in your CSS, like .secondary, .success, and so on.

    $link-opacity-disabled List 0.25

    opacity for a disabled link.

    $link-background-hover-lightness Number -20%

    Background color lightness on hover for links.

    $link-hollow-hover-lightness Number -50%

    Color lightness on hover for hollow links.

    $link-transition List background-color 0.25s ease-out, color 0.25s ease-out

    transitions for links.


    Mixins

    We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

    @include link-expand($expand);

    Expands a link to make it full-width.

    ParameterTypeDefault ValueDescription
    $expand Boolean true

    Set to true to enable the expand behavior. Set to false to reverse this behavior.


    @include link-style($background, $background-hover, $color);

    Sets the visual style of a link.

    ParameterTypeDefault ValueDescription
    $background Color $link-background

    Background color of the link.

    $background-hover Color $link-background-hover

    Background color of the link on hover. Set to auto to have the mixin automatically generate a hover color.

    $color Color $link-color

    Text color of the link. Set to auto to automatically generate a color based on the background color.


    @include link-hollow;

    Removes background fill on hover and focus for hollow links.


    @include link-disable);

    Adds disabled styles to a link by fading the element, reseting the cursor, and disabling pointer events.


    @include link-dropdown($size, $color, $offset);

    Adds a dropdown arrow to a link.

    ParameterTypeDefault ValueDescription
    $size Number 0.4em

    Size of the arrow. We recommend using an em value so the triangle scales when used inside different sizes of links.

    $color Color white

    Color of the arrow.

    $offset Number $link-padding

    Distance between the arrow and the text of the link. Defaults to whatever the right padding of a link is.


    @include link($expand, $background, $background-hover, $color, $style);

    Adds all styles for a link. For more granular control over styles, use the individual link mixins.

    ParameterTypeDefault ValueDescription
    $expand Boolean false

    Set to true to make the link full-width.

    $background Color $link-background

    Background color of the link.

    $background-hover Color $link-background-hover

    Background color of the link on hover. Set to auto to have the mixin automatically generate a hover color.

    $color Color $link-color

    Text color of the link. Set to auto to automatically generate a color based on the background color.

    $style Keyword solid

    Set to hollow to create a hollow link. The color defined in $background will be used as the primary color of the link.

    Pattern Specifications:

    Info:

    Dependencies:

    no dependencies

    Parameters:

    • class: *
    • href: *
    • label: *

    Pattern Source:

    <a class="{{class}}" href="{{href}}">{{label}}</a>

    no tests info available...

    no change-log info available...


    Git-Log: