Skip to content

smir-ant/slint_widgets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Custom slint widget set

HR

Just divider

Result Code
Text { text: "Lorem ipsum"; }
HR {}
Text { text: "Lorem ipsum"; }
HR {
    hr-width: 75%;
    hr-height: 5px;
    hr-background: Palette.accent-background;
    hr-border-radius: 5px;
    vertical-padding: 15px;
}
Text { text: "Lorem ipsum"; }

Label border

A frame around the objects with a caption. Any object can be inside. Any number of objects inside.

Result Code
LabelBorder {
  Text { text: "One two three four five"; }
}
LabelBorder {
    title: "Some label";
    Button { text: "Lorem ipsum"; }
}
LabelBorder {
    title: "* Your Age";
    LineEdit { placeholder-text: "Please enter your age"; }
    Text { 
        text: "Only 18+ \nThe administration can check your age.";
        font-size: 10px;
        color: Palette.foreground.with-alpha(0.4);
    }
}
LabelBorder {
  title: "Choose the answer";
  width: 100%;  // full width, not fit-content
  label-font-size: 20px;
  border-radius: 15px;
  HorizontalLayout {
      spacing: 10px;
      for letter[indx] in ["A", "B", "C"]: Button {
          text: "\{letter} : \{indx}";
      }
  }
}

Dropdown

Drop-down menu. An analog of the <details> tag from html. There can be any number of elements inside.

Result Code
Dropdown {
  title: "Question?";
  Text { text: "Thank you for your question!"; }
}
Dropdown {
  title: "Click to expand";
  title-font-size: 20px;
  border-radius: 18px;
  header-background: true;
  expanded: true;
  width: 100%;

  LineEdit { placeholder-text: "Element number 1"; }
  Button { text: "Second(after first)"; }
  Text { text: "Third is bronze"; }
}

WheelPicker

Selection via scroll wheels. Magnet adjusted to the nearest value. Swipe and scrolling are supported!

Result Code
property <int> selected-hour: 0;
property <int> selected-minute: 0;
property <int> selected-second: 0;

property <[string]> hours-model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23",];
property <[string]> minutes-model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59",];
property <[string]> seconds-model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59",];

VerticalLayout {
  HorizontalLayout {
      alignment: center;
      spacing: 10px;

      WheelPicker {
          sections: 5;
          model: hours-model;
          selected(index) => { selected-hour = index; }
      }
      WheelPicker {
          sections: 5;
          model: minutes-model;
          selected(index) => { selected-minute = index; }
      }
      WheelPicker {
          sections: 5;
          model: seconds-model;
          selected(index) => { selected-second = index; }
      }
  }

  Button {
      text: "Show time";
      clicked => {
          debug("\{selected-hour} : \{selected-minute} : \{selected-second}");
      }
  }
}
property <int> selected-day: 0;
property <int> selected-hour: 0;
property <int> selected-minute: 0;

property <[string]> dow-model: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
property <[string]> hours-model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
property <[string]> minutes-model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59",];

VerticalLayout {
  spacing: 20px;
  HorizontalLayout {
      alignment: center;
      spacing: 10px;

      VerticalLayout {
          WheelPicker {
              width: 50px;
              sections: 3;
              reverse-scroll: true;
              accent-color: gray.with-alpha(0.3);
              model: dow-model;
              selected(index) => { selected-day = index; }
          }
          HorizontalLayout { alignment: center; Text { text: "Day"; font-size: 14px; }} 
      }
      VerticalLayout {
          WheelPicker {
              width: 150px;
              sections: 5;
              model: hours-model;
              reverse-scroll: true;
              accent-color: red;
              selected(index) => { selected-hour = index; }
          }
          HorizontalLayout { alignment: center; Text { text: "Hour"; font-size: 14px; }} 
      }
      VerticalLayout {
          WheelPicker {
              sections: 2;
              model: minutes-model;
              selected(index) => { selected-minute = index; }
          }
          HorizontalLayout { alignment: center; Text { text: "Minute"; font-size: 14px; }} 
      }
  }

  Button {
      text: "Show";
      clicked => {
          debug("\{dow-model[selected-day]} \{selected-hour} : \{selected-minute}");
      }
  }
}