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" },
....
Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
1
  • Thank you Keith!
    – Akif
    Apr 15 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

Improve this answer
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
    Apr 15 at 20:33
  • ohh I thought its more of a like just virtual keyboard
    – Arihant Kumar Seraogi
    Apr 16 at 0:07

You must log in to answer this question.

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