t-color-picker

This component renders a color picker. It uses @jaames/iro under the hood.

Note that you need to wrap it with a Suspense component.

Basic Usage

export default defineComponent({
  setup() {
    return () => (
      <TCard class="w-75 overflow-hidden" design="outlined" size="xl">
        <Suspense>
          <TColorPicker />
        </Suspense>
      </TCard>
    );
  },
});

Model Value, Layout and Alpha

export default defineComponent({
  setup() {
    const color = ref<TColorPickerValue>({
      hexa: "#f50084FF",
    });

    const onChange = (value: string) => {
      color.value = { hexa: value };
    };

    return () => (
      <>
        <TCard class="w-75 overflow-hidden" design="raised" color="surface" size="xl" mb>
          <Suspense>
            <TColorPicker
              value={color}
              layout="box"
              hide-preview //
            />
          </Suspense>
        </TCard>

        <TFlex mb>
          <TIconButton style={{ background: color.value?.hexa }} icon="mdi:palette" />
          <TButton onClick={() => onChange("#FF6B00FF")}>Color #1</TButton>
          <TButton onClick={() => onChange("#0797FFFF")}>Color #2</TButton>
        </TFlex>

        <TCard design="flat" py px>
          <TText>HEX: {color.value?.hex}</TText>
          <TText>HEXA: {color.value?.hexa}</TText>
          <TText>RGBA: {color.value?.rgbaString}</TText>
          <TText>HSLA: {color.value?.hslaString}</TText>
        </TCard>
      </>
    );
  },
});

Display, Alpha Channel and Size

<TColorPicker
  value={color}
  layout="circle"
  display="rgba"
  size="sm"
  hide-preview //
/>

API

TODO

Plugins

Changes Guard

Colors

t-input-color

Table of Contents