@action-agenda/loading

---

sidebarDepth: 5

View

Description

This component displays a single commitment that is published, or not published with appropriate roles.

Install

Widget

To install as a copy and paste widget. As seen here: https://www.cbd.int/action-agenda/contributions/action/?action-id=5eeba456395529000178dcbf

::: tip This component's options can be passed as an attribute on the script tag. See options details :::

<script nomodule="" id="view-legacy" src="https://cdn.cbd.int/@action-agenda/view@~1.0.0/dist/widget/index.umd.min.js"></script>
<script  type="module" id="view" src="https://cdn.cbd.int/@action-agenda/view@~1.0.0/dist/widget/index.min.js"></script> 

<script  type="module" id="view" src="https://cdn.cbd.int/@action-agenda/view@~1.0.0/dist/widget/index.min.js"></script> 

<script nomodule="" id="view-legacy" src="https://cdn.cbd.int/@action-agenda/view@~1.0.0/dist/widget/index.umd.min.js"></script>

Vuejs

To install as vuejs component.

yarn add @action-agenda/view

npm install @action-agenda/view

<template>
  <AAView identifier="5f1a9e9c66d0dd000181331d" ></AAView>
</template>

<script>
import AAView from '@action-agenda/view'

import '@scbd/www-css'

export default { name      : 'App',
                 components: { AAView } 
               }
</script>

Properties

<<< @/packages/view/src/index.vue#snippet

identifier

Can be passed a prop on the element or as a url search param:

?action-id=5dbc8120f247140001197c8a

https://www.cbd.int/action-agenda/contributions/action/?action-id=5dbc8120f247140001197c8a

forceEnv

Tell the component which api to use by passing: dev | stg | prod

dev : https://api.cbddev.xyz/api/actions

stg : https://api.stg.cbd.int/api/actions

prod : https://api.cbd.int/api/actions

options

<<< @/packages/view/src/default-options.js#snippet

I18n (translations)

<<< @/packages/view/src/locales/index.js

Example

---

<script> export default { methods: {getExamp}, data() { return { dynamicComponent: null, exampleData: null, exampleHeader: null } }, mounted () { import('../view/src/index.js').then(module => { this.dynamicComponent = module.default this.getExamp() }) }, destroyed(){ this.exampleHeader.parentNode.removeChild(this.exampleHeader) this.exampleData.parentNode.removeChild(this.exampleData) } } function getExamp(){ const test = document.getElementsByTagName('main')[0].lastElementChild.id if(test === 'aa-data') return this.exampleHeader = document.getElementById('example-hr') this.exampleData = document.getElementById('aa-data') this.exampleHeader.parentNode.removeChild(this.exampleHeader) this.exampleData.parentNode.removeChild(this.exampleData) const main = document.getElementsByTagName('main')[0] this.exampleHeader.classList.add('aaexample-header') main.appendChild(this.exampleHeader) main.appendChild(this.exampleData) } </script> <style scoped> .aaexamp{ background-color: rgb(38, 90, 79); } .aaexamp .article-container{ background-color: white; } .aaexamp-header{ max-width: 740px; margin: 0 auto; padding: 2rem 2.5rem; } </style>