Навігація

Таблиця дій

Методи застосування таблиці дій

Параметри таблиці дій

var actions = app.actions.create({
  buttons: [ /* ... */ ],
  on: {
    opened: function () {
      console.log('Action Sheet opened')
    }
  }
})

var app = new Techno4({
  actions: {
    convertToPopover: false,
    grid: true,
  }
});

Параметри кнопок

Методи та властивості таблиці дій

Методи

Таблиця контрольних дій із посиланнями

• Щоб відкрити таблицю дій, нам потрібно додати клас «actions-open» до будь-якого елемента HTML (бажано для посилання)
• Щоб закрити таблицю дій, нам потрібно додати клас «actions-close» до будь-якого елемента HTML (бажано для посилання)
• Якщо у вас є більше однієї таблиці дій у DOM, вам потрібно вказати відповідну таблицю дій за допомогою додаткового атрибута data-actions=".my-actions" у цьому елементі HTML Відповідно до примітки вище:

<!-- In data-actions attribute we specify CSS selector of action sheet we need to open -->
<p><a href="#" data-actions=".my-actions" class="actions-open">Open Actions</a></p>

<!-- And somewhere in DOM -->
<div class="actions-modal my-actions">
  ...
</div>

Події таблиці дій

DOM Події

Події екземплярів застосунку та таблиці дій

Змінні CSS

:root {
  /*
  --t4-actions-button-text-color: var(--t4-theme-color);
  */
  --t4-actions-grid-button-font-size: 12px;
  --t4-actions-grid-button-text-color: #757575;
  --t4-actions-grid-button-icon-size: 48px;
}
:root .dark,
:root.dark {
  --t4-actions-label-text-color: rgba(255, 255, 255, 0.55);
}
.ios {
  --t4-actions-border-radius: 13px;
  --t4-actions-button-padding: 0px;
  --t4-actions-button-text-align: center;
  --t4-actions-button-height: 57px;
  --t4-actions-button-height-landscape: 44px;
  --t4-actions-button-font-size: 20px;
  --t4-actions-button-icon-size: 28px;
  --t4-actions-button-justify-content: center;
  --t4-actions-label-padding: 8px 10px;
  --t4-actions-label-font-size: 13px;
  --t4-actions-label-justify-content: center;
  --t4-actions-group-border-color: transparent;
  --t4-actions-group-margin: 8px;
  --t4-actions-bg-color: rgba(255, 255, 255, 0.95);
  --t4-actions-bg-color-rgb: 255, 255, 255;
  --t4-actions-button-border-color: rgba(0, 0, 0, 0.2);
  --t4-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
  --t4-actions-button-pressed-bg-color-rgb: 230, 230, 230;
  --t4-actions-label-text-color: #8a8a8a;
}
.ios .dark,
.ios.dark {
  --t4-actions-bg-color: rgba(45, 45, 45, 0.95);
  --t4-actions-bg-color-rgb: 45, 45, 45;
  --t4-actions-button-border-color: rgba(255, 255, 255, 0.15);
  --t4-actions-button-pressed-bg-color: rgba(50, 50, 50, 0.9);
  --t4-actions-button-pressed-bg-color-rgb: 50, 50, 50;
}
.md {
  --t4-actions-border-radius: 0px;
  --t4-actions-button-border-color: transparent;
  --t4-actions-button-padding: 0 16px;
  --t4-actions-button-text-align: left;
  --t4-actions-button-height: 48px;
  --t4-actions-button-height-landscape: 48px;
  --t4-actions-button-font-size: 16px;
  --t4-actions-button-icon-size: 24px;
  --t4-actions-button-justify-content: space-between;
  --t4-actions-label-padding: 12px 16px;
  --t4-actions-label-font-size: 16px;
  --t4-actions-label-justify-content: flex-start;
  --t4-actions-group-margin: 0px;
  --t4-actions-bg-color: #fff;
  --t4-actions-button-pressed-bg-color: #e5e5e5;
  --t4-actions-label-text-color: rgba(0, 0, 0, 0.54);
  --t4-actions-group-border-color: rgba(0, 0, 0, 0.12);
}
.md .dark,
.md.dark {
  --t4-actions-bg-color: #202020;
  --t4-actions-button-pressed-bg-color: #2e2e2e;
  --t4-actions-group-border-color: rgba(255, 255, 255, 0.15);
}
.aurora {
  --t4-actions-border-radius: 8px;
  --t4-actions-button-padding: 0 16px;
  --t4-actions-button-text-align: center;
  --t4-actions-button-height: 48px;
  --t4-actions-button-height-landscape: 48px;
  --t4-actions-button-font-size: 16px;
  --t4-actions-button-icon-size: 24px;
  --t4-actions-button-justify-content: space-between;
  --t4-actions-label-padding: 10px 16px;
  --t4-actions-label-font-size: 14px;
  --t4-actions-label-justify-content: center;
  --t4-actions-group-margin: 16px;
  --t4-actions-bg-color: #fff;
  --t4-actions-button-border-color: rgba(0, 0, 0, 0.12);
  --t4-actions-button-pressed-bg-color: #e5e5e5;
  --t4-actions-label-text-color: rgba(0, 0, 0, 0.5);
  --t4-actions-group-border-color: rgba(0, 0, 0, 0.1);
}
.aurora .dark,
.aurora.dark {
  --t4-actions-bg-color: #202020;
  --t4-actions-button-border-color: rgba(255, 255, 255, 0.15);
  --t4-actions-button-pressed-bg-color: #2e2e2e;
  --t4-actions-group-border-color: rgba(255, 255, 255, 0.15);
}

