angular-code-input icon indicating copy to clipboard operation
angular-code-input copied to clipboard

Add placeholder support

Open yaphanlong opened this issue 2 years ago • 3 comments

Hi, is it possible to include placeholder support as shown below? Current workaround is to use javascript and target each input to inject placeholder.

Screenshot 2023-05-25 at 2 10 54 PM

yaphanlong avatar May 25 '23 06:05 yaphanlong

@yaphanlong Hi, I will research it, but it seems that this placeholder will not be native for the HTML.

AlexMiniApps avatar May 25 '23 07:05 AlexMiniApps

@AlexMiniApps @yaphanlong It would be actually possible by

  1. Adding the has-value class up in the span (or adding a new class)
  2. Displaying the following css in the span, if it doesn't have the class
span {
  &.has-value {
          &:after {
            content: "";
            position: absolute;
            height: 8px;
            width: 8px;
            top: calc(50% - 4px);
            left: calc(50% - 4px);
            background-image: radial-gradient(
                    circle at center,
                    lightgray 5px,
                    transparent 5px
            );
            border-radius: 100%;
            background-size: 20px;
            background-position: top center, bottom center;
            background-repeat: no-repeat;
    }
   }
}

I can make a pull-request if you wish

rbalet avatar Feb 08 '24 19:02 rbalet

@rbalet Thanks for the suggestion

AlexMiniApps avatar Feb 09 '24 12:02 AlexMiniApps