0

I want to display keyboard keys in a way that's similar to standard QWERT keyboard's look. Therefore, I want to add line brakes after "P" and "L" letters. Any help is much appreciated.

I guess I should be able to add a specific class properties to "P" and "L" objects that would apply line brake rules to those two items, but I don't know how.

Without specific line break

HTML

<lightning-layout multiple-rows>
          <lightning-layout-item size="12">
            <lightning-layout multiple-rows>
              <template for:each={keyboardArray} for:item="keyboardKey">
                <lightning-layout-item key={keyboardKey.keyboardIndex}>
                  <div class={keyboardKey.keyboardColor}>
                    {keyboardKey.keyboardLetter}
                  </div>
                </lightning-layout-item>
              </template>
            </lightning-layout>
          </lightning-layout-item>
<lightning-layout multiple-rows>

The keyboardArray I use for iteration looks as below.

keyboardArray = [
    { keyboardIndex: 0, keyboardLetter: "Q", keyboardColor: "keyboardBoxGray" },
    { keyboardIndex: 1, keyboardLetter: "W", keyboardColor: "keyboardBoxGray" },
    { keyboardIndex: 2, keyboardLetter: "E", keyboardColor: "keyboardBoxGray" },
    { keyboardIndex: 3, keyboardLetter: "R", keyboardColor: "keyboardBoxGray" },
    { keyboardIndex: 4, keyboardLetter: "T", keyboardColor: "keyboardBoxGray" },
    { keyboardIndex: 5, keyboardLetter: "Y", keyboardColor: "keyboardBoxGray" },
    { keyboardIndex: 6, keyboardLetter: "U", keyboardColor: "keyboardBoxGray" },
    { keyboardIndex: 7, keyboardLetter: "I", keyboardColor: "keyboardBoxGray" },
    { keyboardIndex: 8, keyboardLetter: "O", keyboardColor: "keyboardBoxGray" },
    { keyboardIndex: 9, keyboardLetter: "P", keyboardColor: "keyboardBoxGray" },
....

2 Answers 2

1

You can add newLine: true to just those letters and then have e.g.:

<br if:true={keyboardKey.newLine}/>

in the markup as JavaScript is not strongly typed and has the concept of truthy.

1
  • Thank you Keith!
    – Akif
    Commented Apr 15, 2023 at 20:30
0

break your array into 3 different ones..

Iterate over them one at a time 3 for loops treat each collection as a complete layout one finished next line then a divider div then another one starts...simple.. your data is not dynamic and will never change after all they alphabets you can go ahead and just do that simply

2
  • Thank you Arihant, the values are actually assigned dynamically. Breaking up the array into three arrays after values assigned each time works, but probably not the ideal approach.
    – Akif
    Commented Apr 15, 2023 at 20:33
  • ohh I thought its more of a like just virtual keyboard Commented Apr 16, 2023 at 0:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .