Рубрики
CSS CSS основы

Синтаксис

//синтаксис id
#211018104515 {code} error
#211018104515_id {code} error
#211018104515-id {code} error
#id-211018104515 {code} successfully
//синтаксис class
.211018104515 {code} successfully
.211018104515-click {code} successfully
.click-211018104515 {code} successfully
Рубрики
App React React-project CSS

Стилизация компонентов в React

styled-components
библиотека

Установка библиотеки через терминал

npm install --save styled-components

packge.json
добавляется библиотека

"dependencies":{
...
"styled-components":"^5.2.1",
...
}
Рубрики
App front-end JS фреймворки React React-project Sass

Разворачивание интерфейсов в приложении на React

подключение стилизации
два способа

  • через модули SASS
  • через сторонние библиотеки
    (например react-rating-stars-component)

src\modules

папка хранит глобальные компоненты, которые используются во всём проекте и имеют какую то логическую составляющую, какой то функционал

Рубрики
CSS JavaScript lib Fragments

Fragments «JavaScript»

Операторы

  • swith
    условные операции, операции ветвления
switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    break;
  case 'value2':  // if (x === 'value2')
    ...
    break;
  default:
    ...
    break;
}

String «Работа с текстом»
символ начинается с 0!

  • «вложенный текст»
//весь текст после 2 символа
text=text.substr(2);
//заменить вложенный текст в другой вложенный текст
let new_text=text.replace(subtext1,subtext2);
  • «поиск вложенного текста»
//поиск первого вложенного текста
let index=text.indexOf(text);
//поиск последнего вложенного текста
let index=text.lastIndexOf(text);
  • «вырезать текст»
l длинна вырезаемого текста
s старт вырезаемого текста
str.slice(s,l)
  • «элемент текста»
//удалить последний элемент текста
text=text.slice(0, -1);
  • «прочие»
//проверка текста на пустоту и удаление невидимых символов (переход на следующую строку)
text.trim() == ''
//выполнить текст-код
let arr=eval(data);

События

  • ev событие «управление»
//элемент DOM на котором выполняется событие
let e=ev.currentTarget();

Массивы

  • преобразование
//строка в массив через "\n"
let arr=text.split("\n");
//массив в строку через "\n"
let text=arr.join("\n");
//проверка на массив
Array.isArray(obj);
  • базовые свойства
//ассоциативный массив Array(0) нет индексов
arr.length==0
  • перебор массива или выборки
//пройтись по массиву или объекту
arr.forEach(function(item, i, data) {code});
Array.from(arr, (item,index)=>{code});
for(var i=0;i<arr.length;i++){arr[i]};

Объекты

  • перебор свойств
for (let key in obj){
obj[key]
}
Рубрики
WordPress CSS

Блок Форматированный

пример форматированного блока с кодом в новой записи WordPress
//форматированный блок с длинным кодом оформить с ползунками. В WorlPress Настроить\Дополнительные стили добавить css код для класса code1
.code1
{
 font-size:1.4rem;
}