Skip to main content

values

values: Record<string, any>

this property allows user to set and get the current values of controls inside the toolbar. It can be used to initialize the controls with predefined values and to reactively update them.

Usage​

Get Current Value of Controls​

<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
/>

Set Initial Values for Controls​

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

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

Change Values for Controls​

<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} />