# Создание Line Select (в разработке)

![Результат](https://3862206493-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lxr3aUGv5wlPyjEJrq-%2F-Lz6soRuCc3_nyh9A_z7%2F-Lz6tB6asBjQKsVONRJ9%2Fimage.png?alt=media\&token=dc4010e9-f870-4c0b-9b6c-be97265e3cb8)

Line Select представляет из-себя компонент состоящий из нескольких кнопок, и одномоментно может быть включена только одна из-них.

Мы создадим такой компонент, который сможет принимать на вход массив строк и для каждого элемента вектора будет создана отдельная кнопка.&#x20;

### Подготовка

Первое, что делается всегда, это наследование от класса `Component` (более подробно это описано в [Создание собственных компонентов на базе класса Component](https://i58215.gitbook.io/component-sdl2/uglublennaya-rabota-s-bibliotekoi/sozdanie-sobstvennykh-komponentov-na-baze-klassa-component) ), создадим папку `components` рядом с `main.cpp` и добавим в него файл `line_select.h` со следующим содержанием:

```cpp
// file line_select.h

#pragma once

#include "component.h"

using namespace Kit;

class LineSelect : public Component
{
public:
    LineSelect(const string& id, const string& classes = "");
    ~LineSelect() override;

public:
    static Component* create(const string& id, const string& classes = "");

    void setup();
};
```

И файл `line_select.cpp`:

```cpp
// file line_select.cpp

#include "line_select.h"

LineSelect::LineSelect(const string& id_, const string& classes_)
        : Component(id_, ".line-select " + classes_)
{
    this->setup();
}

LineSelect::~LineSelect()
{
    
}

Component* LineSelect::create(const string& id_, const string& classes_)
{
    return new LineSelect(id_, classes_);
}

void LineSelect::setup()
{
    style("../components/style.css");
}
```

Стили для простоты будем размещать рядом с исходным кодом, так что создадим файл `style.css` в той же папке `components` и не забудем подключить стили к компоненту (более подробно это описано в [Создание собственных компонентов на базе класса Component](https://i58215.gitbook.io/component-sdl2/uglublennaya-rabota-s-bibliotekoi/sozdanie-sobstvennykh-komponentov-na-baze-klassa-component) ).

Теперь все готово к созданию компонента. Все вышеприведенные действия будут совпадать при создании любого компонента на базе класса `Component` .

### Как устроен Line Select

Line Select в любой момент может иметь только один выбранный элемент, так что нам нужно будет отслеживать это. Для этого будет использована пользовательская информация в компоненте (подробнее об этом на странице [Начало работы](https://i58215.gitbook.io/component-sdl2/master)).

### Добавляем пункты

Для этого, в первую очередь, мы должны каким то образом получать массив строк для создания пунктов. Добавим в конструктор и метод `create` аргумент `const vector<string>& items` . Добавим в класс поле `vector<string> items` . В конструкторе пропишем следующее:

```cpp
LineSelect::LineSelect(const string& id_, const vector<string>& items_, 
                       const string& classes_)
        : Component(id_, ".line-select " + classes_)
{
    this->items = items_;

    this->setup();
}
```

Изменим так же тело метода `create` :

```cpp
Component* LineSelect::create(const string& id_, const vector<string>& items_,
                              const string& classes_)
{
    return new LineSelect(id_, items_, classes_);
}
```
