Contact View Component - McNamara84/ladis GitHub Wiki

The x-contact view component and it's derivates render structured contact information. The data is stored in JSON files following Schema.org rules and is provided by the Contacts Service.

This approach aims to solve two main concerns:

  1. Display contact information with a consistent layout throughout the application.
  2. Make sure that contact information stays up-to-date/in sync on all pages.

x-contact

This is the base component of this package. It renders the complete set of available information for a single contact.

Example

Input

<x-contact :contact="$fhp" />

Output

<article itemscope="" itemtype="https://schema.org/CollegeOrUniversity" class="contact">
    <header class="contact-header">
        <h3 itemprop="name">Fachhochschule Potsdam (FHP)</h3>
    </header>
    <div class="contact-body dl-container">
        <dl>
            <dt>Postanschrift</dt>
            <dd itemprop="address" itemscope="" itemtype="https://schema.org/PostalAddress">
                <span itemprop="streetAddress">Kiepenheuerallee 5</span><br>
                <span itemprop="postalCode">14469</span>
                <span itemprop="addressLocality">Potsdam</span>
            </dd>
            <dt>Website</dt>
            <dd>
                <a itemprop="url" href="https://www.fh-potsdam.de">https://www.fh-potsdam.de</a>
            </dd>
            <dt>E-Mail</dt>
            <dd>
                <a itemprop="email" href="mailto:[email protected]">[email protected]</a>
            </dd>
            <dt>Telefon</dt>
            <dd>
                <a href="tel:+49 331 580-00"><span itemprop="telephone">+49 331 580-00</span></a>
            </dd>
            <dt>Fax</dt>
            <dd itemprop="faxNumber">+49 331 580-1009</dd>
        </dl>
    </div>
</article>

Attributes

:contact

The :contact attribute is required and must be set to the id of the contact record to be displayed.

variant

The variant attribute is optional and can be used to change the display of the contact. The changes are purely cosmetic (CSS). Markup and information remain unaffected.

  • Default: contact
  • Options:
    • contact
    • card

name-format

The name-format attribute is optional and can be used to change the format of the contact's name.

heading-level

The heading-level attribute is optional and can be used to change the heading level for the contact element.

  • Default: h3
  • Options:
    • h1
    • h2
    • h3
    • h4
    • h5
    • h6

x-contact.grid

This is a variant of the x-contact component that renders multiple contacts in a grid layout. All attributes of x-contact are also available for x-contact.grid.

Example

Input

<x-contact.grid :contacts="$contacts" />

Output

<ul role="list" class="list-unstyled row row-cols-1 row-cols-lg-2 row-cols-xl-3 g-5 card-grid">
    <li class="col">
        <article itemscope="" itemtype="https://schema.org/ResearchProject" class="contact">
            <!-- truncated -->
        </article>
    </li>
    <li class="col">
        <article itemscope="" itemtype="https://schema.org/Organization" class="contact">
            <!-- truncated -->
        </article>
    </li>
    <li class="col">
        <article itemscope="" itemtype="https://schema.org/Person" class="contact">
            <!-- truncated -->
        </article>
    </li>
</ul>

x-contact.link

This is a variant of the x-contact component that renders a single contact as a link.

Example

Input

<x-contact.link :contact="$fhp" />

Output

<span itemscope="" itemtype="https://schema.org/CollegeOrUniversity">
    <a itemprop="url" href="https://www.fh-potsdam.de">
        <span itemprop="name">Fachhochschule Potsdam</span>
    </a>
</span>

Attributes

name-format

The name-format attribute is optional and can be used to change the format of the contact's name.

itemprop

The itemprop attribute is optional and can be used to change the property of the contact that is used as the link target. It has no effect on the displayed text.

  • Default: url
  • Options:
    • url
    • email
    • telephone

Slots

The x-contact.link component allows to provide custom content via a slot that replaces the default inner HTML of the link.

Example

Input
<x-contact.link :contact="$fhp">Custom content</x-contact.link>
Output
<span itemscope="" itemtype="https://schema.org/CollegeOrUniversity">
    <a itemprop="url" href="https://www.fh-potsdam.de">Custom content</a>
</span>

Formatting names

The name-format attribute can be used to change the format of the contact's name. It is a string that can contain the following placeholders:

  • [n]: The contact's name.
  • [a]: The contact's alternate name, e.g. the abbreviation.

The idea is to allow to display the name(s) in different ways, using simple patterns to e.g. wrap the abbreviation in () or separate the name and the abbreviation with a –.

Note

This is a simple approach to format the name(s) and is not intended to be a full-featured name formatter (yet). Parsing the tokens is a bit brittle and depending on if we continue to use the Schema.org data model, we might enhance this feature and support more of the Schema.org properties (like honorificPrefix).

  • Each placeholder is surrounded by [] and is replaced with the corresponding value, if available.
  • If a placeholder is not available, it is ignored, including everything in the [] group.

Example

Input

{
    "@type": "Person",
    "name": "Alice",
    "url": "https://alice.wonderland"
}
<x-contact.link :contact="$alice" name-format="[n][ (a)]" />

Output

<span itemscope="" itemtype="https://schema.org/Person">
    <a itemprop="url" href="https://alice.wonderland">
        <span itemprop="name">Alice</span>
    </a>
</span>

Because the record has no alternateName, the group [ (a)] is ignored completely.

If you notice an error or have a suggestion for improvement, please feel free to edit the pages in this wiki!

⚠️ **GitHub.com Fallback** ⚠️