@yola/ws-component-block

6.3.0 • Public • Published

ws-block

Component loads template by src url and replaces <slot name="${SLOT_NAME}"></slot> elements with corresponding child nodes (nodes with attribute slote=${SLOT_NAME}) and render inside the result.

Configuration attributes

Name Type Default Value Description
src string Defines path to the template file
background-image string Defines background image url. That image will be set as background image to the element with data-ws-block-background-target attribute.
transform-scale-factor float That parameter will be set for child components and fix image size in cases when blocks are scaled.
safe-mode string Defines safe mode. That parameter will be set for child components.
custom bool Defines custom block. That parameter will enable empty state for such block.

Usage

<!-- block -->
<ws-block src="/path/to/template.html" background-image="/test.png">
  <div class="block-suptitle" slot="block-suptitle">
    block-suptitle
  </div>

  <h2 class="block-title" slot="block-title">
    block-title
  </h2>

  <p class="block-subtitle" slot="block-subtitle">
    block-subtitle
  </p>
</ws-block>

<!-- template -->
<section class="block-features-icon-list-4-col section-lg-padding" data-ws-block-background-target>
  <div class="block-top"></div>
  <div class="container">
    <slot name="block-suptitle"></slot>
    <slot name="block-title"></slot>
    <slot name="block-subtitle"></slot>
  </div>
  <div class="block-bottom"></div>
</section>

<!-- result -->
<ws-block src="/path/to/template.html" background-image="/test.png">
  <section
    class="block-features-icon-list-4-col section-lg-padding"
    data-ws-block-background-target
    style="background-image: url(/test.png);"
  >
    <div class="block-top"></div>
    <div class="container">
      <div class="block-suptitle" slot="block-suptitle">
        block-suptitle
      </div>
      <h2 class="block-title" slot="block-title">
        block-title
      </h2>
      <p class="block-subtitle" slot="block-subtitle">
        block-subtitle
      </p>
    </div>
    <div class="block-bottom"></div>
  </section>
</ws-block>

Readme

Keywords

none

Package Sidebar

Install

npm i @yola/ws-component-block

Weekly Downloads

12

Version

6.3.0

License

none

Unpacked Size

36.1 kB

Total Files

14

Last publish

Collaborators

  • yola-engineers
  • yola-readonly