values

values: { [key: string]: any }

this property allows user to bind values for controls inside the toolbar. The default property value is an empty object {}.

Usage

Getting current value of controls inside of toolbar

<script>
  let values = {};

  // will be triggered on changes
  $: console.log(JSON.stringify(values));
</script>

<Toolbar
  items={[
    { comp: Text, key: "query" },
    { comp: Switch, key: "state" },
  ]}
  bind:values
/>

Setting initial values for controls inside of toolbar

<script>
  const values = { query: "something else", state: true };
</script>

<Toolbar
  items={[
    { comp: Text, key: "query" },
    { comp: Switch, key: "state" },
  ]}
  {values}
/>

Changing values for controls inside of toolbar

<script>
  const items = [
    { type: "label", text: "Active Mode" },
    { comp: Switch, key: "state" },
  ];

  let values = { query: "something else", state: true };

  // change value later on
  const reset = () => {
    values = { ...values, state: false };
  };
</script>

<Toolbar {items} {values} />