Приклади

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Action Sheet</div>
      </div>
    </div>

    <div class="page-content">
      <div class="block">
        <p>
          <a href="#" class="ac-1">One group, three buttons</a>
        </p>
        <p>
          <a href="#" class="ac-2">One group, title, three buttons</a>
        </p>
        <p>
          <a href="#" class="ac-3">Two groups</a>
        </p>
        <p>
          <a href="#" class="ac-4">Three groups</a>
        </p>
        <p>
          <a href="#" class="ac-5">With callbacks on click</a>
        </p>
        <p>
          <a href="#" class="ac-6">Actions grid</a>
        </p>
      </div>
    </div>

  </div>
</template>
<script>
  export default (props, { $, $t4, $on }) => {

    $on('pageInit', () => {
      //- One group, three buttons
      var ac1 = $t4.actions.create({
        buttons: [
          {
            text: 'Button1',
            bold: true
          },
          {
            text: 'Button2'
          },
          {
            text: 'Cancel',
            color: 'red'
          },
        ]
      })

      //- One group, title, three buttons
      var ac2 = $t4.actions.create({
        buttons: [
          {
            text: 'Do something',
            label: true
          },
          {
            text: 'Button1',
            bold: true
          },
          {
            text: 'Button2',
          },
          {
            text: 'Cancel',
            color: 'red'
          },
        ]
      });
      //- Two groups
      var ac3 = $t4.actions.create({
        buttons: [
          // First group
          [
            {
              text: 'Do something',
              label: true
            },
            {
              text: 'Button1',
              bold: true
            },
            {
              text: 'Button2',
            }
          ],
          // Second group
          [
            {
              text: 'Cancel',
              color: 'red'
            }
          ]
        ]
      });
      //- Three groups
      var ac4 = $t4.actions.create({
        buttons: [
          [
            {
              text: 'Share',
              label: true
            },
            {
              text: 'Mail',
            },
            {
              text: 'Messages',
            }
          ],
          [
            {
              text: 'Social share',
              label: true
            },
            {
              text: 'Facebook',
            },
            {
              text: 'Twitter',
            }
          ],
          [
            {
              text: 'Cancel',
              color: 'red'
            }
          ]
        ],
      });
      //- With callbacks on click
      var ac5 = $t4.actions.create({
        buttons: [
          {
            text: 'Button1',
            onClick: function () {
              $t4.dialog.alert('Button1 clicked')
            }
          },
          {
            text: 'Button2',
            onClick: function () {
              $t4.dialog.alert('Button2 clicked')
            }
          },
          {
            text: 'Cancel',
            color: 'red',
            onClick: function () {
              $t4.dialog.alert('Cancel clicked')
            }
          },
        ]
      });
      //- Actions Grid
      var ac6 = $t4.actions.create({
        grid: true,
        buttons: [
          [
            {
              text: 'Button 1',
              icon: '<img src="https://cdn.Techno4.io/placeholder/people-96x96-1.jpg" width="48"/>'
            },
            {
              text: 'Button 2',
              icon: '<img src="https://cdn.Techno4.io/placeholder/people-96x96-2.jpg" width="48">'
            },
            {
              text: 'Button 3',
              icon: '<img src="https://cdn.Techno4.io/placeholder/people-96x96-3.jpg" width="48">'
            },
          ],
          [
            {
              text: 'Button 1',
              icon: '<img src="https://cdn.Techno4.io/placeholder/fashion-96x96-4.jpg" width="48"/>'
            },
            {
              text: 'Button 2',
              icon: '<img src="https://cdn.Techno4.io/placeholder/fashion-96x96-5.jpg" width="48">'
            },
            {
              text: 'Button 3',
              icon: '<img src="https://cdn.Techno4.io/placeholder/fashion-96x96-6.jpg" width="48">'
            },
          ]
        ]
      });

      $('.ac-1').on('click', () => {
        ac1.open();
      });
      $('.ac-2').on('click', () => {
        ac2.open();
      });
      $('.ac-3').on('click', () => {
        ac3.open();
      });
      $('.ac-4').on('click', () => {
        ac4.open();
      });
      $('.ac-5').on('click', () => {
        ac5.open();
      });
      $('.ac-6').on('click', () => {
        ac6.open();
      });
    })

    return $render;
  }
</script>