10.11 Select Anchor Type

Description: This attribute is used to determine the type of anchor tag.

Components to accept the input: Select box

This select box has three options as shown in the image below.
  1. Text
  2. Icon
  3. Image

Description of uxextensibility210.png follows
Description of the illustration uxextensibility210.png

  1. Text: This option is used for simple text. When user select “Text” option, it shows “Value” select box as shown in the image below.
    Description of uxextensibility211.png follows
    Description of the illustration uxextensibility211.png

  2. Icon: This option is used for icons. When user select “Icon” option, it shows an input box named as “Icon class Name” as shown in the image below. This input text accepts an icon class.
    Description of uxextensibility212.png follows
    Description of the illustration uxextensibility212.png

  3. Image: This option is used for image. When user select “Image” option, it shows an input box named as “Enter Image Path” as shown in the image below. This input text accepts image path where it is located
    Description of uxextensibility213.png follows
    Description of the illustration uxextensibility213.png

Example: Now anchor tag can be used with simple text, icon or image.

  1. Text: User have a simple text “Forgot User name” that user want to use as a link, as shown in the image below highlighted in red oval.
    Description of uxextensibility214.png follows
    Description of the illustration uxextensibility214.png

    Usage: In this type, select this option as shown in the image below.


    Description of uxextensibility215.png follows
    Description of the illustration uxextensibility215.png

    As user can see in above image, there is small information text, “Please use value option if anchor text is not fetched from ResourceBundle”.

    It means, if text is not a simple string, i.e. it is fetched from the server or stored in variable then user can use value option available just below the text.

    To understand value attribute refer value attribute section.

    In this example, “Forgot User name” it is a simple string, do not select anything from “Value” select box.

  2. Icon: User have an icon (>) that user want to use as a link, as shown in the image below highlighted in red oval.
    Description of uxextensibility216.png follows
    Description of the illustration uxextensibility216.png

    Usage: In this type, select this option as shown in the image below.

    It will display an input box to enter the class name for an icon.

    For this icon, class name is “icons icon-arrow-right”, enter it in the input box as shown in the image below.


    Description of uxextensibility217.png follows
    Description of the illustration uxextensibility217.png

  3. Image: User have an image that user want to use as a link, as shown in the image below highlighted in red oval.
    Description of uxextensibility218.png follows
    Description of the illustration uxextensibility218.png

    Usage: In this type, select this option as shown in the image below.

    It will display an input box to enter the path for an image.

    For this image, path is “dashboard/quick-access/ transfer-money”, enter it in the input box as shown in the image below.

    Note:

    Use single quotes if path is of type string.

    Description of uxextensibility219.png follows
    Description of the illustration uxextensibility219.png

    If “dashboard/quick-access” is string but “transfer-money” is stored in image variable. Then path will be ‘dashboard/quick-access’ + image


    Description of uxextensibility220.png follows
    Description of the illustration uxextensibility220.png

Parent topic: Available Attributes